JQuery Rating in SharePoint Lists

Hi,

Last week I was asked to create a sample to include in a SharePoint list rating functionality without any server code. That means only SharePoint Designer and client script.

First was how to store those ratings. Based on experience the obvious solution was to store scores in a separate list, and aggregate afterwards totals. This avoids locks at list level and improve scalability (at the end the aggregation was done from the self user).

So to accomplish this demo, you will need:

1. Create a list that will have the totals and the items being scored (own columns and score column).
2. Create a list to store user ratings (item_id, score, user_id)
3. Create a view in the first list to show the rating control and allow the actions
4. Modified that view with SharePoint Designer to customized it:
   1. Change list to XSLT view (through right click WebPartPages:listViewWebPart in order to get a WebPartPages:DataFormWebPart)
   2. Add a new layout column with the values to read (Item Id and aggregated score) and a style to apply (class=”rating”)
   3. Add JQuery library, web service library and rating library (to be included in the header adding script reference in additional page head placeholder)
   4. Add necessary styles and images to show the functionality
   5. Add custom code. You can check Jan posts and rating samples.

Step 4.1 

<TD Class="{$IDAEG2RE}">

<DIV ALIGN="RIGHT" class="rating" title="{@ID}_{@Puntos}"></DIV>

</TD>

Step 4.2

This will give us the ability to build the UI through JQuery and associate the code to manage list items. Final result:

Bye!