How to create Rating with Stars in Visual Force page ?
To create the Stars Ratings in VF page you need :
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
6 Comments
url('{!$Resource.fillstar}');
ReplyDeletei'm getting ERROR for this & please help me to solve this
Hello, you have to save the fillstar and emptystar images in your static resource. After that you can get them using {!$Resource.fillstar}.
DeleteLet me know if you have any questions.
Bro, Thank you so much
DeleteYour welcome :)
DeleteThanks for this code 👍
ReplyDeleteWelcome :)
Delete