May 2012

Monthly Archive

May 4, 2012

Want to give Star Ratings to SharePoint List Items?

Posted by mondizen under SharePoint 2010
Leave a Comment 

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:

Advertisement
 

May 4, 2012

Replace Values in a SharePoint list with Graphics

Posted by mondizen under SharePoint 2010
Leave a Comment 

In SharePoint 2007, if you wanted to show graphic icons in a list on the basis of values, you would have had to insert some JavaScript into a Content Editor Web Part.

In SharePoint 2010, a similar result can be achieved via the use of an XSL formatting file attached to the list. Imagine a list where you have a Results field with the values On Target, Underperforming and Failed. It might be useful to replace those descriptions, managed perhaps through a choice field with traffic light icons. Many graphics exist as standard on each SharePoint server, and these can be reused in custom styled views.

The following example should be saved as an .XSL in a document library on your site, with the name of Results.xsl, for example.

 

 

<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.Results” match=”FieldRef[@Name=’Results’]” mode=”body”>

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

            <xsl:choose>

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

                    <img src=”/_layouts/images/IMNON.png” alt=”Results: {$thisNode/@Status}”/>

                </xsl:when>

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

                    <img src=”/_layouts/images/IMNIDLE.png” alt=”Results: {$thisNode/@Results}”/>

                </xsl:when>

                <xsl:otherwise>

                    <img src=”/_layouts/images/IMNBUSY.png” alt=”Results: {$thisNode/@Results}”/>

                </xsl:otherwise>

            </xsl:choose>

    </xsl:template>

</xsl:stylesheet>

 

Create your list with a choice column called Results and allow On Target, Underperforming and Failed as possible options. Then reference the Results.xsl file you saved previously, by putting the URL to the file in XSL Link box.

The result with the XSL formatting looks like this:

 

 

May 3, 2012

Styling SharePoint Views

Posted by mondizen under SharePoint 2010
Leave a Comment 

SharePoint views are powerful tools for displaying information from lists. Views can be easily re-organized via browser-based configuration tools allowing filtering, sorting and grouping, etc.

There are also some basic built-in styles, as follows:

 

But if you want to go further, most users will quickly get lost in the wild woods of XSL formatting, which is decidedly not for everyone. A halfway house is available using some basic CSS styling of standard Microsoft SharePoint styles, as can be seen below on a modified SharePoint Newsletter view.

The page has been built by styling the ms-rtestate-field with a background colour, padding an border.

 

 

.ms-rtestate-field{

    background-color: #DFF3EA;

    padding: 10px;

    border-style:dotted;

    border-width:1px;

    }

table.ms-listviewtable tbody tr.ms-newsletteralt td{

    background-color: #EBF3C7;

    border: 0px;

    }

 

table.ms-listviewtable tbody tr.ms-alternating td{

    background-color: #ffffff;

    }

    

 

As SharePoint will also automatically alternate the rows in this view, this styling has been cleaned up to give following result.

 

The photo is simply embedded in a standard rich text field floated left and the stars use the graphic available on the SharePoint server but as a static image and not related to SharePoint’s rating system.