SharePoint 2010 Content Query Web Part Styling

  • Article

I was working with a customer who hired a user experience designer.  One of the goals of the design was to use as many out of the box web parts as possible when creating our SharePoint 2010.  We try to leverage the Content Query Web part quite a bit on  our landing pages and throughout the site to keep the site somewhat dynamic as possible. 

With this approach there comes the challenge of actually making this look the way we want.  IT took a little digging however I found the following blog post by Marc D Anderson https://sympmarc.com/2011/02/15/displaying-links-lists-urls-in-a-content-query-web-part-cqwp-in-sharepoint-2010/ which shows how to add your custom layout and styles to the content query web part via XSLT.  Marc writes:

 

Was trying to use a Content Query Web Part in SharePoint 2010 today and display the URL column from a Links list. Oddly, there’s no out of the box style for this. A little Binging, an #SPHelp tweet, and I came to the conclusion that I needed to add a new style to ItemStyles.xsl in /Style Library/XSL Style Sheets.

This seems counter-intuitive; a Links list would seem to be a common type of list to use with CQWPs. But I guess not. This sort of thing with the CQWP is why I almost always just jump straight to the Data View Web Part (DVWP). I can build my own XSL libraries faster than trying to sort out the CQWP ones, but we’re aiming for as fully out of the box as possible in this project. So I needed to write some XSL. You know, out of the box.

Luckily, I found a post on the MSDN Forumswith a nice XSL template to accomplish exactly what I wanted. Yay, InterWebs. I could have written this, but why, when it’s already been done?

 <xsl:template name="LinkList" match="Row[@Style='LinkList']" mode="itemstyle"> 
 <xsl:variable name="SafeLinkUrl"> 
 <xsl:call-template name="OuterTemplate.GetSafeLink"> 
 <xsl:with-param name="UrlColumnName" select="@URL"></xsl:with-param> 
 </xsl:call-template> 
 </xsl:variable> 
 <xsl:variable name="DisplayTitle"> 
 <xsl:call-template name="OuterTemplate.GetTitle"> 
 <xsl:with-param name="Title" select="@URL"></xsl:with-param> 
 <xsl:with-param name="UrlColumnName" select="'LinkUrl'"></xsl:with-param> 
 </xsl:call-template> 
 </xsl:variable> 
<xsl:variable name="TheLink"> 
 <xsl:value-of select="substring-before($DisplayTitle,',')"></xsl:value-of> 
 </xsl:variable>
<div id="linkitem" class="item link-item bullet">
 <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"></xsl:call-template> 
 <a title="This link opens in a new window" href="https://blogs.msdn.com/controlpanel/blogs/posteditor.aspx/{$TheLink}" target="_blank"> 
 <xsl:value-of select="substring-after($DisplayTitle,',')"></xsl:value-of> 
 </a>
 </div>
 </xsl:template>