Using Your Own XSLT in Content by Query Web Part (CQWP)

To change the HTML output of a CQWP web part, we have to edit out of the box XSLT template provided by SharePoint. We already wrote an article on how to do this here: Playing Around with Content by Query Web Part (CQWP). But, OOTB XSLT formatter is shared to all CQWP web parts in the same site. If you are sure that you will only have one CQWP in your SharePoint site, it’s OK to go with this direct edit approach. Otherwise, let’s try a better solution: use custom XSLT formatter for each CQWP web part.

This solution doesn’t require custom coding with Visual Studio. We need only SharePoint Designer, or it’s also doable with any text editor. We’ll break down this solution on a step-by-step below:

Step 1 – Duplicate OOTB XSLT Files

If we open OOTB XSLT formatter files in a text editor, we should come to conclusion immediately that they are all complex ones. So, don’t try to understand them entirely. Just, use them as the starting point. For our purpose in this article, we copied two of them: ContentQueryMain.xsl and ItemStyle.xsl. We paste them in the same directory and, then rename them to SliderContentQueryMain.xsl and SliderItemStyle.xsl respectively.

Duplicate CQWP XSLT Files

Step 2 – Export CQWP Web Part to a File

We can find Export menu item from the same menu where Edit Web Part menu item is located. Use this menu item to export our CQWP web part to a file. We named the file SliderCQWP.webpart.

Export CQWP Web Part

Step 3 – Edit SliderCQWP.webpart

Use any text editor to edit SliderCQWP.webpart, and change the following two lines:

The first one is to change ItemXslLink property, point it to the SliderItemStyle.xsl location:

<property name="ItemXslLink" type="string">/Style Library/XSL Style Sheets/SliderItemStyle.xsl</property>

And the second one is to change the MainXslLink property, point it to the SliderContentQueryMain.xsl location:

<property name="MainXslLink" type="string">/Style Library/XSL Style Sheets/SliderContentQueryMain.xsl</property>

Step 4 – Upload SliderCQWP.webpart to Web Part Gallery

Open Web Part Gallery from http://<server-name>/_catalogs/wp/Forms/AllItems.aspx. Upload SliderCQWP.webpart, and rename its title to Slider Content Query.

Web Part Gallery

Step 5 – Add “Slider Content Query” to Home Page

Now we should be able to use Slider Content Query web part to the home page. When adding a web part, choose Miscellaneous category, our Slider Content Query web part should be listed there.

Adding Web Part

Test

To test it, just edit the SliderItemStyle.xsl by adding some visual text that will be rendered in the web part. We can put any words here since its purpose is only for testing. For example, we added SLIDER IMG words after <img> tag:

Test Web Part

Refresh the page, we should see the words SLIDER IMG rendered after each image in “Slider Content Query” web part. This is a sign that the web part is indeed using SliderItemStyle.xsl.

CQWP Custom XSLT Output
Source: Using Your Own XSLT in Content by Query Web Part (CQWP)

Advertisements

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