SharePoint 2010 comes with a built-in rating system which allows users to record how much they like or value a particular item or page. Sometimes, it would be useful just to be able to set a Star Rating on an item in a list and simply make use of the SharePoint stars, without using all the rating infrastructure behind the scenes.

SharePoint rating uses one graphic called Rating.png on the server:

As you can see, this graphic contains all the possible star combinations and is displayed with an offset to show only the required rating. If you create a list with a choice column called Rating and provide the choices of One, Two, Three, Four and Five, then with a small XSL style sheet attached to the list, you can display the rating in graphical form.

Save the following styling as an .xsl file and upload to a document library on SharePoint.

 

<xsl:stylesheet xmlns:x=”http://www.w3.org/2001/XMLSchema&#8221; xmlns:d=”http://schemas.microsoft.com/sharepoint/dsp&#8221; version=”1.0″ exclude-result-prefixes=”xsl msxsl ddwrt” xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime&#8221; xmlns:asp=”http://schemas.microsoft.com/ASPNET/20&#8243; xmlns:__designer=”http://schemas.microsoft.com/WebParts/v2/DataView/designer&#8221; xmlns:xsl=”http://www.w3.org/1999/XSL/Transform&#8221; xmlns:msxsl=”urn:schemas-microsoft-com:xslt” xmlns:SharePoint=”Microsoft.SharePoint.WebControls” xmlns:ddwrt2=”urn:frontpage:internal” xmlns:o=”urn:schemas-microsoft-com:office:office”>

 

    <xsl:include href=”/_layouts/xsl/main.xsl”/>

        <xsl:include href=”/_layouts/xsl/internal.xsl”/>

 

 

    <xsl:template name=”FieldRef_body.Rating” match=”FieldRef[@Name=’Rating’]” mode=”body”>

            <xsl:param name=”thisNode” select=”.”/>

 

            <xsl:choose>

                <xsl:when test=”$thisNode/@*[name()=current()/@Name] = ‘Five'”>

            <xsl:attribute name=”style”>background-image:url(/_layouts/images/Ratings.png);cursor:default;height:16px;margin:0px;background-repeat:no-repeat;background-position:-0px 0px;width:70px;</xsl:attribute>

                        </xsl:when>                        

                    <xsl:when test=”$thisNode/@*[name()=current()/@Name] = ‘Four'”>

            <xsl:attribute name=”style”>background-image:url(/_layouts/images/Ratings.png);cursor:default;height:16px;margin:0px;background-repeat:no-repeat;background-position:-16px 0px;width:70px;</xsl:attribute>

                    </xsl:when>

                <xsl:when test=”$thisNode/@*[name()=current()/@Name] = ‘Three'”>

            <xsl:attribute name=”style”>background-image:url(/_layouts/images/Ratings.png);cursor:default;height:16px;margin:0px;background-repeat:no-repeat;background-position:-32px 0px;width:70px;</xsl:attribute>

                        </xsl:when>                        

                    <xsl:when test=”$thisNode/@*[name()=current()/@Name] = ‘Two'”>

            <xsl:attribute name=”style”>background-image:url(/_layouts/images/Ratings.png);cursor:default;height:16px;margin:0px;background-repeat:no-repeat;background-position:-48px 0px;width:70px;</xsl:attribute>

                    </xsl:when>

                    <xsl:when test=”$thisNode/@*[name()=current()/@Name] = ‘One'”>

            <xsl:attribute name=”style”>background-image:url(/_layouts/images/Ratings.png);cursor:default;height:16px;margin:0px;background-repeat:no-repeat;background-position:-64px 0px;width:70px;</xsl:attribute>

                    </xsl:when>                    

                    

 

            </xsl:choose>

 

    </xsl:template>

        

        <xsl:template name=”FieldRef_Text_body.RateText” match=”FieldRef[@Name=’RateText’]” mode=”body”>

            <xsl:param name=”thisNode” select=”.”/>

                <xsl:attribute name=”style”>background-image:url(/_layouts/images/Ratings.png);cursor:default;height:16px;margin:0px;background-repeat:no-repeat;background-position:-64px 0px;width:70px;</xsl:attribute>

            </xsl:template>

            

    </xsl:stylesheet>

 

Add the reference to the XSL style sheet above via the view web part’s miscellaneous setting and the result will look something like the example below:

Advertisements