Customizing the Content Query Webpart
Couple of weeks ago, a client asked us a question I had no immediate answer for. He wanted documents that were posted on many different sites (which are the departments of the company) to be presented together on the first page of the portal. He also wanted these posted documents to have special metadata that is then shown on the cumulative webpart. Last he wanted complete control on how this posts were presented on the portal home page.
My first guess was the RSS Feed Reader webpart. But trying this out gave some shortcomings. Mainly because it seems not to work for feeds that need authentication when working with Kerberos Authentication. Sure one could change to Kerberos, but this brings some unexpected behavior in other places.
After a little googling I read about the use of Content Query Webpart (CQWP). This is just what I was looking for. The webpart lets me gather all the post I need based on a Content Type. Gives me the opportunity to create a new look for it and present the information I want. With a bit of Customization I managed to customize it in such a way that it was a perfect match.
How to make it work
Here are the steps to implement this feature.
· Create a new content type with the necessary metadata.
· Export the Content Query Webpart and Customize the Common View Fields tag.
· Customize the Itemstyle.xsl
Create a new Content Type
Creating a new content type isn’t that difficult and is not the core business of this article. You can find a good walk through on the Office Online site of Microsoft. Here is a link :
http://office.microsoft.com/en-us/sharepointtechnology/HA100974931033.aspx
Export the Content Query Webpart and Customize the Common View Fields tag
Next we will export the Content Query Webpart. Default the CQWP will not load all the metadata of an item. Because we want to use some extra info like the description, we need to tell de CQWP that it needs to load this extra metadata. This is done in the Common View Fields tag.
|
<property name="CommonViewFields" type="string">Beschrijving, Text;Afdeling, Choice;File_x0020_Type, Text</property> |
You can see here that I wanted to load the “Beschrijving”, “Afdeling” and the “File Type”. You notice that the File Type is not just “File Type” but “File_x0020_Type”. This is the internal name. Use this to get the file type. Always use the “ “Name of field”, “Field type”; “ notation. When you are done adding the fields to the CommonViewFields save the xml and import it back into the portal.
Customize the Itemstyle.xsl
Our last step is to customize the Itemstyle.xsl file. This file holds all the default Itemstyles like Bulleted Title and image on right… We now want to add our own style and present the user our extra metadata. You can do this easily with Sharepoint Designer. Log in on the portal and find the Itemstyle.xsl file which resides on Style Library/XSL Style Sheets/Itemstyle.xsl. Open it and copy a template which looks the most like the one you want to create. I’ll post mine here.
Change the “Name” and “match” properties. Then change the template to match your wishes.
|
<xsl:template name="Metallo" match="Row[@Style='Metallo']" 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="SafeImageUrl">
<xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
<xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
</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>
<div id="linkitem" class="item">
<xsl:if test="string-length($SafeImageUrl) != 0">
<div class="image-area-left">
<a href="{$SafeLinkUrl}" mce_href="{$SafeLinkUrl}" target="{$LinkTarget}">
<img class="image" src="{$SafeImageUrl}" mce_src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />
</a>
</div>
</xsl:if>
<table cellpadding="0" cellspacing="0" style="vertical-align:top;">
<tr>
<td style="width:20px;vertical-align:top;" rowspan="3">
<a href="{$SafeLinkUrl}" mce_href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}" >
<img class="image" src="/_layouts/images/ic{@File_x005F_x0020_Type}.gif" mce_src="/_layouts/images/ic{@File_x005F_x0020_Type}.gif" alt="{@ImageUrlAltText}" style="margin-right:10px;"/>
</a>
</td>
<td style="width:100%;" >
<xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
<a href="{$SafeLinkUrl}" mce_href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
<xsl:value-of select="$DisplayTitle"/>
</a>
</td>
<td class="ms-vb" rowspan="3" nowrap="nowrap">
<xsl:value-of select="ddwrt:FormatDateTime(string(@Created) ,1032 ,'dd/MM/yyyy %H:mm')" />
</td>
</tr>
<tr><td>by <xsl:value-of select="@Afdeling" /></td></tr>
<tr>
<td class="description"><xsl:value-of select="@Beschrijving" /></td>
</tr>
</table>
</div>
</xsl:template> |
Save the file back to sharepoint Designer. Don’t forget to publish the changes as they will not be visible in unpublished state.
The last step is to choose the correct Itemstyle in our imported Content Query Webpart. If you did all thing right, it should work like a charm.
Tips and tricks
I had some tips to make life easier when customizing the QCWP.
1. Sometimes the fiednames you are adding to the Commonviewfields tag are not always the visible name on the sharepoint site, like the file type for example. Te make sure you use the correct internal name, you can figure this out by looking at the url of the column in the document library.
Go to the document library settings and click one of the columns. In the url you find the correct fieldname to use after “Field=”
For example :
http://company/Afdelingen/_layouts/FldEdit.aspx?List=%7B98ACCD4A%2D4184%2D4AAA%2D9584%2DE71007074B1D%7D&Field=Expiration%5Fx0020%5FDate
2. You can check which field the QCWP is loading by implementing another ItemStyle.
Add the following itemstyle and use it on the website to see the loaded fields.
|
<xsl:template name="Metallo_ViewFields" match="Row[@Style='Metallo_ViewFields']" mode="itemstyle">
<xsl:for-each select="@*">
P:<xsl:value-of select="name()" />
</xsl:for-each>
</xsl:template> |
This view loops over the field and displays its name.
3. To format a date field you can use the following method.
|
<xsl:value-of select="ddwrt:FormatDateTime(string(@Created) ,1032 ,'dd/MM/yyyy %H:mm')" /> |