CQWP and XSLT – Part 1

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.

Web Part Tools

Web Part Tools

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.

<property name=”Title” type=”string”>My Custom Content Query</property>

The other two we need to change will tell the web part to use our new XSLT files.

ItemXslLink is around line 46.

<property name=”ItemXslLink” type=”string”>/Style Library/custom/ItemStyle.xsl</property>

MainXslLink is around line 71.

<property name=”MainXslLink” type=”string”>/Style Library/custom/ContentQueryMain.xsl</property>

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.

CQWP Title

CQWP Title

In Part 2 we will start to look at customising our XSLT files.

This entry was posted in SharePoint and tagged , , , , , . Bookmark the permalink.

12 Responses to CQWP and XSLT – Part 1

  1. Roberto S says:

    Perhaps, you could help me…
    I’m modifying the archive “Itemstyle.xsl” but when I try to ask for the URL, the instruccion gets back a blank space… I’m using the following code:

    _blank

    //Here I’m try to get URL

    This code works, but the link takes me to the menu of link configuration and not to the page that I wish.

    Could you help me please?

    • paylord says:

      Hello Roberto,

      Your code example did not come through so if I understand you correctly you are trying to link back to a document from a library and it is opening the document properties page rather than the document itself?

      This is standard behaviour as the CQWP does not know if you are working with a list or a library.

      To resolve this try using @FileRef which should resolve to the URL for your file.

      If I have misunderstood your question please post again and try to rephrase?

      Good luck

      Dave

  2. tnast says:

    Appreciate the info, clear and concise. Where is Part 2?

    • paylord says:

      OK – you found me out – I have been slacking lately. I have been toying with a few different ideas for posts lately but really need to get around to this Part 2.

  3. toronto limosine says:

    This blog was… how do I say it? Relevant!! Finally I have found something which helped me.

    Appreciate it!

  4. EdwinG says:

    Hi Dave, just wanted to say great articles on xslt and SharePoint

  5. Manish Oswal says:

    Hi Dave,

    Nice and very well written article. I wanted to know how can we customize the CQWP to display items from another website such as all the items from the posts list from another site on the main site or root site with multiple columns. As of not the webpart displays only the title column but i want to display more columns of the Posts List.

    Your help is greatly appreciated…

    Thank you

    Regards
    Manish

    • paylord says:

      Hello Manish,

      It sounds like you have already established that you can connect the CQWP to any list in the same site collection. To add more columns you will need to follow the blog posts and associate the CQWP with a custom version of the ItemStyle.xsl file and customise the XSL to present the additional columns. You can then relate these columns to the required fields in the list through the web part settings.

      Good luck.

      Dave

  6. Ajendra Singh Yadav says:

    Hi Dave,
    I am trying to add few column names with their datatype to the commonviewfield property in CQWP, but after adding 4-5 columns the webpart starts giving error of “There is a problem with the query that this Web Part is issuing. Check the configuration of this Web Part and try again.”. Column names and datatypes correct but still facing the issue.

    • paylord says:

      Hello Ajendra

      Are you using this approach for a specific reason? From SP2010 you no longer need to add columns this way. If you take a look at the next blog post – Part 2 – then you will see that any columns you add to the XSL will automatically appear in the settings of the web part which then allows you to associate them with the required fields. Much easier than it used to be.

      Let me know if this helps?

      Dave

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s