Create #Rating with #Stars in Visual Force page | #Salesforce Tutorials

How to create Rating with Stars in Visual Force page ?

To create the Stars Ratings in VF page you need : 
  • Basic knowledge of creating custom VF page and Apex class
  • Fill Star Image 
  • Empty Star Image 

First let's create a Apex Class and declare an Integer variable to store selected rating value in VF page as shown below : 

RatingCtrl

1
2
3
public class RatingCtrl {
    public Integer rating { get; set; }
}


After creating the apex class create a visualforce page with Radio Button and CSS for stars as shown below

Rating

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<apex:page docType="html-5.0" controller="RatingCtrl">
    <apex:slds />
<style>

.star-rating fieldset {
  font-size:0;
  white-space:nowrap;
  display:inline-block;
  width:250px;
  height:50px;
  overflow:hidden;
  position:relative;
  background:
      url('{!$Resource.emptystar}');
  background-size: contain;
}

.star-rating input { 
   -moz-appearance:none;
   -webkit-appearance:none;
   opacity: 0;
   display:inline-block;
   width: 100%;
   height: 100%; 
   margin:0;
   padding:0;
   z-index: 2;
   position: relative;
}

.star-rating input:hover + label,
.star-rating input:checked + label {
     opacity:1;    
   }

.star-rating label {
   opacity: 0;
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 20%;
   z-index: 4;
   background: 
      url('{!$Resource.fillstar}');
   background-size: contain;
 }

.star-rating td ~ td label {
  width: 40%;
  z-index: 3;  
}
.star-rating td ~ td ~ td label {
  width: 60%;
  z-index: 2;
}
.star-rating td ~ td ~ td ~ td label {
  z-index: 1;
  width: 80%;
}
.star-rating td ~ td ~ td ~ td ~ td label {
  z-index: 0;
  width: 100%;
}
</style>
<apex:outputPanel styleClass="star-rating">
    <apex:form id="form">
        <div style="text-align: center">{!if(isnull(rating),'No value selected',text(rating)&' stars')}<br/>
         <apex:selectRadio value="{!rating}" layout="lineDirection">
         <apex:actionSupport event="onclick" reRender="form" />
            <apex:selectOption itemValue="1"></apex:selectOption>
            <apex:selectOption itemValue="2"></apex:selectOption>
            <apex:selectOption itemValue="3"></apex:selectOption>
            <apex:selectOption itemValue="4"></apex:selectOption>
            <apex:selectOption itemValue="5"></apex:selectOption>
        </apex:selectRadio>
        </div>
    </apex:form>    
</apex:outputPanel> 
</apex:page>

Save the VF page and run it the output will be as shown below : 






If you have any question please leave a comment below.
If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Keep Coding 






Post a Comment

9 Comments

  1. url('{!$Resource.fillstar}');
    i'm getting ERROR for this & please help me to solve this

    ReplyDelete
    Replies
    1. Hello, you have to save the fillstar and emptystar images in your static resource. After that you can get them using {!$Resource.fillstar}.

      Let me know if you have any questions.

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hi can you please tell me how to find the average of this rating and how to show it in front of my session field

    ReplyDelete
    Replies
    1. Hi, you can create a custom formula field for that to calculate the rating on the parent object.

      Delete