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

14 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
  4. Hi Kapil,

    Thanks for the code, appreciate your help.

    In testing we are facing an issue on iPhone(version 13.1 onwards) & iPad, in which after selecting a star ratings when user clicks anywhere on the screen, selection of stars disappears or gets unselected. The issue comes due to "styleClass="star-rating" in outputPanel, which has all the css.
    Can you help in this regards. Thanks in advance!

    ReplyDelete
    Replies
    1. Hi FAIZ, as far I remember I created those based on the 13" 1920i resolution. I would suggest you to have another css for mobile with different width and size for the ratings.
      .star-rating-mobile{
      // Your code here
      }

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

      Delete
    3. Hi Kapil, I am facing the same issue for ios devices can you post the style code for ios here in reply, it would be helpful. Thanks in advance.

      Delete
    4. Hi, When you remove the hover style, it's working fine for IOS.

      Delete