How to to retrieve and display Social Ratings in Content Query web part

Overview

In this post we will continue the discussion of accessing Social Data in Content Query web part that we started in the previous post. But this time we are going to customize Content Query web part in order to retrieve and display Social Ratings.  Our goal here to retrieve and display social ratings using the same way that they are being displayed  in List View.

When Ratings is enabled in List settings, the rating field is rendered in List View as shown below

ListViewWithRatings

and the customized Content Query web part for displaying Ratings control  will look like this

CBQWithSocialRatings

Prerequisites:

Implementation

So, lets start with the implementation of XSL stylesheet for rendering the Ratings control.

Social Ratings fields in SharePoint 2010

SharePoint 2010 comes with the following fields for Social Ratings:

  • AverageRating
  • RatingCount

For rendering AverageRating field in List View the  TEMPLATE\LAYOUTS\XSL\fldtypes_ratings.xsl is used. We will utilize templates from this file, but in order to make it work properly with CQWP, some modifications should be applied.

Ratings XSL stylesheet for CQWP

Templates definitions for the client side initialization and for rendering of of Ratings manager

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
<xsl:param name="PopupAverageRatingLabel" />
<xsl:param name="PopupRatingCountLabel" />
<xsl:param name="PopupUserRatingLabel" />
<xsl:param name="PopupSubmitMessage" />
<xsl:param name="PopupDataNotAvailableMessage" />
<xsl:param name="PopupDataNotRatedMessage" />
<xsl:param name="ClickToRateMessage" />
<xsl:param name="CurrentAverageUnrated" />
<xsl:param name="CurrentAverageRating0_5Stars" />
<xsl:param name="CurrentAverageRating1_5Stars" />
<xsl:param name="CurrentAverageRating1_0Stars" />
<xsl:param name="CurrentAverageRating2_0Stars" />
<xsl:param name="CurrentAverageRating2_5Stars" />
<xsl:param name="CurrentAverageRating3_0Stars" />
<xsl:param name="CurrentAverageRating3_5Stars" />
<xsl:param name="CurrentAverageRating4_0Stars" />
<xsl:param name="CurrentAverageRating4_5Stars" />
<xsl:param name="CurrentAverageRating5_0Stars" />
<xsl:param name="SubmitNewRatingOpenerMessage" />
<xsl:param name="SubmitInstruction" />
<xsl:param name="Rate1StarMessage" />
<xsl:param name="Rate2StarMessage" />
<xsl:param name="Rate3StarMessage" />
<xsl:param name="Rate4StarMessage" />
<xsl:param name="Rate5StarMessage" />
<xsl:param name="IncreaseRatingInstruction" />
<xsl:param name="DecreaseRatingInstruction" />
<xsl:param name="EscapeInstruction" />
<xsl:param name="PopupWaitMessage" />
<xsl:template name="PrintAverageRating" >
<xsl:param name="thisNode" select="."/>
<xsl:variable name="url">
<xsl:call-template name="OuterTemplate.GetSafeLink">
<xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
</xsl:call-template>
</xsl:variable>
<xsl:variable name="title">
<xsl:choose>
<xsl:when test="string($thisNode/@Title)!=''">
<xsl:value-of select="$thisNode/@Title"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$thisNode/@FileLeafRef.Name"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:variable name="ratingValueLocalized">
<xsl:choose>
<xsl:when test="$thisNode/@*[name()=current()/@Name]=''">0</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$thisNode/@*[name()=current()/@Name]"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:variable name="ratingsData" select="ddwrt:GetRatingsData(string($thisNode/@ID))"/>
<xsl:variable name="controlId" select="$thisNode/@ID"/>
<xsl:variable name="ratingValue">
<xsl:value-of select="translate($ratingValueLocalized, ',','.')"/>
</xsl:variable>
<xsl:if test="not($ratingsData/ItemContentTypeContainsField) or $ratingsData/ItemContentTypeContainsField/node()='true'">
<xsl:variable name="ratingClass">
<xsl:choose>
<xsl:when test="number($ratingValue) &lt;= .25">ms-rating_0</xsl:when>
<xsl:when test="number($ratingValue) &lt;= .75">ms-rating_0_5</xsl:when>
<xsl:when test="number($ratingValue) &lt;= 1.25">ms-rating_1</xsl:when>
<xsl:when test="number($ratingValue) &lt;= 1.75">ms-rating_1_5</xsl:when>
<xsl:when test="number($ratingValue) &lt;= 2.25">ms-rating_2</xsl:when>
<xsl:when test="number($ratingValue) &lt;= 2.75">ms-rating_2_5</xsl:when>
<xsl:when test="number($ratingValue) &lt;= 3.25">ms-rating_3</xsl:when>
<xsl:when test="number($ratingValue) &lt;= 3.75">ms-rating_3_5</xsl:when>
<xsl:when test="number($ratingValue) &lt;= 4.25">ms-rating_4</xsl:when>
<xsl:when test="number($ratingValue) &lt;= 4.75">ms-rating_4_5</xsl:when>
<xsl:otherwise>ms-rating_5</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:variable name="altMessage">
<xsl:choose>
<xsl:when test="$ratingClass='ms-rating_0'"><xsl:value-of select="string($CurrentAverageUnrated)"/></xsl:when>
<xsl:when test="$ratingClass='ms-rating_0_5'"><xsl:value-of select="string($CurrentAverageRating0_5Stars)"/></xsl:when>
<xsl:when test="$ratingClass='ms-rating_1'"><xsl:value-of select="string($CurrentAverageRating1_0Stars)"/></xsl:when>
<xsl:when test="$ratingClass='ms-rating_1_5'"><xsl:value-of select="string($CurrentAverageRating1_5Stars)"/></xsl:when>
<xsl:when test="$ratingClass='ms-rating_2'"><xsl:value-of select="string($CurrentAverageRating2_0Stars)"/></xsl:when>
<xsl:when test="$ratingClass='ms-rating_2_5'"><xsl:value-of select="string($CurrentAverageRating2_5Stars)"/></xsl:when>
<xsl:when test="$ratingClass='ms-rating_3'"><xsl:value-of select="string($CurrentAverageRating3_0Stars)"/></xsl:when>
<xsl:when test="$ratingClass='ms-rating_3_5'"><xsl:value-of select="string($CurrentAverageRating3_5Stars)"/></xsl:when>
<xsl:when test="$ratingClass='ms-rating_4'"><xsl:value-of select="string($CurrentAverageRating4_0Stars)"/></xsl:when>
<xsl:when test="$ratingClass='ms-rating_4_5'"><xsl:value-of select="string($CurrentAverageRating4_5Stars)"/></xsl:when>
<xsl:when test="$ratingClass='ms-rating_5'"><xsl:value-of select="string($CurrentAverageRating5_0Stars)"/></xsl:when>
</xsl:choose>
<xsl:if test="$ratingsData/FeatureActivated/node()='true' and $ratingsData/IsUserAnonymous/node()='false'">
<xsl:text> </xsl:text>
<xsl:value-of select="string($SubmitNewRatingOpenerMessage)"/>
</xsl:if>
</xsl:variable>
<span id="RatingsCtrl_{$controlId}">
<a class="ms-currentRating" href="javascript:;">
<img class="{$ratingClass}" src="{$ratingsData/RatingImageStripUrl/node()}" alt="{$altMessage}"/>
</a>
<xsl:if test="$ratingsData/FeatureActivated/node()='true' and $ratingsData/IsUserAnonymous/node()='false'">
<span class="ms-submitRating">
<img tabindex='0' alt='{string($Rate1StarMessage)} {string($SubmitInstruction)} {string($IncreaseRatingInstruction)} {string($EscapeInstruction)}' class='ms-rate1star'/>
<img tabindex='0' alt='{string($Rate2StarMessage)} {string($SubmitInstruction)} {string($IncreaseRatingInstruction)} {string($DecreaseRatingInstruction)} {string($EscapeInstruction)}' class='ms-rate2stars'/>
<img tabindex='0' alt='{string($Rate3StarMessage)} {string($SubmitInstruction)} {string($IncreaseRatingInstruction)} {string($DecreaseRatingInstruction)} {string($EscapeInstruction)}' class='ms-rate3stars'/>
<img tabindex='0' alt='{string($Rate4StarMessage)} {string($SubmitInstruction)} {string($IncreaseRatingInstruction)} {string($DecreaseRatingInstruction)} {string($EscapeInstruction)}' class='ms-rate4stars'/>
<img tabindex='0' alt='{string($Rate5StarMessage)} {string($SubmitInstruction)} {string($DecreaseRatingInstruction)} {string($EscapeInstruction)}' class='ms-rate5stars'/>
</span>
</xsl:if>
</span>
<xsl:if test="$ratingsData/FeatureActivated/node()='true' and $ratingsData/IsUserAnonymous/node()='false'">
<script type="text/javascript">
function RatingsControlLoader_<xsl:value-of select="$controlId"/>()
{
ratingsManager.CreateControl('<xsl:value-of select="ddwrt:EcmaScriptEncode($url)"/>', '<xsl:value-of select="ddwrt:EcmaScriptEncode($title)"/>', 'RatingsCtrl_<xsl:value-of select="$controlId"/>');
}
ExecuteOrDelayUntilEventNotified(RatingsControlLoader_<xsl:value-of select="$controlId"/>, 'RatingsManagerLoaded');
</script>
</xsl:if>
</xsl:if>
</xsl:template>
<xsl:template name="emit_RatingsInitialization">
<xsl:variable name="ratingsData" select="ddwrt:GetRatingsData(string(-1))"/>
<xsl:if test="$ratingsData/FeatureActivated/node()='true' and $ratingsData/IsUserAnonymous/node()='false'">
<script src="/_layouts/Ratings.js?rev={$ratingsData/CurrentBuildVersion/node()}" type="text/javascript" defer="defer"></script>
<script type="text/javascript">
var ratingsManager = null;
function RatingsManagerLoader()
{
var ratingsData = new RatingsCommonData(
'<![CDATA[<img src="/_layouts/images/loading16.gif"/> ]]><xsl:value-of select="string($PopupWaitMessage)"/>',
'<xsl:value-of select="string($PopupAverageRatingLabel)"/>',
'<xsl:value-of select="string($PopupRatingCountLabel)"/>',
'<xsl:value-of select="string($PopupUserRatingLabel)"/>',
'<xsl:value-of select="string($PopupSubmitMessage)"/>',
'<xsl:value-of select="string($PopupDataNotAvailableMessage)"/>',
'<xsl:value-of select="string($PopupDataNotRatedMessage)"/>',
'<xsl:value-of select="string($ClickToRateMessage)"/>',
'<xsl:value-of select="$ratingsData/SessionID/node()"/>',
'<xsl:value-of select="$ratingsData/WebID/node()"/>',
'<xsl:value-of select="ddwrt:EcmaScriptEncode($SiteUrl)"/>',
'<xsl:value-of select="$ratingsData/SiteID/node()"/>',
'<xsl:value-of select="$ratingsData/NewRatingIconUrl_EcmaScriptEncoded/node()"/>',
'<xsl:value-of select="$ratingsData/EmptyRatingIconUrl_EcmaScriptEncoded/node()"/>'
);
ratingsManager = new RatingsManager(ratingsData);
NotifyEventAndExecuteWaitingJobs('RatingsManagerLoaded');
}
ExecuteOrDelayUntilScriptLoaded(RatingsManagerLoader, 'ratings.js');
</script>
</xsl:if>
</xsl:template>
</xsl:stylesheet>

