Way Back Machine – Content Query Webpart Hacks – Reference the Webpart Title in a XSL Style Sheet

Content search in SharePoint Online (and SharePoint 2013) is powerful and all, but sometimes the good-old Content Query Webpart (CBQ) is much easier and quicker to configure, and even customize (sometimes), for certain types of content rollups. Or possibly there are other search restrictions that require a specific project to revert to the trusted CBQ. Yes, Content Search and Display Templates have been getting all of the attention, but I have found a few CBQ hacks that I want to share. Let’s not also forget those still stuck in the past (I am looking at you 2007 and 2010 users).

A Quick Review

When configuring a CBQ, you may set the Title and well as specify the webpart Chrome, i.e. Title and Border, Border Only, Title Only or None. If you select Title and Border, or Title Only, the webpart title will be displayed before your webpart results, in a H2 tag, contained within a wrapper div with a class, .ms-webpart-chrome-title.

cbq-webpart-title-0

Consider any of the following requests:

  • What if you do not want any of the webpart title wrapper HTML?
  • What if you want to tweak the webpart title based on the query without using JavaScript?
  • What if you only want to display the webpart title when there are valid responses, without using JavaScript?
  • What if you need to include the webpart title somewhere other than before the results?
  • What if you want to tweak the webpart title based on the item template?
  • I am sure you can come up with other reasons why you may want to control how SharePoint renders the webpart title in CBQ results.

Fortunately there is an easy method to retrieve the webpart title in your ContentQueryMain.xsl. We are going to use an interesting feature of CBQ webparts, that being if a Feed Title, found in the Content Query Tool Part’s Presentation group, is not provided a value, but is included as an expected parameter in the ContentQueryMain.xsl XSL Style Sheet, the CBQ will automatically default the Feed Title to the webpart title.

Meaning, if you are able to leave the Feed Title property blank, you can then reference this in your XSLT and retrieve the webpart title.

Note: For reasons of simplicity I am going to make edits to the OOTB contentquerymain.xsl XSL Style Sheet for this walk-through. This is never best practices, you should always create a custom ContentQueryMain.xsl file and point your CBQ’s to use this custom XSL Style Sheet instead. Let’s be honest though, most of you are not doing this, and it is easier to demo without having to first link to a custom .xsl file.

Retrieve a Content Query Webpart’s Title in Your XSL Style Sheet

After you add a CBQ webpart to your content page, configure your webpart as your normally would. In the example below I am simply querying the pages library, I customized the webpart title to “My Custom Rollup” and finally set the chrome to “None” even though I want to print the webpart title elsewhere in the webpart results. I also leave the Feed Title as empty.

Webpart properties, Title and Chrome

Webpart properties, Title and Chrome

Webpart properties, Title and Chrome

Webpart property, Feed Title, is left blank

Once saved, the results now appear similar to the following. Notice that the webpart title is no longer displayed.

cbq-webpart-title-3

Now, open SharePoint Designer and find the XSL Style Sheet, ContentQueryMain.xsl, found in ~SiteCollection/Style Library/XSL Style Sheets

cbq-webpart-title-4

Check out and edit ContentQueryMain.xsl in SPD and add a new parameter in the top section

1
<xsl:param name="FeedTitle" />

cbq-webpart-title-5

You can retrieve, utilize, manipulate or otherwise display the webpart title using the variable, $FeedTitle.

1
<xsl:value-of select="$FeedTitle"></xsl:value-of>

As an example, below we include the $FeedTitle in a H4 tag, with a custom class, in the XSLT function, “OuterTemplate“, but only when there are results to display.

cbq-webpart-title-6

Once we save, check in and publish our updated ContentQueryMain.xsl file and refresh the page in the browser, we now see the webpart title, but notice in the Elements window that our webpart title is in our newly specified place, wrapped with the correct HTML!

cbq-webpart-title-7

Simple right? It has been a while since I have shared code. Stay tuned for a few more CBQ hacks while I get caught up on my backlog of posts that I need to publish.

Disclaimer: the Content Query Web Part has been around for 8+ years now. I doubt I am the first to find this or other hacks, but I can say I had difficulties finding solutions to my CBQ conundrums so it was my turn to share. Major kudos and thanks go out to those have been documenting CBQ tricks and hints far longer than me.

Speak Your Mind

*