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

Kapil March 28, 2020

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 




Tags:

Post a Comment

14 Comments

  1. UnknownMarch 28, 2020 at 3:10 AM

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

    ReplyDelete
    Replies
    1. KapilMarch 28, 2020 at 7:29 AM

      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. UnknownMarch 28, 2020 at 8:06 AM

      Bro, Thank you so much

      Delete
    3. KapilMarch 28, 2020 at 8:08 AM

      Your welcome :)

      Delete
  2. UnknownMarch 29, 2020 at 5:20 AM

    Thanks for this code 👍

    ReplyDelete
  3. SaiApril 8, 2021 at 7:33 AM

    This comment has been removed by the author.

    ReplyDelete
  4. UnknownMay 27, 2021 at 9:03 PM

    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. KapilJune 4, 2021 at 11:34 PM

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

      Delete
  5. FaizDecember 21, 2021 at 12:02 PM

    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. KapilDecember 26, 2021 at 11:58 PM

      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. BalaApril 12, 2023 at 7:49 AM

      This comment has been removed by the author.

      Delete
    3. BalaApril 12, 2023 at 7:54 AM

      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. BalaApril 28, 2023 at 2:23 AM

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

      Delete