Customize Content Query Web Part HTML output (Part 1).

In this article I will explain how you can adjust the Content Query Web part so generates exactly the HTML you want. I’m also planning 2 follow-up postings where we will dive a deeper and convert the standard <table> HTML layouts to <UL> HTML layout. And finally explain how to deploy all this to your SharePoint farm.

This article assumes that you :

know HTML
basic understanding of XML and xslt
know how to use SharePoint Designer.

The basics.

The Content Query Web Part gathers information from your SharePoint website in structured XML. To convert the data to HTML an XLST style sheet is used. Explaining the details of XSLT and transforming the data to HTML will make this article too complex. If you want more info about xslt fire up Google. A basic understanding about what xslt is will do for this article.

In your SharePoint folder: “Style Library/XSL Style Sheets” you will find the following 2 xsl files:

‘ContentQueryMain.xslt’ : generates the start and end tags of your HTML. Basically the tags <table>, <ul> and <ol>
‘ItemStyle.xslt’ : creates the <tr> and <li>.. tags. This file is called for every item in the XML data

We will adjust these XSLT files so it generates the desired HTML .

Creating the XSLT.

For simplicity sake we will do the changes in SharePoint Designer. I’m planning an article that will explain how to properly deploy the files with a SharePoint feature to your SharePoint farm.

Create a test / development SharePoint website.
Add a few pages and/or sub sites, so have some content that we can use
Start SharePoint Designer
Open your (test) SharePoint site.
Browse to the All Files => Style Library => XSL Style Sheets.
There you will find the following style sheets

Create a copy of the files ‘ContentQueryMain.xsl’ and ‘ItemStyleCustom.xsl’.
Simply rename the copies to ‘ContentQueryMainCustom.xsl’ and ‘ItemStyleCustom.xsl’. These are the 2 files we will be working with.

Open the ‘ItemStyleCustom.xslt’. If you look carefully you will see it contains several ‘xsl templates’. Delete all templates except for the template with name ‘HiddenSlots’. Leave all the variable declarations, at the beginning of the file, in place.
Save the file.

Your result will look like this.

Next we add our custom template between the variable declarations and the ‘HiddenSlots’ template.

    <xsl:template name="MyCustomStyle" match="Row[@Style='MyCustomStyle']" mode="itemstyle">
     <tr>
       <td>
         From our custom ItemStyle template: <xsl:value-of select="@title" />
       <td>
     <tr>
    </xsl:template>

Save the changes and close the file.

This sample template will display the title for every item in a table row (<tr>). I agree not exactly a great sample of a good layout. But this article focuses on getting the custom xslt to work.

Adjust webpart to use your custom xslt files.

Next is adjusting the default Content Query Web part of SharePoint so it points to our custom XSLT files. We will not break or replace existing functionality.

Open a page in your SharePoint site.
Edit the page and add the default Content Query web part to the page
If needed you can edit the Content Query web part
When done editing go to the webpart contect menu and select export.

Save the web part file as Demo_Content_Query.webpart.
Then open the saved web part file with a text editor. The web part file contains simple xml. It simply defines a bunch of properties of the web part. The 2 properties we are interested in are

Title
ItemXslLink

Change the two properties to the following:

<property name="Title" type="string">Demo Content Query</property>
<property name="ItemXslLink" type="string" >/Style Library/XSL Style Sheets/ItemStyleCustom.xsl</property>

As you can see we changed the title and we pointed to our new ItemStyleCustom.xsl file. If you used a different name for your custom xslt you should use that one of course.
Next step is to add your modified web part to SharePoint.

Go to Site Actions -> Site Settings of your root site.
under Galleries, click on Web parts links
In the Web part gallery list, Upload your Demo_Content_Query.webpart to this list (documents -> upload document).
Click Save when asked.