Skip to content

Show rating stars in the content query web part

October 29, 2010
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!
Advertisements
25 Comments leave one →
  1. December 13, 2010 11:10 pm

    This code is incomplete as the ratings png comprises 6 sets of stars in the image. This code is not truncating the image, and so just displays the png of 36 stars!

  2. Kristy permalink
    January 7, 2011 9:22 am

    You can make it work by adding class=”ms-currentRating” in the anchor tag, and class=”ms-rating_0″ (ms-rating_0_5, ms-rating_1, ms-rating_1_5 …) in each image.

  3. January 7, 2011 9:26 am

    Whoops! Left that bit out accidentally! I will update the code shortly. Thanks for the heads up 🙂

  4. josep permalink
    March 5, 2011 1:33 am

    I tried to implement this but even adding the css classes to the anchors and images it keeps no working.

    I changed the @Ratings for @Rating / @AverageRating (is the fieldref name of the column in my list) but with no luck

    Any help?
    thanks

  5. umang permalink
    March 17, 2011 3:14 am

    hi Kylie,
    Thank you very much for this article. this is the exact requirement I get.
    would you please give solution for images?
    newbie for xsl.

  6. March 28, 2011 12:55 pm

    I’ve updated the code – I originally pasted an old version in, sorry everyone! Also, once you’ve done this, you’ll have a new field called Ratings under ‘fields to display’ under the presentation section of your CQWP settings. Set this to “Rating (0-5)” to pull through the ratings field.

    • Mohammed Sufiyan permalink
      June 2, 2011 10:37 pm

      Hey Kylie i am not able to attach Image with docs….

      • July 6, 2011 9:00 pm

        Don’t quite understand your problem sorry…

  7. July 4, 2011 9:46 pm

    Thanks for this post, you are missing step of adding CommonViewFields. See http://horsik.wordpress.com/2011/07/04/sharepoint-2010-add-rating-stars-to-content-by-query-webpart-xsl-style-cqwp/

    • July 6, 2011 8:59 pm

      Hmm well it worked for me without having to add CommonViewFields – this was certainly a requirement in MOSS 2007 however whenever I’ve done similar things with the CQWP in 2010 I haven’t had to do this.

  8. Saroj Jha permalink
    July 7, 2011 1:36 am

    Nice article Kylie . Four and half star from me. 🙂
    Any pointer for making the star rating rollover option and submit from the CQWP.

    Thanks
    Saroj

  9. July 14, 2011 5:31 pm

    The only missing thing still not mentioned is that you need to select your Style while editing the webpart in our case:

    Edit web part -> Under Presentation -> Under Styles -> Under ItemStyle -> Select TitleAndRatings………..this will bring up Ratings field in “Fields to Display” area……put AverageRating in there and save……..you should be good……..AverageRating is auto changed to Rating (0-5), you can check that editing the web part again……

    No need for CommonViewFields in 2010…

  10. jriesen permalink
    August 5, 2011 3:57 am

    Now this is a beautiful thing! I had to read through the posted comments to figure out how to get the stars displaying, but after that it is looking super! Thanks for this great post!!

  11. Viktor permalink
    October 5, 2011 12:27 am

    Kylie and Horsik, very helpful tips, many thanks!

    After all I turned the XSLT code inside out and made it, imho, more compact. For each rating range, the code is the same, except the class attribute of the image. And this attribute can be identified in :

    ms-rating_5
    ms-rating_4_5
    ms-rating_4
    ms-rating_3_5
    ms-rating_3
    ms-rating_2_5
    ms-rating_2
    ms-rating_1_5
    ms-rating_1
    ms-rating_0_5
    ms-rating_0

    There is no limit to perfection. I am still thinking whether users can enter their ratings straight on the CQWP 🙂

    Vic

  12. Carl permalink
    November 22, 2011 12:53 am

    Hi kylie,
    Thanks for the post, this is exactly what I needed. I’ve used snippets from this to create a style for our Intranet news items, which includes Title, Page Lead (Byline) and Ratings.

    Is there any way the star graphics can still be shown even if an item/doc has not yet been rated (i.e. the empty stars graphic)? I’ve seen ms-rating_0 mentioned in the comments above but it’s not part of the original code. I’m guessing there needs to be a “less than” and “greater than” check added to the code? Any help would be great.

    • December 21, 2011 10:34 pm

      Sorry for the very late reply! I had filtered my CQWP in the web part properties so that only items with a rating greater than 0 were shown. You can include those without a rating by removing this filter. Then you will need to add another xsl:if statement into your XSL – e.g. xsl:if test=”@Ratings = 0″ then show the ms-rating_0 class image

  13. March 3, 2012 7:21 am

    Kylie,
    Have you ever been able to get the CQWP to work submiting a rating on an article. We want to give our users the ability to rate the article (which is styled using a CQWP). I can get the average rating to show up but not able to rate it unless I go to the published page.
    Thanks for a great article.

  14. Hannah permalink
    April 26, 2012 1:21 am

    This worked really well, except for items which had no ratings yet. I suppose I could have filtered those out of the CQWP but decided I wanted to show them anyway. To do this, I added one more if:

    Not yet rated

  15. gabriel permalink
    May 7, 2012 9:57 pm

    Kylie, I am one of your fans !!!

    Thanks so much for sharing your work and knowledge.

    I would like to offer my contribution.

    The link pushes the user to the Item view, below i am explaining how to make the link redirecting the users to your discussion default view (Thread.aspx in my case).

    Replace :(Kylie’s code > line67)

    With :

    This works like a charm to me so let’s share o_0

    • gabriel permalink
      May 7, 2012 10:02 pm

      OMG the code is removed… let me try with quotes
      Replace Kylie’s code from 67 to 79 with :

      if it does not work then sorry , i need some instructions from blog owner

  16. Basil Nwogu permalink
    June 19, 2012 6:12 am

    Hi Kylie,

    Have you been able to successfully implement the rating control in a List View Web Part?

    After implementing this on my development machine, the stars show up but nothing happens on mouse over. Any tips wouls be appreciated.

    thanks,
    Basil

Trackbacks

  1. SharePoint 2010 Add rating stars to Content By Query WebPart xsl style (CQWP) | horsik
  2. SharePoint 2010 – CQWP Rating control not working | Q&A System

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: