Custom Star Rating Component Using Visualforce In Salesforce

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

Use this URL to install the package into any organization: https://login.salesforce.com/packaging/installPackage.apexp?p0=04t90000000FNdn 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 .....

Learn how to use Salesforce Communities Designer for Self Service Portal

Salesforce community portal have been in use for long time, but was limited in offering pleasant features and specially custom configuration. To introduce as new feature, lot of additional works needs to be done, both from development and design perspective, which include using HTML, CSS and Javascript on top of Visualforce.

Clearly powerful user-experience and clean user interface adds high user engagement. In person, we have spend weeks to leverage an impactful customer experience with Salesforce Communities

Salesforce introduced community designer and have fascinated me in person, I have been working on this platform for about three year, and I find this tool be very productive. I teamed up with +Harshit, and decided to write this blog post here explaining how to Salesforce Community Designer Tool released in Winter'15.

To explain a functionality, I am choosing a business scenario, covering business activity in an financial institution, and covering mundane activities like resolving credit-card/loans issues. My objective is to explain this all with no-code, and rather deal everything with 'Point and Click'.

Prerequisites

1) Lets set up a developer org . sign up for an org from developerforce.com

https://developer.salesforce.com/en/signup

2) If you are not familiar with communities, we recommend reading this setup guide here .

3) Knowledge articles is the soul for this whole set up. Get some coffee and go to this setup video here

Having installed Prerequisites (Note : three of mentioned resources, are mandatory) , we will look up Salesforce Community Builder and Templates, to set up Self-Service Portal

Navigate to Set up>Communities>All Communities

Note : As shown in picture above, two new additional setting are introduced as  ‘Administration Settings’ and ‘Community Management’

Salesforce Community Templates

Primarily, three important templates available to jump start, but I would like to share the amenities, each templates offer, and make choice easier for you.

1) Kokua - Uses data categories, case and Salesforce Knowledge.

2) Koa- Designed for Mobile, features include, articles search and case management.

3) Napili- Offer most features, with Q&A, Knowledge Articles and Case Support. Clearly, I’ll use this template moving forward

Pickup template of your choice, In here, I have created a community named ‘FunCommunity’ as you can see in drop-down,

Setup Navigational Topics

Got to Community Setup shown as above and you will see salesforce settings screen similar to

one shown below

Bind Topics

Go to (Setup -> Topics -> Topics for Objects) to bind topics to every knowledge article. Clearly, this make it easier to locate or navigate in the community

Screen shot below explains, how to add banner images for each topic. I have created three topics for here to demonstrate, Credit Card, Debit Card and Loan Processing

Assign Data Category

Locate arrow on top-right, to assign data-category for each topic, in the picture below    

Featured Topics

Every featured topics, pop as thumbnail on homepage, add feature topics here

Video Summary

With that said, you community portal has taken shape with pure configuration and 'no-code' involved. I am compiled these steps in a video and discussed some more feature(s). Feel free to provide us feedback and share your knowledge with us.