Arguably the most useful tool in SharePoint 2010 is the Content Query WebPart (CQWP). This little webpart allows you rollup content from anywhere in the site collection and display it however you like. Yes, it has limitations, but this post is about the things you can do with it. But of course the CQWP is incomplete without a working knowledge of xsl styles. In SharePoint, all styles for the CQWP are stored in itemstyle.xsl. I’m not going to go into creating your own stylesheets, linking to CQWPs, etc. You can figure that out. We will dive into what is possible with styling CQWP results.

We’ll be creating something like this:

Skip ahead:

• Create your list
• Declare a new style and insert fields
• Format a hyperlink
• Link Author to their mysite
• Format body to use markup
• Final Code + CSS

Create your list

Before we begin, create a list with the following columns:
Title (standard text field)
Body (rich text area)
SiteLink (hyperlink column)

Declare a new style and insert fields

Every new style in itemstyle.xsl must be wrapped in the following tags:

<xsl:template name="testannouncement" match="Row[@Style='testannouncement']" mode="itemstyle"></xsl:template>

Inside this tag, we’ll begin by simply adding in our fields. I like to bring in all my fields, confirm they work on the page, and then begin styling.

<xsl:value-of select="@Title"/>
<xsl:value-of select="@Body"/>
<xsl:value-of select="@Author"/>
<xsl:value-of select="@SiteLink"/>

When you call a variable, it is either already built into the system (Title, Author), or you will need to customize it in the browser to add in your specific fields into those value placeholders.

Format the Hyperlink

The first thing we’ll do is format the hyperlink field to make it a friendly URL. The field, by default, puts the URL and then the friendly name concatenated together, but separated by a column. So what we do is create two variables in xsl, one that pulls everything before the comma, one that pulls everything after the comma. Then we will put the URL into an “a” tag.

<xsl:variable name="SiteLink" select="substring-before(@SiteLink,',')"/>
<xsl:variable name="SiteName" select="substring-after(@SiteLink,',')"/>
Link: <a href="{$SiteLink}"><xsl:value-of select="$SiteName"/></a>

Link Author to their mysite

Next, I want to take the Author’s name and link it to their MySite profile. To do that we are going to create a new variable that takes the login ID of the user (using ddwrt:UserLookup on the @Author tag). Once we have that ID we’re going to pass it into a parameter of the mysite URL.

<xsl:variable name="authoremail">
<xsl:value-of select="ddwrt:UserLookup(string(@Author) ,'Login')" />
</xsl:variable>
Questions about this? Contact <a href="https://m.domainname.com/Person.aspx?accountname={$authoremail}"><xsl:value-of select="@Author" /></a>

Format the Body to use markup

Your body content probably includes all the markup at the moment. The quick fix to that is adding in a disable-output-escaping=”yes” attribute.

<xsl:value-of select="@Body" disable-output-escaping="yes"/>

Final Code

Finally, just add some divs with classes to style. Here is my final code.

<xsl:template name="testannouncement" match="Row[@Style='testannouncement']" mode="itemstyle">
<xsl:variable name="SiteLink" select="substring-before(@SiteLink,',')"/>
<xsl:variable name="SiteName" select="substring-after(@SiteLink,',')"/>
<xsl:variable name="authoremail">
<xsl:value-of select="ddwrt:UserLookup(string(@Author) ,'Login')" />
</xsl:variable>
<div id="DailyAnnouncement">
<div class="title"><h4><xsl:value-of select="@Title"/></h4></div>
<div class="details">
<xsl:value-of select="@Body" disable-output-escaping="yes"/>
<xsl:if test="@SiteLink != ''">
<br/>Link: <a href="{$SiteLink}"><xsl:value-of select="$SiteName"/></a>

</xsl:if>
</div>
 <div class="contactemail">Questions about this? Contact
	<a href="https://m.domainname.com/Person.aspx?accountname={$authoremail}">
	<xsl:value-of select="@Author" />
	</a>
 </div>
</div>
</xsl:template>

Here’s my CSS for the itemstyle.xsl styles

#DailyAnnouncement {
	display:block;
	border:1px solid #fff;
	padding-right:5px;
}
#DailyAnnouncement div.title h4 {
	margin:0px;
	padding:0px;
	line-height:normal;
	background:#efefef;
	border:1px solid #ccc;
	padding:4px;
	background:#efefef url('/PublishingImages/Logos/announcement.gif') no-repeat 0px 0px;
	padding-left:35px;
	display:block;
}

#DailyAnnouncement div.details {
	border:1px solid #ccc;
	border-top:0px;
	padding:10px;
	display:block;
}

#DailyAnnouncement div.contactemail {
	background:#efefef;
	padding:4px;
	text-align:right;
	border:1px solid #ccc;
	border-top:0px;
}