view raw
RatingsStyle.xsl
hosted with ❤ by GitHub

Main XSL stylesheet

Custom ContentQueryMain.xsl is used, in which  the template for client side initialization of Ratings control is invoked

Source

Item XSL stylesheet

Custom ItemStyle.xsl is used, in which  the template for rendering Ratings control per page is invoked

Source

Ratings XSL Parameters

Parameter values are retrieved from resource file  and are passed via ParamaterBindings web part property

<ParameterBindings>
<ParameterBinding Name="PopupAverageRatingLabel" Location="Resource(sps,Ratings_PopupAverageRatingLabel)" />
<ParameterBinding Name="PopupRatingCountLabel" Location="Resource(sps,Ratings_PopupRatingCountLabel)"/>
<ParameterBinding Name="PopupUserRatingLabel" Location="Resource(sps,Ratings_PopupUserRatingLabel)"/>
<ParameterBinding Name="PopupSubmitMessage" Location="Resource(sps,Ratings_PopupSubmitMessage)"/>
<ParameterBinding Name="PopupDataNotAvailableMessage" Location="Resource(sps,Ratings_PopupDataNotAvailableMessage)"/>
<ParameterBinding Name="PopupDataNotRatedMessage" Location="Resource(sps,Ratings_PopupDataNotRatedMessage)"/>
<ParameterBinding Name="ClickToRateMessage" Location="Resource(sps,Ratings_ClickToRateMessage)"/>
<ParameterBinding Name="CurrentAverageUnrated" Location="Resource(sps,Ratings_CurrentAverageUnrated)"/>
<ParameterBinding Name="CurrentAverageRating0_5Stars" Location="Resource(sps,Ratings_CurrentAverageRating0_5Stars)"/>
<ParameterBinding Name="CurrentAverageRating1_5Stars" Location="Resource(sps,Ratings_CurrentAverageRating1_5Stars)"/>
</ParameterBindings>

Let’s summarize.

In order to configure CQWP  for displaying Social Ratings , the following steps should be accomplished:

References