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
and the customized Content Query web part for displaying Ratings control will look like this
Prerequisites:
- before we proceed make sure that Social features are configured – a User Profile Service Application is running in the farm. For more information, see Create, edit, or delete a User Profile service application (SharePoint Server 2010)
- Pages Library is used as a data source
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) <= .25">ms-rating_0</xsl:when> | |
| <xsl:when test="number($ratingValue) <= .75">ms-rating_0_5</xsl:when> | |
| <xsl:when test="number($ratingValue) <= 1.25">ms-rating_1</xsl:when> | |
| <xsl:when test="number($ratingValue) <= 1.75">ms-rating_1_5</xsl:when> | |
| <xsl:when test="number($ratingValue) <= 2.25">ms-rating_2</xsl:when> | |
| <xsl:when test="number($ratingValue) <= 2.75">ms-rating_2_5</xsl:when> | |
| <xsl:when test="number($ratingValue) <= 3.25">ms-rating_3</xsl:when> | |
| <xsl:when test="number($ratingValue) <= 3.75">ms-rating_3_5</xsl:when> | |
| <xsl:when test="number($ratingValue) <= 4.25">ms-rating_4</xsl:when> | |
| <xsl:when test="number($ratingValue) <= 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> | |
Main XSL stylesheet
Custom ContentQueryMain.xsl is used, in which the template for client side initialization of Ratings control is invoked
Item XSL stylesheet
Custom ItemStyle.xsl is used, in which the template for rendering Ratings control per page is invoked
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:
- upload XSL stylesheets RatingsStyle.xsl, ItemStyle_Ratings.xsl and ContentQueryMain_Ratings.xsl into Style Library
- specify MainXslLink, ItemXslLink and ParamaterBindings web part properties
I am not able to achieve this. Could you please help me.
Instead of the rating being shown, the CQWP displays all of the possible star combinations at once. Please advise.