How To Build Star Rating Component Using LWC In Salesforce

In this blog, we will learn how to build a rating component using LWC. A rating component is required in different aspects whether you are holding an event, launching a product, running a food delivery, or anything else customer feedback has the most importance.

How it will look like.

Let’s start coding. We build two components.

ratingCmp.html

<template>
    <div class="rate">
        <input type="radio" id="star15" name={name} value="5" onchange={rating} />
        <label for="star15" title="text">5 stars</label>
        <input type="radio" id="star14" name={name} value="4" onchange={rating} />
        <label for="star14" title="text">4 stars</label>
        <input type="radio" id="star13" name={name} value="3" onchange={rating} />
        <label for="star13" title="text">3 stars</label>
        <input type="radio" id="star12" name={name} value="2" onchange={rating} />
        <label for="star12" title="text">2 stars</label>
        <input type="radio" id="star11" name={name} value="1" onchange={rating} />
        <label for="star11" title="text">1 star</label>
    </div>
</template>

ratingCmp.js

import { LightningElement, api } from "lwc";

export default class RatingCmp extends LightningElement {
  static pizzarating;
  static deliveryrating;
  static burgerrating;
  static  packagerating;
  @api name;
  rating(event) {
    if (event.target.name === "Pizza") {        
      RatingCmp.pizzarating = event.target.value;        
    }
    if (event.target.name === "Burger") {
      RatingCmp.burgerrating = event.target.value;
    }
    if (event.target.name === "Package") {
      RatingCmp.packagerating = event.target.value; 
    }
    if (event.target.name === "Delivery") {
      RatingCmp.deliveryrating = event.target.value;
    }
  }
@api
  getvalues() {
    alert(
      "DeliveryRating:" +
      RatingCmp.deliveryrating +
        ", PizzaRating:" +
        RatingCmp.pizzarating +
        ", BurgerRating:" +
        RatingCmp.burgerrating +
        ", PackageRating:" +
        RatingCmp.packagerating
    );
  }
}

ratingCmp.css

* {
    margin: 0;
    padding: 0;
}

.rate {
    float: left;
    height: 46px;
    padding: 0 10px;
}

.rate:not(:checked)>input {
    position: absolute;
    top: -9999px;
}

.rate:not(:checked)>label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 30px;
    color: #ccc;
}

.rate:not(:checked)>label:before {
    content: '★ ';
}

.rate>input:checked~label {
    color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
    color: #deb217;
}

.rate>input:checked+label:hover,
.rate>input:checked+label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
    color: #c59b08;
}

feedbackCmp.html

<template>
    <lightning-tile title='Provide Feedback'>
        <div class="slds-m-top_medium slds-m-bottom_x-large">
            <div class="slds-p-around_medium lgc-bg">
                <lightning-tile label="Delivery Service" type="media">
                    <lightning-avatar slot="media"
                        src="https://tse1.mm.bing.net/th?id=OIP.DrJx7TuzS4K3-AWQGM0-pwHaE5&pid=Api&P=0&w=50&h=100"
                        fallback-icon-name="standard:person_account" alternative-text="Delivery Service"></lightning-avatar>
                        <c-rating-cmp name='Delivery'></c-rating-cmp>
                </lightning-tile>    
            </div>
        </div>
        <div class="slds-m-top_medium slds-m-bottom_x-large">
            <div class="slds-p-around_medium lgc-bg">
                <lightning-tile label="Pizza" type="media">
                    <lightning-avatar slot="media"
                        src="https://res.cloudinary.com/teepublic/image/private/s--vVWQvPyW--/ar_1:1,c_fill,h_300,w_300/d_misc:avatars:f_5.png,f_jpg,q_90/v1476802496/production/stores/4367/avatar.jpg"
                        fallback-icon-name="standard:person_account" alternative-text="Pizza"></lightning-avatar>
                        <c-rating-cmp name='Pizza'></c-rating-cmp>
                </lightning-tile>
            </div>
        </div>
        <div class="slds-m-top_medium slds-m-bottom_x-large">
            <div class="slds-p-around_medium lgc-bg">
                <lightning-tile label="Burger" type="media">
                    <lightning-avatar slot="media" src="https://webstockreview.net/images/burger-clipart-bread-12.jpg"
                        fallback-icon-name="standard:person_account" alternative-text="Burger"></lightning-avatar>
                        <c-rating-cmp name='Burger'></c-rating-cmp>
                </lightning-tile>    
            </div>
        </div>
        <div class="slds-m-top_medium slds-m-bottom_x-large">
    
            <div class="slds-p-around_medium lgc-bg">
                <lightning-tile label="Packaging" type="media">
                    <lightning-avatar slot="media"
                        src="https://us.123rf.com/450wm/theblackrhino/theblackrhino1410/theblackrhino141000154/33177495-stock-vector-yellow-generic-food-package-over-blue-background.jpg?ver=6"
                        fallback-icon-name="standard:person_account" alternative-text="Packaging"></lightning-avatar>
                    <c-rating-cmp name='Package'></c-rating-cmp>
                </lightning-tile>
                <lightning-button label="Submit" onclick={showRating}> </lightning-button>
            </div>
        </div>
    </lightning-tile>
</template>

feedbackCmp.js

import { LightningElement } from 'lwc';

export default class FeedbackCmp extends LightningElement {
    showRating(){
        this.template.querySelector('c-rating-cmp').getvalues();
    }
}

feedbackCmp.css

* {
    margin: 0;
    padding: 0;
}

feedbackCmp.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
    <target>lightning__AppPage</target>
    <target>lightning__RecordPage</target>
    <target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>

Code Explanation

• In this we written a ratingCmp component to build the star view and used this child component to feedback component.

  <c-rating-cmp name='Package'></c-rating-cmp>

• I declared a name public variable and passed the value from feedbackCmp for all options.
• This way you can edit the rating component if you need no need to change code multiple time. Way to write a reusable code.
• In xml file add target values as App page, Record Page or Home page. You can use community page as well.

On submit showRating called and in this I have called a public method of child component

this.template.querySelector('c-rating-cmp').getvalues()

Hope, this post helped you in building the star rating component using LWC. We at Emizentech have expert salesforce developers who help businesses and organizations all over the world to achieve business goals with the help of salesforce products. So, get in touch with us and hire the best salesforce consulting company.