August 4th, 2010Custom Styling of the Content Query Web Part (CQWP)
I should call this post “Part 2″ because I’ve covered a similar topic in the past. However, this is a bit different.
More than likely, you will find yourself in a situation where you need some SharePoint data that is available on another site in the collection.
The Content Query Web Part (CQWP) allows you to do this, however, it can be somewhat limited.
In this example, I want to display appointments from a calendar list that is located on a parent site.
1. Select Site Actions > Edit Page
2. Select “Add a Web Part” within one of the available zones
3. Select the “Content Query Web Part” from the “Default” group
4. Select the edit button and choose “Modify Shared Web Part”
5. Under the Query properties, specify your conditions (in this case I’m going to select a calendar from the parent site)
6. You may want to set other properties such as the Title, Title Url, etc.
7. Click OK

Hey! There's only one column here!
You can see that this won’t quite work. Sure the CQWP is displaying appointment from the calendar, however, there is no useful “at-a-glance” information. We need to add information to the web part like what time the event starts, where the location of the event is, etc.
8. Select the edit menu again from the web part and choose “Export…”
9. Save the .webpart file to your computer.
10. Open the .webpart file in SharePoint Designer.
We need to add a couple of columns to be used in the web part. Look for the property “CommonViewFields” and change it to include some additional columns:
<property name="CommonViewFields" type="string">EventDate,DateTime;Title,Text;EndDate,DateTime;Location,Text</property>
In order to take advantage of these columns, we need to be able to modify the ItemStyle.xsl. In my case, the site collection was not a Publishing Site, so I couldn’t find the ItemStyle.xsl! No problem. Just modify the “ItemXslLink” property to include the path of a custom .xsl file (just make sure you create it):
<property name="ItemXslLink" type="string">/CustomStyles.xsl</property>
In this case, I made an XSL stylesheet named “CustomStyles” that I put in the root of the site collection.
Here’s the code I used in my stylesheet:
<xsl:stylesheet
version="1.0"
exclude-result-prefixes="x d xsl msxsl cmswrt"
xmlns:x="http://www.w3.org/2001/XMLSchema"
xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
xmlns:cmswrt="http://schemas.microsoft.com/WebParts/v3/Publishing/runtime"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
<xsl:param name="PageUrl" />
<xsl:template name="Custom_CQWP_Calendar_Items" match="Row[@Style='Custom_CQWP_Calendar_Items']" mode="itemstyle">
<xsl:variable name="DisplayTitle">
<xsl:call-template name="OuterTemplate.GetTitle">
<xsl:with-param name="Title" select="@Title"/>
</xsl:call-template>
</xsl:variable>
<table style="width:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="width:40%; padding:3px 0px 3px 0px; font-family:Tahoma; font-size:8pt;">
<xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<img src="/_layouts/images/square.gif" />  
<a href="/cpoe/Lists/Calendar/DispForm.aspx?ID={@ID}&source={$PageUrl}">
<xsl:value-of select="$DisplayTitle"/>
</a>
</td>
<td style="width:30%; padding:3px 0px 3px 0px; font-family:Tahoma; font-size:8pt; color:gray">
Starts: <xsl:value-of select="ddwrt:FormatDate(string(@EventDate),1033,2)"/>
</td>
<td style="width:30%; padding:3px 0px 3px 0px; font-family:Tahoma; font-size:8pt; color:gray">
Location: <xsl:value-of select="@Location" />
</td>
</tr>
</table>
</xsl:template>
</xsl:stylesheet>
Notice that $PageUrl parameter? Yeah, I wish I could say I came up with that myself, however, I didn’t. The $PageUrl parameter makes sure we return back to wherever we were when we click on the Close button from the item display view.
Also, I’ve included the image for a bulleted list.
Here’s the finished product:

Now that's more like it!
Here are the remaining steps:
1. Go to the Web Part Gallery of the site collection and upload the .webpart file
2. Add the web part to your page
3. Select edit and “Modify Shared Web Part”
4. Under the “Presentation” group in the “Styles” heading select the available item style (the name of which is specified in your CustomStyles.xsl)
Another resource that was helpful was Brendon Schwartz’s blog




