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

<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 😊

Comments

UnknownMarch 28, 2020 at 3:10 AM
url('{!$Resource.fillstar}');
i'm getting ERROR for this & please help me to solve this
ReplyDelete
Replies
UnknownMarch 29, 2020 at 5:20 AM
Thanks for this code 👍
ReplyDelete
Replies

Add comment

Salesforce Bolt

Search This Blog

Connect #ZOOM with #Salesforce using #Zapier | Salesforce Tutorials