Aaron's Information Worker WebLog: Creating News Article summaries with the Content Query Web Part & XSLT

Recently I was at a client site and I needed to create a News article summary listing on the front page of a portal using the Content Query Web Part (CQWP) and I found the following tutorials very helpful. (This is assuming you are using WCM to publish pages.)

http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx
http://blogs.msdn.com/ecm/archive/2006/10/25/configuring-and-customizing-the-content-query-web-part.aspx
http://msdn2.microsoft.com/en-us/library/bb447557.aspx

Using a combination of the above three sites I worked out how to use XSLT and the CQWP to achieve this. I am sharing this so you don't have to do any experimentation like I did to get this to work properly. The above articles cover this in a little more broad detail but I needed something that specifically shows a byline image, a title and a description. Something simple and quick. I wanted the ability to click on the title that would link to the actual article.

(Apologies for the very lengthy post)

This post follows on from the article - Create a publishing page layout You will need to build a page layout with an edit mode panel that contains a Rollup Image page field, a byline content field. By putting these into an edit panel, these wont be visible when the page is published/viewed. They will only be accessible during page editing mode. The rest of the page and content fields can be place anywhere within the main PlaceHolder.

Its important to note that you will need SharePoint Designer (SPD) to carry out these steps.

Here's how to get this to work:

1) Create a Site Content Type - Create a new site content type for your new article page. I usually base my new page on an existing article page

Go to Site settings..Site content types..

Create a new site content type

Create a new site content type. select 'Page layout content types' as the parent content type and select 'Article Page' as the parent content type.

Put this new content type into a new group as well. I usually give it a meaningful name so its easy to find.

After clicking 'OK' the new content type has been created.

2) SPD create a new publishing page - Next open SPD and select File..Open Site. You should be presented with a site folder structure as in the following image.

(You may be prompted to authenticate against the WSS server)

Next (In SPD) go to File..New..SharePoint Content. Then select 'Sharepoint Publishing'

Make sure you select the content type group you created in Step 1 and the content type you created as well (see following image).

Give your new page a URL name and a title and select OK.

You should have a brand spanking new publishing page ready to be customised. (This will be based on the content type you created earlier.)

3) Customising the Publishing page - (Still in SPD) Drag and Drop a 'EditModePanel' Server control into the 'PlaceHolderMain' on your page - This enabled the "hiding" of page fields from being viewed when the page has been published. These hidden fields are only accessible during editing of if we are referencing them via XSLT (more later)

Into the 'EditModePanel', Drag and drop the 'Rollup Image' page field control and the 'ByLine' content field control. You can also add the 'Scheduling Start Date' page field as well. But it isn't required at this stage.

At this stage you can drag and drop the 'Description' page field and the 'Page Content' content fields into the 'PlaceHolderMain'. These should be placed outside the 'EditModePanel'. A HTML table can be wrapped around these to make these align etc.

Save the page and you might have to check it in an approve it. You are ready to create a new page based on the publishing page that you created in step 3.

4) Create a new page from a publishing page - Go to 'Site Actions'..'Create Page'. Give your page a title and a URL. Make sure you select the page layout you created earlier. Click 'Create'

The new empty page has been created using the new page layout. You can now enter content and publish this page straight away. Enter some content, images etc and check-in the page and publish. The new page will be saved.

5) Add CQWP - Add a Content Query Web part (CQWP) to a web part zone on the home page

6) Modify the file 'ItemStyle.xsl' in SPD - For the opened site go to, 'Style Library', 'XSL Style Sheets'. Then checkout 'ItemStyle.xsl'. Note that by changing this file you are breaking the styles as dictated by the site definition. Thus making it customised. By changing this file we can add our own XSL template styles.

Open the 'ItemStyle.xsl' file and copy the following template code just above the last </xsl:stylesheet> tag. (Important)

<xsl:template name="ShowRollUp" match="Row[@Style='ShowRollUp']" mode="itemstyle">
<xsl:variable name="SafeLinkUrl">
<xsl:call-template name="OuterTemplate.GetSafeLink">
<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
</xsl:call-template>
</xsl:variable>
<xsl:variable name="DisplayTitle">
<xsl:call-template name="OuterTemplate.GetTitle">
<xsl:with-param name="Title" select="@Title"/>
<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
</xsl:call-template>
</xsl:variable>
<xsl:variable name="LinkTarget">
<xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
</xsl:variable>
<xsl:variable name="SafeImageHtml">
<xsl:call-template name="OuterTemplate.GetColumnDataForUnescapedOutput">
<xsl:with-param name="Name" select="'PublishingRollupImage'" />
<xsl:with-param name="MustBeOfType" select="'Image'" />
</xsl:call-template>
</xsl:variable>
<div id="linkitem" class="item">
<xsl:if test="string-length($SafeImageHtml) != 0">
<div class="image-area-left" align="left">
<xsl:value-of disable-output-escaping="yes" select="$SafeImageHtml" />
</div>
</xsl:if>
</div>
<div class="link-item">
<xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<a href="{$SafeLinkUrl}" mce_href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
<xsl:value-of select="$DisplayTitle"/>
</a>
<div class="description">
<xsl:value-of select="@Description" />
</div>
</div>
</xsl:template>

(Optional step) Also while debugging it might be worthwhile to use the following template code, This displays all the fields that are available to be manipulated via the XSLT query. You need to change the Item Style to 'MyDebug" for this to show up (Thanks to Heather Solomon for this tip):

<xsl:template name="MyDebug" match="Row[@Style='MyDebug']" mode="itemstyle">
<xsl:for-each select="@*">
P:<xsl:value-of select="name()" />
</xsl:for-each>
</xsl:template>

Save and close the 'ItemStyle.xsl' file also check it in and approve it.

7) CQWP Query Display - Go back to the web part page and select 'Modify Shared Web part' on the CQWP. Expand the 'Query' option and ensure that the query is showing items from the 'Pages Library' and is showing both items from the 'Content Type Group' and showing items of the created content type. In this case I am using the 'Dev pages' content type group and the 'Dev Pub Page' content type.

Scroll down to the Styles section and change the Item style to 'ShowRollup'. Click Ok.

You should see the CQWP displaying a summary of the pages library, filtering by the defined content type and displaying the Byline image, Title and description: