{"id":3435,"date":"2020-06-24T06:16:10","date_gmt":"2020-06-24T11:46:10","guid":{"rendered":"https:\/\/www.emizentech.com\/blog\/?p=3435"},"modified":"2022-01-21T11:42:27","modified_gmt":"2022-01-21T11:42:27","slug":"build-star-rating-component-using-lwc-in-salesforce","status":"publish","type":"post","link":"https:\/\/multisitelocal.ezxdemo.com\/blog\/build-star-rating-component-using-lwc-in-salesforce.html","title":{"rendered":"How To Build Star Rating Component Using LWC In Salesforce"},"content":{"rendered":"

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.<\/p>\n

<\/span>How it will look like.<\/span><\/h2>\n

\"Rating
\nLet’s start coding. We build two components.<\/p>\n

<\/span>ratingCmp.html<\/span><\/h3>\n
<template>\r\n    <div class=\"rate\">\r\n        <input type=\"radio\" id=\"star15\" name={name} value=\"5\" onchange={rating} \/>\r\n        <label for=\"star15\" title=\"text\">5 stars<\/label>\r\n        <input type=\"radio\" id=\"star14\" name={name} value=\"4\" onchange={rating} \/>\r\n        <label for=\"star14\" title=\"text\">4 stars<\/label>\r\n        <input type=\"radio\" id=\"star13\" name={name} value=\"3\" onchange={rating} \/>\r\n        <label for=\"star13\" title=\"text\">3 stars<\/label>\r\n        <input type=\"radio\" id=\"star12\" name={name} value=\"2\" onchange={rating} \/>\r\n        <label for=\"star12\" title=\"text\">2 stars<\/label>\r\n        <input type=\"radio\" id=\"star11\" name={name} value=\"1\" onchange={rating} \/>\r\n        <label for=\"star11\" title=\"text\">1 star<\/label>\r\n    <\/div>\r\n<\/template>\r\n<\/pre>\n
<\/span>ratingCmp.js<\/span><\/h3>\n
import { LightningElement, api } from \"lwc\";\r\n\r\nexport default class RatingCmp extends LightningElement {\r\n  static pizzarating;\r\n  static deliveryrating;\r\n  static burgerrating;\r\n  static  packagerating;\r\n  @api name;\r\n  rating(event) {\r\n    if (event.target.name === \"Pizza\") {        \r\n      RatingCmp.pizzarating = event.target.value;        \r\n    }\r\n    if (event.target.name === \"Burger\") {\r\n      RatingCmp.burgerrating = event.target.value;\r\n    }\r\n    if (event.target.name === \"Package\") {\r\n      RatingCmp.packagerating = event.target.value; \r\n    }\r\n    if (event.target.name === \"Delivery\") {\r\n      RatingCmp.deliveryrating = event.target.value;\r\n    }\r\n  }\r\n@api\r\n  getvalues() {\r\n    alert(\r\n      \"DeliveryRating:\" +\r\n      RatingCmp.deliveryrating +\r\n        \", PizzaRating:\" +\r\n        RatingCmp.pizzarating +\r\n        \", BurgerRating:\" +\r\n        RatingCmp.burgerrating +\r\n        \", PackageRating:\" +\r\n        RatingCmp.packagerating\r\n    );\r\n  }\r\n}\r\n<\/pre>\n
<\/span>ratingCmp.css<\/span><\/h3>\n
* {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n.rate {\r\n    float: left;\r\n    height: 46px;\r\n    padding: 0 10px;\r\n}\r\n\r\n.rate:not(:checked)>input {\r\n    position: absolute;\r\n    top: -9999px;\r\n}\r\n\r\n.rate:not(:checked)>label {\r\n    float: right;\r\n    width: 1em;\r\n    overflow: hidden;\r\n    white-space: nowrap;\r\n    cursor: pointer;\r\n    font-size: 30px;\r\n    color: #ccc;\r\n}\r\n\r\n.rate:not(:checked)>label:before {\r\n    content: '\u2605 ';\r\n}\r\n\r\n.rate>input:checked~label {\r\n    color: #ffc700;\r\n}\r\n\r\n.rate:not(:checked)>label:hover,\r\n.rate:not(:checked)>label:hover~label {\r\n    color: #deb217;\r\n}\r\n\r\n.rate>input:checked+label:hover,\r\n.rate>input:checked+label:hover~label,\r\n.rate>input:checked~label:hover,\r\n.rate>input:checked~label:hover~label,\r\n.rate>label:hover~input:checked~label {\r\n    color: #c59b08;\r\n}\r\n<\/pre>\n
<\/span>feedbackCmp.html<\/span><\/h3>\n
<template>\r\n    <lightning-tile title='Provide Feedback'>\r\n        <div class=\"slds-m-top_medium slds-m-bottom_x-large\">\r\n            <div class=\"slds-p-around_medium lgc-bg\">\r\n                <lightning-tile label=\"Delivery Service\" type=\"media\">\r\n                    <lightning-avatar slot=\"media\"\r\n                        src=\"https:\/\/tse1.mm.bing.net\/th?id=OIP.DrJx7TuzS4K3-AWQGM0-pwHaE5&pid=Api&P=0&w=50&h=100\"\r\n                        fallback-icon-name=\"standard:person_account\" alternative-text=\"Delivery Service\"><\/lightning-avatar>\r\n                        <c-rating-cmp name='Delivery'><\/c-rating-cmp>\r\n                <\/lightning-tile>    \r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"slds-m-top_medium slds-m-bottom_x-large\">\r\n            <div class=\"slds-p-around_medium lgc-bg\">\r\n                <lightning-tile label=\"Pizza\" type=\"media\">\r\n                    <lightning-avatar slot=\"media\"\r\n                        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\"\r\n                        fallback-icon-name=\"standard:person_account\" alternative-text=\"Pizza\"><\/lightning-avatar>\r\n                        <c-rating-cmp name='Pizza'><\/c-rating-cmp>\r\n                <\/lightning-tile>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"slds-m-top_medium slds-m-bottom_x-large\">\r\n            <div class=\"slds-p-around_medium lgc-bg\">\r\n                <lightning-tile label=\"Burger\" type=\"media\">\r\n                    <lightning-avatar slot=\"media\" src=\"https:\/\/webstockreview.net\/images\/burger-clipart-bread-12.jpg\"\r\n                        fallback-icon-name=\"standard:person_account\" alternative-text=\"Burger\"><\/lightning-avatar>\r\n                        <c-rating-cmp name='Burger'><\/c-rating-cmp>\r\n                <\/lightning-tile>    \r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"slds-m-top_medium slds-m-bottom_x-large\">\r\n    \r\n            <div class=\"slds-p-around_medium lgc-bg\">\r\n                <lightning-tile label=\"Packaging\" type=\"media\">\r\n                    <lightning-avatar slot=\"media\"\r\n                        src=\"https:\/\/us.123rf.com\/450wm\/theblackrhino\/theblackrhino1410\/theblackrhino141000154\/33177495-stock-vector-yellow-generic-food-package-over-blue-background.jpg?ver=6\"\r\n                        fallback-icon-name=\"standard:person_account\" alternative-text=\"Packaging\"><\/lightning-avatar>\r\n                    <c-rating-cmp name='Package'><\/c-rating-cmp>\r\n                <\/lightning-tile>\r\n                <lightning-button label=\"Submit\" onclick={showRating}> <\/lightning-button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/lightning-tile>\r\n<\/template>\r\n<\/pre>\n
<\/span>feedbackCmp.js<\/span><\/h3>\n
import { LightningElement } from 'lwc';\r\n\r\nexport default class FeedbackCmp extends LightningElement {\r\n    showRating(){\r\n        this.template.querySelector('c-rating-cmp').getvalues();\r\n    }\r\n}\r\n<\/pre>\n
<\/span>feedbackCmp.css<\/span><\/h3>\n
* {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n<\/pre>\n
<\/span>feedbackCmp.js-meta.xml<\/span><\/h3>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<LightningComponentBundle xmlns=\"http:\/\/soap.sforce.com\/2006\/04\/metadata\">\r\n    <apiVersion>48.0<\/apiVersion>\r\n    <isExposed>true<\/isExposed>\r\n    <targets>\r\n    <target>lightning__AppPage<\/target>\r\n    <target>lightning__RecordPage<\/target>\r\n    <target>lightning__HomePage<\/target>\r\n<\/targets>\r\n<\/LightningComponentBundle>\r\n<\/pre>\n
<\/span>Code Explanation<\/span><\/h2>\n