Render Content Query Web Part output as UL and OL lists rather than tables
The Content Query Web Part (CQWP) is an extremely powerful web part used for displaying content that can be pulled from multiple sites. However the default HTML rendered by the CQWP is full of nasty tables. A requirement was to use the cross site querying benefits of the CQWP but to be able to render the output from it as unordered (UL) lists. Lists have a number of benefits including accessibility, semantic correctness and the ability to more easily target with CSS / javascript.
Sharepoint uses XSL style sheets to sculpt the HTML that is rendered by the Content Query Web Part (CQWP). We therefore need the web part instance to use modified XSL style sheets.
Create customised XSL files that the Content Query Web Part can use
To prevent Sharepoint overwriting your custom rendering when applying hotfixes, service packs etc we will create copies of the default XSL style sheets and then make our Content Query Web Part use these copies. Then if the default XSL files are overwritten our bespoke rendering will not be wiped out.
Open Sharepoint Designer
Browse to /Style Library/XSL Style Sheets/
Make a copy of ItemStyle.xsl and name it BespokeItemStyle.xsl
Make a copy of ContentQueryMain.xsl and name it BespokeContentQueryMain.xsl
Open BespokeContentQueryMain.xsl
Find the OuterTemplate template. Edit the XSL to remove the references to the table elements. Add the opening and closing UL or OL tags.
Next find the OuterTemplate.Body template. Remove the code that is used to determine how to render table columns and group by headings.
Save and close the file.
Open BespokeItemStyle.xsl. This file contains a number of templates for rendering the items returned by the Content Query. The ItemStyle property of the web part will influence which of these templates is used to render the items. To specify which template to use modify the web part using the user interface.
For this example we are going to edit the ‘Title Only’ template. Note we are outputting a LI element for each item in the query results.
Title Only Item Template XSL
Save and close the file. If you wish you could edit all the templates to provide a more complete solution but for our initial needs we just want to be able to create a list of links that use the item title as their text.
Create customised version of the Content Query web part that will use the modified XSL files.
Add a Content Query Web part to your page and then export the web part to your desktop with a new name e.g. BespokeRenderingContentQuery.webpart . Open the .webpart file and edit the following two properties: MainXslLink and ItemXslLink. Make them point to the copied files you have just created.
<property name=”MainXslLink” type=”string” >/Style Library/XSL Style Sheets/BespokeContentQueryMain.xsl</property>
<property name=”ItemXslLink” type=”string”>/Style Library/XSL Style Sheets/BespokeItemStyle.xsl</property>
Save the .webpart file and then upload it into the site collections web part gallery by going to Site Actions > Site Settings > Modify All Site Settings > Web Part Gallery > Upload
Now go back to the page you want to add your modified web part to and add a new web part, select your modified Content Query web part. Make sure the ‘Title Only’ style is selected for ‘Item Style’. Apply the changes and exit Edit Page mode. Refresh the page and view the source. You should now see the items returned by the Content Query Web Part rendered as a list.
