Work with Rating Field data, anywhere.

Great new article by Sveta Yerpilev, SharePoint Consultant for KWizCom Professional Services. Take a look:



Work with Rating Field data, anywhere.
by Sveta Yerpilev


Rating fields allow you to gather user opinions about your data. But sometimes you can have a problem displaying this data. In this article we will talk about using the Rating Field in Data View Web Parts and Custom List Forms and how to circumvent problems that might arise..

First of all it is important to note that a Rating field contains only numbers and can’t contain images or any other type of data. This means that if we want to show rating in a Data View Web Part row we need to build the images manually. How is this done?

Let’s take a look at the Rating field in a standard list view using IE Developer Toolbar. As we can see the image source equals to: “_layouts/KWizCom_RatingSolution/Images/[number].gif”.
So we can open this folder – 12/Templates/Layouts/KWizCom_RatingSolution/Images - and find all “star” images that our rating solution uses.
This is where you can change or overwrite the default images of the Rating solution to suite them to your own design.


So how can we use this knowledge in the Data View Web Part? When you try to add a Rating field to the Data View Web Part you’ll see the following code:
where “Rating” is the name of your Rating field. This code will show you the rating as a number with the value of 1-5. To show an image instead of a number you need to replace the existing code with the following string:

<img
src="http://www.blogger.com/_layouts/KWizCom_RatingSolution/Images/{@Rating}.gif"
/>

This code will build the image source link according to the rating value of the item, so you will see the right image.

Well, now we can see images instead numbers. Great! But what if we need to rate from the Data View Web Part? How do we make our image clickable?

We need to use the IE Developer Toolbar one more time to discover the function that opens additional pop-up window with the ability to rate...
Here is the function:

commonShowModalDialog('http://siteURL/_layouts/KWizCom_RatingSolution/RatingPopup.aspx?itemId={@ID}&listId=ListID','dialogHeight:450px;dialogWidth:350px;scroll:no;toolbar:no;status:no;resizable:no;',
null, this.parentNode);

This is a long function that must contain the item and the list ID. But if we can get the item ID from the data source, we can just use the List ID as it is because most of the time we only use one static list in our Data View Web Part. So just replace the “ListID” with your List ID, siteURL with your site URL and enter this function as an ”onclick” event function in our rating image.
We will then get the following code:

<img
onclick="commonShowModalDialog('http://siteURL/_layouts/KWizCom_RatingSolution/RatingPopup.aspx?itemId={@ID}&listId=ListID'
,'dialogHeight:450px;dialogWidth:350px;scroll:no;toolbar:no;status:no;resizable:no;',
null, this.parentNode);"
src="http://www.blogger.com/_layouts/KWizCom_RatingSolution/Images/%7B@Rating%7D.gif"
/>

Now we have a clickable image that can be used to view a summary of previous user rating and so that you can rate. But what about the details? How can we show all the ratings and comments attributed to an item? We definitely need the “Details” link here.

Choose the link’s place in your DataView and add the following code after you changed the siteURL and ListID parameters:

Details

This code will add a link displayed as “Details” to your Data View Web Part. You can change the word “Details” to any other word or sentence.





That’s it. Now we can create Data View Web Parts and Custom list forms that know how to work with the rating field.

Here is a sample for Print View for one of the Articles list in SharePoint:

Simple as that!