Hello #Trailblazers,
In this blog post, we are going to talk how to create the rating component using Lightning Web Component
There are many use cases when we need to develop the rating component to display the rating for example survey result, interview feedback.
Step1 – Create Static Resource
Create a Static resource and name it fivestar and you can get the Static Resource. Five Star Rating
Step2 – Create a Lightning Web Component
Now, once you have create the Static resource, it’s time to Create the Rating Component.
- Create a Lightning Web Component
- use the code from the Given link
- Link to Code
Usage
Call the component from the parent component like below
<div >
<lightning-tile label="Salesforce" href="JavaScript:void(0);" type="media">
<c-five-star-rating value="5" onratingchange={handleRatingChanged} ></c-five-star-rating>
</lightning-tile>
</div>
Code Explanation
- value – In the code, you can see that I have passed one variable value which indicates what value you wanted to pass and the valid values are 1-5
- onratingchange – this is the event raised by the rating component which in return sends the rating value from 1-5
- readOnly – If you wanted your rating to be read-only then pass any value to this property like read-only=”yes”
- handleRatingChanged(event){ let rating=event.detail.rating; }
Step3 – Create a feedback Component
- Create a Lightning Web Component
- use the code from the Given link
- Link to Code
<!--
@description :
@author : Amit Singh
@group :
@last modified on : 12-18-2020
@last modified by : Amit Singh
Modifications Log
Ver Date Author Modification
1.0 12-18-2020 Amit Singh Initial Version
-->
<template>
<lightning-card title='Skill Set'>
<div class="slds-m-top_medium slds-m-bottom_x-small">
<div >
<lightning-tile label="Salesforce" href="JavaScript:void(0);" type="media">
<c-five-star-rating value="5" onratingchange={handleRatingChanged} ></c-five-star-rating>
</lightning-tile>
</div>
<div>
<lightning-tile label="Integration" href="JavaScript:void(0);" type="media">
<c-five-star-rating value="5" ></c-five-star-rating>
</lightning-tile>
</div>
<div>
<lightning-tile label="Lightning Development" href="JavaScript:void(0);" type="media">
<c-five-star-rating value="5" ></c-five-star-rating>
</lightning-tile>
</div>
<div >
<lightning-tile label="Admin" href="JavaScript:void(0);" type="media">
<c-five-star-rating value="5" ></c-five-star-rating>
</lightning-tile>
</div>
<div>
<lightning-tile label="Communities" href="JavaScript:void(0);" type="media">
<c-five-star-rating value="4" ></c-five-star-rating>
</lightning-tile>
</div>
<div>
<lightning-tile label="CI/CD" href="JavaScript:void(0);" type="media">
<c-five-star-rating value="4" ></c-five-star-rating>
</lightning-tile>
</div>
<div >
<lightning-tile label="Project Management" href="JavaScript:void(0);" type="media">
<c-five-star-rating value="3.5" ></c-five-star-rating>
</lightning-tile>
</div>
<div >
<lightning-tile label="MuleSoft" href="JavaScript:void(0);" type="media">
<c-five-star-rating value="3" ></c-five-star-rating>
</lightning-tile>
</div>
</div>
</lightning-card>
</template>
Step4 – Preview the Feedback Component
Now, as you have created the feedback component. You can add your component to either Aura Application, OR Lightning Pages to see the outcome. Refer below image
Thanks for reading
#Salesforce #DeveloperGeeks
Please like, share & Subscribe the Blog Post and YouTube Channel