Salesforce LWC : Create a Star Rating Component using LWC

LWC SALESFORCE: CREATE A STAR RATING COMPONENT USING LWC

Star Rating using LWC

This blog is to demonstrate how to create a basic Star Rating Component with LWC.

Use Case/ Problem Statement:

A Rating Component is required for a Food Delivery business so that users/customers can provide rating on different parameters and we can get and store user's rating input values in Salesforce. This component must be usable on Salesforce Community pages (login based or public).

Solution:

We will create the Star Rating component using Lightning Web Components which can be easily hosted on community pages. Since we will use LWC this will be fast and highly customisable. 

There are many ways to achieve this using HTML,Javascript and CSS and there is lot of material and sample code online in various developer forums. But for someone like me who isn't from a web designing or Javascript background it was a bit difficult to find a simpler and easy to use version of html and css inside a LWC component.

After a bit of research and several hit & trial attempts, I was finally able find something that works and looks quite stable in LWC components.

Below is the code for LWC Star Rating Component:

starRating.html

-----------------------------------------------------------------------------------------------------------------------

starRating.js

-----------------------------------------------------------------------------------------------------------------------

starRating.css

-----------------------------------------------------------------------------------------------------------------------

starRating.js-meta.xml

-----------------------------------------------------------------------------------------------------------------------

Important Points & Code Description: 

1. Html & CSS Code : The most important and tricky part is the usage of HTML code for different Star rows.

It works always well if we use only one Star Rating row but if we have different rows with stars then it becomes an issue if we do not change the HTML correctly.

The thing that we need to change in HTML for each rating star set is basically the name, id and label for values for each set of stars. Please checkout the code for more clarity.

References (Html/CSS) : 

https://codepen.io/hesguru/pen/BaybqXv - This is the sample code which I referred for a single row of Star Rating.

https://stackoverflow.com/questions/30991572/multiple-star-review-on-same-page?rq=1 - Here is the reference which helped me to fix the multiple Star Rating row issue.

2. meta.xml File : We will include:

 <target>lightningCommunity__Page</target>

 <target>lightningCommunity__Default</target>

so that the LWC component can be used on community pages also.

3. JS Code : In .js file, I have just created a function which is called every time user selects a star rating in a row. Using event attributes from onclick event in the function we are able to find the name of the row(for which the value was selected)  and also the value of the Star Rating selected by the user.

Based on the name of the row, we are assigning/storing the value in the variables defined for each row. Also, when user clicks on the Submit button, I am just showing these latest Star Rating values for each row. 

NOTE: I have just stored the values of the 4 ratings and just shown them as an alert. But depending upon the actual use case these values can be used anywhere like sending to server side controller or using in any other function etc.  

Below is a working Demo video.

Please share your views and suggestions. Also, please share your knowledge if we can do the same using better or optimised way.

Hope this helps!

BEST ONLINE SALESFORCE COURSES - START LEARNING TODAY!

• Flows - Become Flow Expert


• Get Salesforce PD 1 Certified


• Salesforce Development - Beginners


• Learn Lightning Web Components

If you like reading my content, Subscribe to my Upcoming YOUTUBE Channel here: https://www.youtube.com/channel/UCdfi8Sq7iOcxnFhsgulWHeg/videos?view=0&sort=p&flow=grid

Don't Miss Latest Posts :  CLICK HERE TO SUBSCRIBE TO THIS BLOG

Checkout All Flow Examples on this Blog: All Flow Examples

If you like this please do Share! #Learn and Share!