Show rating stars in the content query web part

I’m not one to blow my own horn, but I have been ROCKING the content query web part as of late. I always stayed away from it in favour of the data view web part, believing it wasn’t as flexible, but as it turns out, I was mistaken.

Yesterday, I wanted a “top rated documents” web part for the home page of a document centre, that lists the top rated documents from all document libraries in the site. This is easy enough, using the content query web part (CQWP) with the following settings:

• source = “show items in this site and all subsites”
• list type = “document library”
• additional filters: show items where Rating (0-5) is greater than 0
• under presentation choose an item limit (10 in my case) and sort items by Rating (0-5) in descending order

So that’s nice and all but I would like to display the lovely wee stars beside my document titles so users can see the rating on each document.

If you change the item style (under presentation in the CQWP settings) to something like title and description, and then set the description field to the rating column you can see the raw data that is stored in there – just a number between 0 and 5 with a whole truckload of zeroes at the end.

So how is this rendered throughout other parts of SharePoint 2010 sites when you see the actual star image instead of the average rating data? It is done using CSS classes on both the image of the stars, and the link itself, and it’s all wrapped in a span tag. There’s also a heap of fancy javascript in there to give you the rollover effect and the ability to submit your own rating (but we’re not going to try and get that fancy today). The average ratings are calculated for this colum and can be any number from 0 to 5, including long decimal numbers, but the stars are only rendered in either whole number or whole number and a half ratings (e.g. an average rating of 3.335 shows 3.5 stars).

To use this ratings column in the CQWP and include the necessary tags wrapped around it, I added a custom item style to itemstyle.xsl (for an introduction on modifying itemstyle.xsl see Heather Soloman’s post) as per below:

    <xsl:template name="TitleAndRatings" match="Row[@Style='TitleAndRatings']" mode="itemstyle">
        <xsl:variable name="SafeLinkUrl">
            <xsl:call-template name="OuterTemplate.GetSafeLink">
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="DisplayTitle">
            <xsl:call-template name="OuterTemplate.GetTitle">
                <xsl:with-param name="Title" select="@Title"/>
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
      <div class="item link-item">
        <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
        <div style="float:right">
        <xsl:if test="@Ratings &gt;= 4.75">
		<span>
			<a class="ms-currentRating"><img class="ms-rating_5" src="/_layouts/Images/Ratings.png" alt="Current average rating is 5 stars." /></a>
		</span>        		
        </xsl:if>
        <xsl:if test="@Ratings &gt;= 4.25 and @Ratings &lt; 4.75">
		<span>
			<a class="ms-currentRating"><img class="ms-rating_4_5" src="/_layouts/Images/Ratings.png" alt="Current average rating is 4.5 stars." /></a>
		</span>        		
        </xsl:if>
        <xsl:if test="@Ratings &gt;= 3.75 and @Ratings &lt; 4.25">
		<span>
			<a class="ms-currentRating"><img class="ms-rating_4" src="/_layouts/Images/Ratings.png" alt="Current average rating is 4 stars." /></a>
		</span>        		
        </xsl:if>
        <xsl:if test="@Ratings &gt;= 3.25 and @Ratings &lt; 3.75">
		<span>
			<a class="ms-currentRating"><img class="ms-rating_3_5" src="/_layouts/Images/Ratings.png" alt="Current average rating is 3.5 stars." /></a>
		</span>        		
        </xsl:if>
        <xsl:if test="@Ratings &gt;= 2.75 and @Ratings &lt; 3.25">
		<span>
			<a class="ms-currentRating"><img class="ms-rating_3" src="/_layouts/Images/Ratings.png" alt="Current average rating is 3 stars." /></a>
		</span>        		
        </xsl:if>
        <xsl:if test="@Ratings &gt;= 2.25 and @Ratings &lt; 2.75">
		<span>
			<a class="ms-currentRating"><img class="ms-rating_2_5" src="/_layouts/Images/Ratings.png" alt="Current average rating is 2.5 stars." /></a>
		</span>        		
        </xsl:if>
        <xsl:if test="@Ratings &gt;= 1.75 and @Ratings &lt; 2.25">
		<span>
			<a class="ms-currentRating"><img class="ms-rating_2" src="/_layouts/Images/Ratings.png" alt="Current average rating is 2 stars." /></a>
		</span>        		
        </xsl:if>
        <xsl:if test="@Ratings &gt;= 1.25 and @Ratings &lt; 1.75">
		<span>
			<a class="ms-currentRating"><img class="ms-rating_1_5" src="/_layouts/Images/Ratings.png" alt="Current average rating is 1.5 stars." /></a>
		</span>        		
        </xsl:if>
        <xsl:if test="@Ratings &lt; 1.25">
		<span>
			<a class="ms-currentRating"><img class="ms-rating_1" src="/_layouts/Images/Ratings.png" alt="Current average rating is 1 star." /></a>
		</span>        		
        </xsl:if>
        </div>
        <xsl:if test="string-length(@DocumentIconImageUrl) != 0">
           <div class="image-area-left">
               <img class="image" src="{@DocumentIconImageUrl}" title="" />
           </div>
       </xsl:if>
        <a href="{$SafeLinkUrl}" title="{@LinkToolTip}">
          <xsl:if test="$ItemsHaveStreams = 'True'">
            <xsl:attribute name="onclick">
              <xsl:value-of select="@OnClickForWebRendering"/>
            </xsl:attribute>
          </xsl:if>
          <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
            <xsl:attribute name="onclick">
              <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
            </xsl:attribute>
          </xsl:if>
          <xsl:value-of select="$DisplayTitle"/> 
        </a>
      </div>
    </xsl:template>

This first does a test to check which range the average rating falls into, and then outputs the necessary code to show the correct amount of stars. I’ve also include document title and icon. What you end up with is something like this:

Very nice!

Advertisement