SharePoint Discussion List Threading view Rating System:

I wanted to do a Rating system for the email threads we have in our SharePoint system. I have written an email thread synchronizer for SharePoint. Of course, SharePoint synchronizes the email but doesn’t thread it properly. I will write a separate blog for it.
This rating system is like this:


Figure 1:


So a user who needs to rate the email message just clicks a star and the average rating will be shown.


So how did I achieve it?


I haven’t used any c# code (except a web service). What I did was kind of changed the schema.xml file that SharePoint creates for each List. This Schema.xml file is in the appropriate folder in the 12 hive. (12\template\features\customdiscussionboard\schema.xml).


So how and where to change the Schema.xml file?

Since, I know, I need to display my star rating images before View Properties, I was curious to know where and how this is displayed. That is why, I went to Schema.xml file and fiddling it with. I saw a Status Bar field. There I saw this field. So, I changed the Schema.xml file’s StatusBar field and bingo..

This is what I added in the Schema.xml file in Status Bar field:

<!CDATA[

<HTML><![CDATA[<td style="border-style:none" nowrap="TRUE"><div>Please click star to rate: (1 low to 5 high)</div></td>]]></HTML>
<HTML><![CDATA[<td style="border-style:none" nowrap="TRUE">]]></HTML>
<HTML><![CDATA[ <div style="width:55px;"> <img alt="star_1" src="/_layouts/images/star_x_grey.gif" id="star]]></HTML>
<Field Name="ID" />
<HTML><![CDATA[_1" ONCLICK="CurrentEventFunctions.RatingImageClicked(]]></HTML>
<Field Name="ID" />
<HTML><![CDATA[,']]></HTML>
<Column Name="GUID" />
<HTML><![CDATA[',']]></HTML>
<Field Name="FileRef" />
<HTML><![CDATA[',this)"/><img alt="star_2" src="/_layouts/images/star_x_grey.gif" id="star]]></HTML>
<Field Name="ID" />
<HTML><![CDATA[_2" ONCLICK="CurrentEventFunctions.RatingImageClicked(]]></HTML>
<Field Name="ID" />
<HTML><![CDATA[,']]></HTML>
<Column Name="GUID" />
<HTML><![CDATA[',']]></HTML>
<Field Name="FileRef" />
<HTML><![CDATA[', this)" /><img alt="star_3" src="/_layouts/images/star_x_grey.gif" id="star]]></HTML>
<Field Name="ID" />
<HTML><![CDATA[_3" ONCLICK="CurrentEventFunctions.RatingImageClicked(]]></HTML >
<Field Name="ID" />
<HTML><![CDATA[,']]></HTML>
<Column Name="GUID" />
<HTML><![CDATA[',']]></HTML>
<Field Name="FileRef" />
<HTML><![CDATA[', this)" /><img alt="star_4" src="/_layouts/images/star_x_grey.gif" id="star]]></HTML>
<Field Name="ID" />
<HTML><![CDATA[_4" ONCLICK="CurrentEventFunctions.RatingImageClicked(]]></HTML >
<Field Name="ID" />
<HTML><![CDATA[,']]></HTML>
<Column Name="GUID" />
<HTML><![CDATA[',']]></HTML>
<Field Name="FileRef" />
<HTML><![CDATA[',this)"/><img alt="star_5" src="/_layouts/images/star_x_grey.gif" id="star]]></HTML>
<Field Name="ID" />
<HTML><![CDATA[_5" ONCLICK="CurrentEventFunctions.RatingImageClicked(']]></HTML >
<Field Name="ID" />
<HTML><![CDATA[',']]></HTML>
<Column Name="GUID" />
<HTML><![CDATA[',']]></HTML>
<Field Name="FileRef" />
<HTML><![CDATA[', this)" onload="CurrentEventFunctions.RatingLastImageLoad(']]></HTML>
<Field Name="ThreadTopic" />
<HTML><![CDATA[',']]></HTML>
<Field Name ="ID" />
<HTML><![CDATA[',this);return false;"/></div></td>]]></HTML>
]]>
 
Then, I added the javascript functions in the .master file.
 
<script language="javascript" type="text/javascript" >


function EventFunctions (loadedimage)
{
    this.loadimage=loadedimage;
}

EventFunctions.prototype.RatingLastImageLoad= function(rating,id, imgStar)
{
    if (this.loadimage) return; //this is for recursive avoiding
    if (rating.indexOf("~")>=0)
   {
      var index = rating.split("~")[1];
      if (index>=0)
     {
         for (i=1;i<=index;i++)
        {
           var imgstarmakeorange = document.getElementById("star" + id + "_" + i);
           if (imgstarmakeorange != null)
           {
               this.loadimage=true;
               imgstarmakeorange.src = "/_layouts/images/star_x_orange.gif";
               this.loadimage=false;
            }
         }
      }
  }
}
EventFunctions.prototype.RatingImageClicked =function (id, listid, parentlistid, objstar)
{
    if (typeof _spUserId != "undefined")
   {
       this.loadimage=true;
       var intStarindex = objstar.id.split("_")[1];
       this.UpdateStars(id, intStarindex);
       this.callService(id, listid, parentlistid, _spUserId,intStarindex);
       this.loadimage=false;
    }
else
   alert( "You need to signin to rate");
}

var CurrentEventFunctions = new EventFunctions(false);

EventFunctions.prototype.callService = function (id, listid, parentlistid, UserId,intStarindex )
{
var strUrl = "http://yourserver. com:<port number>/Service.asmx?WSDL";
divWbSvc.useService(strUrl,"divSvc");
var iCallID;
if (divWbSvc.divSvc)
{
iCallID = divWbSvc.divSvc.callService(this.updatePage,"InsertRatingsandReturnRatingAvg",UserId, listid,
                                                                     parentlistid,intStarindex, id, true);
}
}
EventFunctions.prototype.updatePage = function (str)
{
    if (str.error)
   {
      //alert(str.errorDetail.string);
      //handle error
    }
    else
   {
        var retVal = str.value;
        var retVals = retVal.split("~");
        //need to write logic here
     }
}
EventFunctions.prototype.UpdateStars = function (starindex, rating)
{
    this.loadimage=true;
    //get the star value (grey/orange) of the current index
    var imgstarindex = document.getElementById("star" + starindex + "_" + rating);
    var Arraysrc = imgstarindex.src.split("/");
    var intlen = Arraysrc.length;
    var imgstarindexvalue = Arraysrc[intlen-1]; 
    //first make everything grey
    for (i=1;i<=5;i++)
    {
       var imgstarmakegrey = document.getElementById("star" + starindex + "_" + i);
        if (imgstarmakegrey != null)
         imgstarmakegrey.src = "/_layouts/images/star_x_grey.gif";
     }
     //second make till the image clicked or rating -1 to orange
      for (i=1;i<=rating-1;i++)
     {
       var imgstarmakeorange = document.getElementById("star" + starindex + "_" + i);
       if (imgstarmakeorange != null)
          imgstarmakeorange.src = "/_layouts/images/star_x_orange.gif";
      }
     // now check if the image clicked is orange or grey
     var imgstarclicked = document.getElementById("star" + starindex + "_" + rating);
     if (imgstarindexvalue == "star_x_grey.gif")
         imgstarclicked.src = "/_layouts/images/star_x_orange.gif";
     else
          imgstarclicked.src = "/_layouts/images/star_x_grey.gif";
     this.loadimage=false;
}

</script>
You need to add a Grey star and Orange star image under the layouts images folder.

What I have done in my service is I insert the user, listid, folder and ratings and figure out the average rating and store it in the ThreadTopic field (actually append the ThreadTopic field with a delimiter “~”).

PS: I am attaching the images :



Comments

Post a Comment

Popular posts from this blog

Why I like “Diary” Program in Hello FM 106.4

I like to listen to internet radio all the time. It is not only you listen to music, but also, you can get the news and listen to various people’s talk. I was a fan of Singapore radio till February 2009 (till now). After that I couldn’t listen to that station as they stopped broadcasting over the internet for various copyright issues. I really miss that station. However, one of my friend who is now in Australia, gave me the link to 106.4 Hello FM this September (09) and am listening to this radio. I like to listen to “Bigil” program by Suresh. He talks casually and he tries to figure out lot of different games. I couldn’t listen to much of it due to timing issue. I don’t miss Diary program by Girish. Girish your voice is, I think very suitable for that type of program and you did capitalize on it. Good job. I like this program for 3 reasons: 1) As I said before, it is because of Girish’s voice. I think this guy should be in his 25s. I can understand his feeling towards love...
Read more

Indian Police Cop

On Deepavali day of this year (17th October 2009), though it was like another day for us in USA, in the evening we went to a fair organized by the Irving County. This fair was completely free. I need to say something we like and enjoy the most in USA, especially in Irving, TX. It has so many beautiful parks. It has lot of recreational activity centers and most of the parks have these. All parks are meticulously planned for various activities. Ok coming to the fair, It had lot of activities like a small train ride for the kids along the lake, lot of jumping activities, sliding activities, balloon riding, bungee jumping, mountain climbing, face painting, magic shows, circus shows etc activities. It was a good evening for the kids. My main intention of this blog was not to just stop with the fun activities alone but to share an important event that happened that I thought lot of our Indian policeman and Government civilians can/should follow. There was a long queue for hot dogs (Am...
Read more

Lost my Scooter

I usually park my scooter in my apartment complex parking space. Since it is very cold during November to March, I don’t use my scooter much. So it was parked wherever I left. I usually notice my scooter every time I get out of my car; I park my car next to my scooter parking space. It was Christmas holidays and didn’t go out. Day before Christmas, it snowed for an inch. So, I was curious to see how my scooter was blanketed with snow. To my shock, I found another truck parked over there instead of my scooter and I checked around and couldn’t find my scooter. I called Police and informed them. For formality sake one Cop came to my apartment and gave me a report number and asked me to inform the insurance. Unfortunately, I don’t have theft insurance. So it is gone. I really feel bad for my lost. What to do?? I cannot buy another scooter now for various reasons… It is bad time and loosing lot of money!!!!
Read more