Introduction

Microsoft Office SharePoint Server 2007 introduces a lot of new web parts, one of them being the Content Query Web Part. This Web Part is part of the “Web Content Management” features of Microsoft Office SharePoint Server 2007 and in order to use it you need to turn on the Publishing feature on a site. It is not available in a default Windows SharePoint Services v3 installation.

Using the Content Query Web Part you can display a dynamic view of content from your site on a web page. The web part can be configured to retrieve items from a single list, a single site and subsites or the entire site collection. It builds a CAML (Collaborative Application Markup Language) query and uses the new Microsoft.SharePoint.SPSiteDataQuery class to query the server. Filtering, sorting, ordering and grouping can all be configured in the Web Part properties.

Displaying the results can be done by choosing one of the default item layout styles. The default item layout styles cover basic formatting with bullets, images and font size.

Content Query Web Part: default layout

If the default item styles are too basic for your needs you can add, modify or delete styles as desired by editing the ItemStyle.xsl file of the Site Collection. It is also possible to add extra fields to the CAML query and display additional information about the item, like author, date or other custom fields.

Here is a small walkthrough illustrating the steps to customize the Content Query Web Part to your needs.

Demonstration

The following demonstration will create a rollup of my news article pages. Note that you can also rollup other types of information;eg. SharePoint announcements, events, etc.

News articles are stored as .aspx pages in the Pages library and have their Content Type set to “Article Page”. Content Types are a new concept in Windows SharePoint Services v3 and allow you to maintain different types of documents in a Document Library. You can add multiple Content Types to a single document library and configure each Content Type with its own metadata fields (columns), document template, workflow settings and more.

Here's what I’d like to do with the rollup of news articles:
- display the creation date
- display the author
- display part of the page content
- display a link with 'Read more...' functionality

ItemStyle.xsl

Most of the customization is done inside the XSL file that has the item style formatting.
You can find this file in the document library called ‘Style Library’ in the root of the site collection ( /Style Library/XSL Style Sheets/ItemStyle.xsl ). Open the file in an editor of choice (eg. Microsoft Office SharePoint Designer). Next check it out to be able to make changes to the file.

xsl:template

In the XSL file you'll find xsl:template elements for each selectable style in the Content Query Web Part style drop down. As a best practice I won’t modify any of the default styles, but rather adding my own style.

The easy approach is to copy the xsl:template element of the style that matches your style the most,and make alterations to it.

- Copy the <xsl:template name="Default" match="*" mode="itemstyle">element
- Change the name attribute to "DetailedStyle"
- Change the match attribute to "Row[@Style='DetailedStyle']"

If you save the file and check it in (or publish it) you'll see that our newly created style has been added to the drop down list of styles in the Content Query Web Part:

Content Query Web Part properties showing our custom style

Creation date

Next up is customizing the XSL for displaying the creation date of the article. The code below shows how to modify the link to the article to include the article’s creation date:

Original xsl:

<a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
  <xsl:value-of select="$DisplayTitle"/>
</a>

Modified xsl:

<a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
  <xsl:value-of select="@Created"/> - <xsl:value-of select="$DisplayTitle"/>
</a>

You can take it even further by formatting the date. Instead of reinventing the wheel and writing our own date formatting function I’am using the ddwrt namespace used in Data View Web Parts, which contains great functionality for formatting date and time.

1) Add the ddwrt namespace

Add the following namespace attribute to the root xsl:stylesheet element

xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"

2) Use the date formatting functionality of ddwrt

Add an xsl:variable element to our xsl:template element

<xsl:variable name="Created">
  <xsl:value-of select="ddwrt:FormatDateTime(string(@Created) ,1033 ,'dd-MM-yyyy')" />
</xsl:variable>

Change our anchor markup (instead of the parameter @Created we now use the variable $Created )

<a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{$DisplayTitle}">
  <xsl:value-of select="$Created"/> - <xsl:value-of select="$DisplayTitle"/>
</a>

Author

The @Author parameter is passed through as id#name, because its field type is Lookup. In order to get to the ‘name’ part we can substring the parameter, by using the GetGroupName function

Add an xsl:variable element to our xsl:template element

<xsl:variable name="Author">
  <xsl:call-template name="OuterTemplate.GetGroupName">
    <xsl:with-param name="GroupName" select="@Author"/>
    <xsl:with-param name="GroupType" select="'User'"/>
  </xsl:call-template>
</xsl:variable>

Change our xsl markup to display the $Author

<div class="description">
  <span style="padding-left: 20px; font-size: smaller; text-decoration: underline;">
    Created by <xsl:value-of select="$Author" />
  </span>
</div>

For displaying the author I use a smaller font size and underlining of the author.

Page content + 'Read More' link

The idea here is to show a few lines of the page content with a ‘Read more’ link that redirects to the entire article. This way readers get a small preview of the article’s contents.

Add the following text to the xsl markup . It will display the first 200 characters of the Page Content field and the link pointing to the entire article.

<div class="description">
  <xsl:value-of select="substring(@PublishingPageContent, 0, 200)" disable-output-escaping="yes"/>
  <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="Lees meer">...</a>
</div>

Content Query scope

At this point you can publish the ItemStyle.xsl and configure the Content Query Web Part to display your view, but you'll find that the page content isn't shown for any of the articles. This is because the Content Query Web Part has a limited scope..

If you want to display the Page Content field, or any other of your custom defined fields, you have to include it in the query scope. This needs to be done for every web part.

Export the Content Query Web Part and save it as a .webpart file to your hard drive.

- Open it with a text editor
- Modify the 'CommonViewFields' property
- Add the PublishingPageContent field (field type: Note)

<property name="CommonViewFields" type="string">
  ExternalUrl,URL;PublishingPageImage,Image;PublishingPageContent,Note;
</property>

All fields added here have to be separated by semicolons and formatted as Field Internal Name,Field Type
It is crucial to not make any mistakes in either the internal name or the field type. You can check either the WSS v3 SDK or MOSS2007 SDK for the correct field types.

Import this Web Part back to SharePoint and add it to a Web Part Zone.

Note on the Content Query scope for Beta 2

When adding custom fields to the Content Query Web Part, you might run into problems when fields have spaces in their name. It might be that this problem is strictly for Beta 2, but if you run into this in a later release you can try the following solution: rename the field in the DataColumnRenames property of the Web Part.

Example: Say I have a field for my 'department name', which is a single line of text (type: Text).

Field Display Name: Department Name
Field Internal Name: Department_x0020_Name

1) Content Query Web Part properties

<property name="CommonViewFields" type="string">
  Department_x0020_Name,Text;
</property>
<property name="DataColumnRenames" type="string">
  Department_x0020_Name,DepartmentName;
</property>

2) ItemStyle.xsl

<xsl:value-of select="@DepartmentName"/>

The query is executed using the original field name. The renamed field can be used as parameter in your XSL template.

Result

Once you have completed all of the steps above you should see a dynamic view of news articles with a customized layout of items and additional information about each article.

Content Query Web Part: customized layout