Previous posts have covered how XSLT can be used with List and Data View web parts. The CQWP is a great tool to roll up data from multiple sites across a site collection though can also be used against a single list if you prefer. Another huge advantage is the ease with which it presents data from lists on other sites and as far as I know it is the only standard web part which will respect item level target audiences.
So, some great reasons to make use of the CQWP, but how do we use XSLT to change how the information is presented?
To do these steps I am going to work in SharePoint Designer 2010.
Prepare the files
The standard CQWP uses three XSLT files which are located in /Style Library/XSL Style Sheets:
ContentQueryMain.xsl – acts as the opening template in normal XSLT and calls all other templates as needed
Header.xsl – manages formatting for group headers
ItemStyle.xsl – contains the output styling templates for the returned items
In most cases you can probably get away with just customising the ItemStyle.xsl though in this example I am also going to use the ContentQueryMain.xsl ready for later blog posts.
All XSLT files used with a CQWP need to be in the Style Library. They can be placed in sub-folders but must be within the Style Library or all you will get is an error message.
Create a sub-folder under the Style Library called Custom (this can be anything you like).
Copy the ContentQueryMain.xsl and ItemStyle.xsl and paste them into your new sub-folder.
Edit the CQWP
Next thing is to get the CQWP to use our copied files.
Add a standard CQWP to a page (note that I usually just create a blank ASPX page in Site Pages). If you wish your new CQWP to default to a particular list or have a specific filter etc then you can set this up now if you wish through the web part properties. When ready, select the CQWP and you should get a new ribbon tab called Web Part Tools, click on this and under the Save Web Part section select To File.
Choose a suitable name for your file and save to disk.
You can now delete the CQWP from your page.
In SPD, select File -> Pages -> Open and navigate to the file you just saved. This will open up as an XML file – fancy that, the inside of a CQWP is XML.
Most of the properties can be changed here as needed but for now we are going to keep it simple.
I usually change the Title property so it appears nicely in the web part gallery.
The other two we need to change will tell the web part to use our new XSLT files.
ItemXslLink is around line 46.
MainXslLink is around line 71.
Note that you do not need any quotes and it will happily accept spaces in the link.
Save your file.
Load up the web part
Navigate to the /Style Library/Custom folder that you created earlier and click Import. Select your web part file and upload. From here you can drag your custom web part onto your ASPX page.
Alternatively you can upload the web part to the web part gallery which is accessed through the browser from Site Settings -> Galleries -> Web Parts. Once in the web part gallery then your web part can be simply added to a page the same as any other. However, I usually make sure it is working and I have no further changes using the previous method before I add it to the gallery.
Drag or add the CQWP to your ASPX page and preview it. This should work the same as any standard CQWP. If not then check back to confirm you have carried out all the steps correctly.
If you open up the web part properties then you should see the title is now whatever you set it to.
In Part 2 we will start to look at customising our XSLT files.