Passing a url with a query string in a content query web part using itemstyle.xsl

Requirement:

I needed to display a list of items from a SharePoint list, On clicking the items in the list, the user is led to a page where the document or announcements pertaining to that individual is to be displayed.

For e.g.
If there is a list of students stored in a SharePoint contacts list, each having a document report related to him/her stored in a document library (A lookup field has been added to associate each item in the doc lib with the student name field of the student list). We need to display a list of the student names on one page, and on clicking any item (Student name) on the page we are led to another page which shows the documents or announcements related to that student.

Solution:

create 2 lists:
1.Student list- You may use an OOB SharePoint contacts list ( Make the name field as mandatory).
2.Document library - Create a doc lib and add a site column that looks up the students name (lookup column should be made mandatory).

Create 2 pages:
Page 1: For displaying the list of student names
Page 2: For displaying the doc lib or announcement regarding a particular student.

In Page 1:

Insert a content query web part and configure it to display the items from the Student list.
Create a new template in the itemstyle.xsl in SharePoint designer.
To learn more about how to modify the CQWP itemstyle.xsl refer the following links
Basics of XSLT
Customizing styles of CQWP
Content Query Webpart In SP
How to: Customize XSL for the Content Query Web Part

We have used a query string to achieve the desired results. The following portion of the XSLT CQWP itemstyle.xsl is the portion used to pass the url of Page 2 along with a query string:



<a>
  <xsl:attribute name="href">
    /Pages/Page2.aspx?StudentName=<xsl:value-of select="$DisplayTitle"/>
  </xsl:attribute>
  <xsl:value-of select="$DisplayTitle"/>
</a>



Save the itemstyle.xsl and publish it.

Apply the desired template to the CQWP inserted in Page 1.

In Page 2:


Open the page in SharePoint 2010 designer and edit the page in advanced mode (Note: Detach the page  from the page layout if you are using a publishing page)

Insert the document library or announcement list into the page. Save (and publish) the page.

Open the page in the browser and edit it.

Add a SharePoint filter web part called: query filter web part. Edit this web part and in the Query String Parameter Name field add StudentName (or as specified in the xslt). Apply and ok.

Click on the dropdown of the query filter web part and click on connection and select the doc lib or announcement list inserted into the page earlier. Here select the consumer field name as the Student Name while connecting the web part. Save and publish the page.

Add your custom CSS to style the web parts, and we are done :D.