Have you ever met with a requirement where you had to Rate list of records in salesforce and store the ratings related to Individual user and then do an average rating based on rating for all users for the records ?The records that I refer to may be your custom objects ,or leads or may be your Accounts or opportunities .Providing ability to Rate records is one of the common requirements if you are building a site where you showcase your products .Salesforce knowledge article provides this facility but the solution we will do here will be rating custom object or standard object and we assume you don't use knowledge module for your purpose .
Our approach will be to use a simple plugin that I liked very much and special thanks to the actual author who has developed this plugin Kartik Visweswaran.I salute his work and my work is just integrating his work with salesforce Visualforce Page .
Lets get started with simple demo that he has hosted on his site ,the demo link is as below
http://plugins.krajee.com/star-rating/demo
Lets quickly grab his plugin from the github repo .
Assumptions for this work
I have created a Junction object between user and Account and have named it as Account Rating .The Account Rating object has a custom field created of number type Rating to store the rated no from visualforce interface
Visualforce Code
We will import all the jquery,CSS,bootstrap plugins into the static resource and reference the same in the VF.The entire code is as shown below
The meat of the code above is how we have used script to call javascript remoting function to upsert the junction object
Apex Code
Let me take some time in explaining this on what we have been doing here,
The Input HTML-5 tag has a javascript that detects when the rating changes .Once the rating star is clicked we call js remoting to upsert user rating for the Account.The demo page appears as below link .Note I have kept code very simple .and may be once I have time i will enhance this to make it generalized for any object and fields.
http://webzone-developer-edition.ap1.force.com/webzone/RatingDemo
I have made a small unmanaged package in case you want to pull this and play in your org to see how this goes
Enjoy coding .....
Our approach will be to use a simple plugin that I liked very much and special thanks to the actual author who has developed this plugin Kartik Visweswaran.I salute his work and my work is just integrating his work with salesforce Visualforce Page .
Lets get started with simple demo that he has hosted on his site ,the demo link is as below
http://plugins.krajee.com/star-rating/demo
Lets quickly grab his plugin from the github repo .
Assumptions for this work
I have created a Junction object between user and Account and have named it as Account Rating .The Account Rating object has a custom field created of number type Rating to store the rated no from visualforce interface
Visualforce Code
We will import all the jquery,CSS,bootstrap plugins into the static resource and reference the same in the VF.The entire code is as shown below
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--*! | |
| * @version 1.0 | |
| * | |
| * A simple yet powerful JQuery star rating plugin that allows rendering | |
| * fractional star ratings | |
| * | |
| * This pulgin is customized from JQuery plugins at http://plugins.krajee.com/star-rating | |
| * | |
| *--> | |
| <apex:page sidebar="false" showHeader="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" controller="RatingDemoCtrl"> | |
| <html> | |
| <head> | |
| <apex:stylesheet value="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"/> | |
| <link href="{!URLFOR($Resource.StarRatingPlugin, 'StarRatingPlugin/css/star-rating.css')}" media="all" rel="stylesheet" type="text/css" /> | |
| <script src="{!URLFOR($Resource.StarRatingPlugin, 'StarRatingPlugin/js/jquery.min.js')}"></script> | |
| <script src="{!URLFOR($Resource.StarRatingPlugin, 'StarRatingPlugin/js/star-rating.min.js')}" type="text/javascript"></script> | |
| </head> | |
| <body> | |
| <div> | |
| <br /> | |
| <br /> | |
| <h3> | |
| <b>This page is a sample page created to demo How to Build Custom | |
| Rating Functionality For Any set of record List.We have considered Account records to demonstrate the Concept...</b> | |
| </h3> | |
| </div> | |
| <br /> | |
| <br /> | |
| <table class="table"> | |
| <apex:repeat value="{!lstacc}" var="a"> | |
| <tr> | |
| <div><b>Account Name:</b>{!a.name}</div> | |
| <div> | |
| <input id="{!a.id}" onchange="rateAsset(event);" value="{!IF(a.Account_Ratings__r.size>0,a.Account_Ratings__r[0].RatingScore__c,0)}" type="number" class="rating" min="0" max="5" step="0.5" data-size="sm" data-show-clear="false" data-show-caption="false" /> | |
| </div> | |
| <br/> | |
| <br/> | |
| </tr> | |
| </apex:repeat> | |
| </table> | |
| </body> | |
| <script> | |
| function rateAsset(event) { | |
| var a = event.target.id; | |
| $('#' + a).on('rating.change', function(event, value, caption) { | |
| RatingDemoCtrl.rateAsset(a, value, function(result, event) { | |
| if (event.type == 'exception') { | |
| alert(event.message); | |
| } else { | |
| alert('Thank you for rating this Asset'); | |
| } | |
| }, { | |
| buffer: false, | |
| escape: true, | |
| timeout: 30000 | |
| }); | |
| }); | |
| } | |
| </script> | |
| </html> | |
| </apex:page> |
Apex Code
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| @Name : RatingDemoCtrl | |
| @description : The following class consists of logic to upsert the rating for Parent record.This plugin assumes Account has a Junction record where user rating is inserted | |
| */ | |
| public with sharing class RatingDemoCtrl{ | |
| public RatingDemoCtrl(){ | |
| lstacc=new List<Account>(); | |
| lstacc=[Select Id,Name,(Select RatingScore__c from Account_Ratings__r where User__c=:userinfo.getuserID() limit 1) from Account Limit 10]; | |
| } | |
| public List<account> lstacc{get;set;}//getter and setter variable for showing some sample data for which we rate | |
| /* | |
| @Name : rateAsset | |
| @description : The following method upserts the Rating record if the User rate an Asset.This record should be created as a Junction record for Parent Record | |
| @parameters : AssetId(ID),rating(decimal) | |
| @returns : Boolean | |
| */ | |
| @RemoteAction | |
| public static boolean rateAsset(String accId,decimal myRating){ | |
| List<Account_Ratings__c> lstcRating=[Select RatingScore__c from Account_Ratings__c | |
| where Account__c =:accId | |
| and User__c=:userinfo.getuserID()]; | |
| Account_Ratings__c cRating=new Account_Ratings__c(); | |
| if(lstcRating.size()>0){ | |
| cRating=lstcRating.get(0); | |
| cRating.RatingScore__c=myRating; | |
| }else{ | |
| cRating.RatingScore__c =myRating; | |
| cRating.User__c=userinfo.getuserID(); | |
| cRating.Account__c=accId; | |
| } | |
| try{ | |
| upsert cRating;//Upsert the Rating record | |
| return true; | |
| }catch(exception ex){ | |
| system.debug('Error occured'+ex.getmessage()); | |
| return false;//Return false if any error occurs in rating an Asset | |
| } | |
| } | |
| } |
Let me take some time in explaining this on what we have been doing here,
The Input HTML-5 tag has a javascript that detects when the rating changes .Once the rating star is clicked we call js remoting to upsert user rating for the Account.The demo page appears as below link .Note I have kept code very simple .and may be once I have time i will enhance this to make it generalized for any object and fields.
http://webzone-developer-edition.ap1.force.com/webzone/RatingDemo
I have made a small unmanaged package in case you want to pull this and play in your org to see how this goes
| Use this URL to install the package into any organization: https://login.salesforce.com/ Note: If you are installing into a sandbox organization you must replace the initial portion of the URL with http://test.salesforce.com Also a small video I have attached to explain the functionality clearly .Also note from karthik demo you can add all style elements .Check his demo page for more styling .The attributes can be configurable as well |
Enjoy coding .....
Great post. Thank you sharing this artical tekclue
ReplyDelete