Show Star Rating as Salesforce Standard Field

Hi friends, this time I am coming with a solution for star rating. if you want to show star rating in a standard salesforce layout in form of column.
Take a look of below image. in this I am showing some rating as like this is a stanadrd field in salesforce.

In above image notice that you rating field is appear same as standard field on UI. here is how you can do this-

Step-1

Create a new page named "StarRating" & a new controller class "StarRatingController" in salesforce.

Step-2

Get a jquery star plugin files from net & upload these files in salesforce static resource. I will also tell you the path one of my page latter from where you can download these files.

Step-3

I assuming that you uploaded two static resource -

a-OrgResource

b-jQueryStarRatingPlugIn

in first zip file we are having all jquery js & css files. although we are going to use few of them.

second one zip file is having all files which we downloaded from jquery plugin site.

Step-4

Copy & paste below code in VF page

<apex:page id="page1" sidebar="false" showHeader="false" standardController="Account" extensions="StarRatingController">
    <apex:styleSheet value="{!URLFOR($Resource.OrgResource,'development-bundle/themes/base/jquery.ui.all.css')}" />
    <apex:styleSheet value="{!URLFOR($Resource.jQueryStarRatingPlugIn,'jquery.ui.stars.css')}" />
    <apex:includeScript value="{!URLFOR($Resource.OrgResource,'js/jquery-1.5.1.js')}" />
    <apex:includeScript value="{!URLFOR($Resource.OrgResource,'development-bundle/ui/jquery.ui.core.js')}" />
    <apex:includeScript value="{!URLFOR($Resource.OrgResource,'development-bundle/ui/jquery.ui.widget.js')}" />
    <apex:includeScript value="{!URLFOR($Resource.jQueryStarRatingPlugIn,'jquery.ui.stars.min.js')}" />
    <style>
        .detailList{
            width:94%;
        }
        .pbBody, .pbBody a, .pbBody td, .lbBody a, .lbBodyDescription, .list .headerRow .noRowsHeader {
         border-bottom: 0 none !important;
        }
    </style>
    <apex:form id="form1">
        <apex:pageBlock > 
        <div id="ep" class="bDetailBlock bPageBlock secondaryPalette">
            <div class="pbSubsection">
                <table cellspacing="0" cellpadding="0" border="0" class="detailList" style="border-bottom:none !important;" >
                    <tbody>
                        <tr>
                            <td class="labelCol">Rating</td>
                            <td class="dataCol col02">
                                <apex:outputPanel >
                                    <div class="divRating">
                                        <apex:selectList value="{!rating}" size="1">
                                            <apex:selectOptions value="{!listOfRatingOptions}" />
                                        </apex:selectList>
                                    </div>  
                                </apex:outputPanel> 
                            </td>
                            <td class="labelCol">&nbsp;</td>
                            <td class="dataCol col02">&nbsp;</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>  
            
          <script>
             jQuery(document).ready(function(){
                     jQuery(".divRating").stars({
                        inputType: "select",
                        cancelShow: false,
                        disabled:true
                     });
                     $(".accountBlock").children().attr('class','');
                     $(".detailList").css('width','94%');
                 });
                     
          </script>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Step-5 Copy & paste below class code in controller which you create few steps back

public with sharing class StarRatingController {
 public integer rating {get;set;}
 public List<SelectOption> listOfRatingOptions {get;set;}
 public StarRatingController(ApexPages.StandardController controller){
  listOfRatingOptions = new List<SelectOption>();
  rating = 3;
  string val = '';
  for(integer i=1;i<=5;i++){
   val = string.valueOf(i);
   listOfRatingOptions.add(new SelectOption(val,val));
  }
 }
}

now you can include this page in account stadarad layout. To add this follow next steps.

Step-6
Click on account tab, this will show you list of account. Open one account & click on Edit Layout link at top left.

Step-7
Add a new section from the layout. Give any name to this section.Uncheck Display Section Header On two check box (Detail page & Edit page). In Layout option select 1-Column option & click on save.

Step-8
Add starRating VF page to this section & set height 20 & width 100%.

Save layout & see that rating is available same as a standard field on account detail.

here is the link of star rating page if you want to see how this looks like.You can also download the static resource files by view source.

The same thing you can also do on any VF page. here is demo page. the code of this demo page is as below-

