Skip to Main Content

UPDATE Avtex is now TTEC Digital. Visit our new website →

Content Query Web Part 2010 with Custom Style and Slots

Last week I co-presented at the May 2012 MNSPUG (#MNSPUG or @MNSPUG). The topic was about MOSS 2007 and SharePoint 2010 Web Parts. One of my areas of focus was the Content Query Web Part. Because we had so much to cover, I didn't get to dive as deep into this topic as I had hoped, so I decided to write series of blog posts on the CQWP in SharePoint 2010.

For this first post, I'm going to show you some of the power of the CQWP by creating a custom Style and adding "slots" based on properties. This isn’t a tutorial on XSL, HTML, or CSS.

Add and Configure the CQWP

  • First, add the CQWP to your page.
  • Then, from the Web part menu, choose Edit Web Part.
  • Configure CQWP to query site collection, site, or a specific list.
  • Important Note: I often change the Content Type from the default <All content types> to a either a specific OOB content type or a custom content type.
Screenshot: CQWP Tool Pane
  • Under Presentation set Filter, Sort, Limit options
Screenshot: CQWP Properties
  • Under Appearance section, give the CQWP a name and click OK to save your changes.
Screenshot: CQWP appearance

Create a custom ItemStyle template with Slots

Now we need to customize the ItemStyle.xsl to include additional properties aka "slots".

  1. Open your root site in SharePoint Designer 2010. In the Navigation pane, go to All Files > XSL Style Sheets > ItemStyle.xsl. Right-click on ItemStyle.xsl and choose Edit File in Advanced Mode. Click yes at the prompt.
  2. Make a backup of ItemStyle.xsl BEFORE you modify.
  3. Since I’ll likely want to modify the Calendar date field format, I've added the ddwrt namespace to the top of the stylesheet.

Here is the code: xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime

Here is a screen shot:

Screenshot: DDWRT code

Now I need to create a template in ItemStyle.xsl which corresponds to the Item Style dropdown in the Web Part editor.

  1. To do so, copy the template style that most closely matches the style you're looking for e.g. “TitleOnly”.
  2. Screenshot: Title Only Code
  3. Paste this just above the "Hidden Slots" template (not required in this spot, but this is where I generally insert my custom templates in order to stay consistent)
  4. Rename "TitleOnly" in both the template name and match="Row…" to a custom template name. In my case, I chose "Calendar". Once again, this template name corresponds to the Item Style dropdown in the Web Part editor.

Ok - so this is where you need to have a good understanding of HTML, XSL, and sometimes CSS. The purpose of this blog isn't to teach you these topics but to show you the process for working with the CQWP and how I’ve inserted "slots" to display additional properties. I added code similar to that in Step 9 of Heather's article - http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx - to find a list of properties that I can use for my slots. Remember to remove this code when you’re done.

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

After inserting the code above in my ItemStyle.xsl, I will need to apply it in the CQWP to view the properties. Skip down to steps #1-3 in section Apply the custom ItemStyle template with Slots below to change the style from the default to the Test style.

Here is how it looks on my page:

Example: Calendar Test Properties

Based on this, I'm going to use @Location and @StartDate properties to generate new slots.

Back in the "Calendar" template, I have replaced the second section (the part that begins with a "div id") with my own HTML as shown below. In order to get my HTML to work, I modeled my code after that found at the end of Heather Solomon's post - http://www.heathersolomon.com/blog/articles/CustomItemStyle.aspx.

  • Important Note: be careful when removing XSL from the ItemStyle as you may inadvertently remove code that is required to render the web part.
  • Important Note: the "class=description" within my TD tags is really not necessary. However, if we did want to include custom CSS as Heather did in her post, we could do so here.
  • Important Note: by adding the ddwrt reference to the top of the ItemStyle, I can now add <xsl:value-of select="ddwrt:FormatDate(string(@StartDate), 1033, 13)" /> to properly format the Start Date the way I want to.

Here is my custom Calendar template:

Screenshot: Calendar Template Code

In order for this style to show up in the options available to the CQWP, save and check in the ItemStyle. (I usually check in minor versions until I have completely finished creating the style template).

Apply the custom ItemStyle template with Slots

  1. Go back to the page where you added the CQWP and make sure you're in Edit Page mode.
  2. From the Web part menu, choose Edit Web Part.
  3. Under Presentation > Styles, click the drop-down and select the new style you have created. Click Apply.
  4. You should now see empty slots for Location and StartDate.
  5. In the screen shots below, I verify the columns names: Location and Start Time from View Calendar Item (but you could find these other ways) and then add the SharePoint column names to the CQWP.
Screenshot: Calendar View Item
  • Notice how the Title slot, in the screenshot below, needs Title [Custom Columns]; I still haven't quite figure out why that is, but I've run into the same situation with a few other fields so I just let SharePoint be SharePoint and continue on my merry way.
Screenshot: Calendar Style
  • Once you completed these steps, click Apply and/or OK to save your web part modifications.

If you get a message “Unable to display this Web Part….” along with Correlation ID when you save the web part, something is wrong with the XSL that you’ve created. You will need to tweak it or remove it altogether and start over.

Screenshot: Unable to Display Web Part

Closing Comments

I hope this helps you gain a better understanding of how to incorporate "slots' into your CQWP. In a future post, I'll be showing an FAQ site based on pages created using a custom page layout with built-in CQWP. Stay tuned!

To learn more about how to work with the CQWP in MOSS 2007, here are several good resources: