SharePoint 2013 – Developer Quirks and Tips – Display Rating Stars in the Content By Search WebPart

Overview

In SharePoint 2010, a common requirement from end users was the ability to display rating stars in Content Query WebParts.  A very popular and useful solution which was blogged about could be found here: (http://geeksthenewblack.wordpress.com/2010/10/29/show-rating-stars-in-the-content-query-web-part/) .  This solution used XSLT to display the stars and render out a set of images depending on the number rated.  So how can we get the same effect in the SharePoint 2013 CSWP, which uses javascript display templates to render its data?

The Problem

While the solution from SharePoint 2010 is a great one, it cannot be as easily translated into 2013 because of the way SharePoint 2013 handles its ratings images.  In SharePoint 2010 it used the ratings.png file which looked like this:

Using this image and some simple css classes, you could easily display the rating how you required.  SharePoint 2013 OOTB rating control displays the ratings in different manner, with different images and different HTML making things more interesting for us developers.

The Solution

To resolve this issue, I created a very simple javascript function that accepts the number of ratings and the average rating count as parameters. It returns the HTML formatted in the correct format used by the out of the box control.  This javascript does not give you the ability to UPDATE the rating, but will enable you to display ratings in a consistent “SharePoint Styled” manner.

Function

Example Usage in Display Template 

When using the code above in a display template, you need to add the required managed properties for RatingCount and AverageRating into your template so the properties can be retrieved.  (Note: you may need to ensure that your managed properties are available in your Search Service)

 Output

If you have managed to add the items in correctly, then you will be presented with something that looks similar to this:

As you can see, they appear just like they would from the OOTB rating control and give your end users a nicer experience in their display templates.

Any problems let me know.