<apex:page standardController="Account" extensions="SiteStarRatingController" id="page1">
  <apex:sectionHeader title="Site"  subTitle="Star Rating Sample" /> 
  <apex:pageBlock id="block1"> 
   <apex:pageBlockSection columns="1">
    <apex:pageBlockSectionItem >
     <apex:outputLabel value="Account Name" />
     <apex:outputField value="{!act.Name}" />
    </apex:pageBlockSectionItem> 
   </apex:pageBlockSection> 
   <apex:pageBlockSection columns="1">
    <apex:iframe src="/apex/StarRating" height="20px" />
   </apex:pageBlockSection>
   <apex:pageBlockSection columns="1">
    <apex:pageBlockSectionItem >
     <apex:outputLabel value="Type" />
     <apex:outputField value="{!act.Type}" />
    </apex:pageBlockSectionItem> 
    <apex:pageBlockSectionItem >
     <apex:outputLabel value="Description" />
     <apex:outputField value="{!act.Description}" />
    </apex:pageBlockSectionItem>
    <apex:pageBlockSectionItem >
     <apex:outputLabel value="Fax" />
     <apex:outputField value="{!act.Fax}" />
    </apex:pageBlockSectionItem>
   </apex:pageBlockSection> 
  </apex:pageBlock>
</apex:page>

controller class is as below-

public with sharing class SiteStarRatingController {
 public Account act{get;set;}
 public SiteStarRatingController(ApexPages.StandardController controller){
  act = [Select Id,Name,Type, Industry, Fax, Description from Account limit 1];
  
 }
}

Done..!! :)

Half Star Rating in jQuery Plug in

I recently used jQuery Star Rating in a site, in that I faced a issue regarding the half star rating, for Eg. If the rating is 2 than it can be shown easily but if it is 2.5 it is a little bit difficult to show the correct rating on the plug in. Here is the code if you are facing this type of issue-

Here is the VF page code & apex class code. In this the calculate method is most important to show the half star rating.

Apex Class

===============================================

public with sharing class StarRatingController {

public decimal selctedAverage{get;set;}

public decimal averageStar{get;set;}

public List getSkillOptionsStar() {

List skillOptions = new List();

decimal dOption= 1.0;

string val= '';

for(integer i=0; i<>

{

val = string.valueOf(dOption);

skillOptions.add(new Selectoption(val,val)) ;

dOption += 0.5;

}

return skillOptions;

}

public List getSkillOptions() {

List skillOptions = new List();

decimal dOption= 1.0;

string val= '';

for(integer i=0; i<>

{

val = string.valueOf(dOption);

skillOptions.add(new Selectoption(val,val)) ;

dOption += 0.1;

}

return skillOptions;

}

public void calculate(){

string str = string.valueOf(selctedAverage);

decimal tempAvg = 0;

if(str.indexOf('.') > -1)

{

str = str.substring(0, str.indexOf('.') + 2);

}

if(str.indexOf('.5') > -1)

{

tempAvg = Double.valueOf(str);

}

else

{

tempAvg = Double.valueOf(str);

tempAvg = tempAvg.round();

}

averageStar = tempAvg + 0.5;

}

public StarRatingController(){

selctedAverage = 1;

averageStar = 1.5;

}

}

VF Code

=============================================

<table cellspacing="5" cellpadding="0" border="0"><tr>

<td>Select average rating :</td>

<td>

<apex:selectList value="{!selctedAverage}" size="1" id="listSelect" onchange="calculate()">

<apex:selectOptions value="{!SkillOptions}"/>

</apex:selectList>

</td>

</tr>

<tr>

<td>Rating :</td>

<td valign="top">

<apex:outputPanel id="pnlResult">

<div id="divStarRating">

<apex:selectList value="{!averageStar}" size="1">

<apex:selectOptions value="{!SkillOptionsStar}"/>

</apex:selectList>

</div>

<script type="text/javascript">

$(document).ready(function(){

$("#divStarRating").stars({

inputType: "select",

split: 2,

cancelShow: false,

disabled : true,

starWidth: 17

});

});

</script>

<br/>

<br/>

<apex:outputLabel value="selected value==> {!selctedAverage}" /> <br/>

<br/>

<apex:outputLabel value="calculated value==> {!averageStar}" />

</apex:outputPanel>

</td>

</tr>

</table>

<apex:actionFunction name="calculate" action="{!calculate}" rerender="pnlResult" status="calStatus"/>

<apex:actionStatus startText="Please wait..." id="calStatus"/>

view demo