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

7 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