Final Up to date on July 7, 2022 by Rakesh Gupta
Large Thought or Enduring Query:
- The right way to create a type with a progress bar within the lightning internet part?
Goals:
After studying this weblog, you’ll be capable to:
- Perceive what’s lightning-progress-bar discipline and tips on how to use it
- Create a type utilizing the lightning internet part
- Add a progress bar to your type
- and rather more
Prior to now written a couple of articles on Lightning Net Element. Why not test them out if you are at it?!
- Access Static Resources, Content Asset Files in Lightning Web Component
- Access Custom Labels in Lightning Web Component
- Add Confirmation, Alert, and Prompt Dialog Box to Lightning Web Component
Rachel Gillett is working as a Junior Developer at Gurukul on Cloud (GoC). By now, she has a good understanding of making a type utilizing the lightning internet part. Now she desires to discover ways to an add a progress bar to the shape, as proven under:
What’s a lightning-progress-bar part?
The lightning-progress-bar part shows a horizontal progress bar from left to proper to point the progress of an operation.
The progress bar is efficacious for eventualities corresponding to progress by way of a type, displaying downloading or importing info, and even displaying that the progress quantity is unknown, however work remains to be lively.
A progress bar will need to have each a begin tag (i.e. <lightning-progress-bar>) and an finish tag (i.e. </lightning-progress-bar>), as proven under.
<lightning-progress-bar worth={progress}>
</lightning-progress-bar>
Other than the aria-label and variant attributes, it will probably have two extra attributes:
- measurement – The scale of the progress bar. Legitimate values are x-small, small, medium, and enormous.
- Worth – Signifies the present standing of the progress bar. It have to be better than or equal to 0 and fewer than or equal to 100 or the worth of the max attribute (if current).
Automation Champion Strategy (I-do):
On this weblog submit, we’ll undergo the whole lot you’ll have to create a progress bar in your personal, and don’t fear; it’s tremendous easy.
progressBarExample.js-meta.xml
A lightning internet part can be utilized to construct customized pages for Lightning Expertise and the Salesforce cell app shortly with point-and-click instruments. Ensure that so as to add the suitable goal for it.
This configuration file makes the part obtainable for all Lightning web page sorts however restricts assist on desktops.
<?xml model="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://cleaning soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<goal>lightning__RecordPage</goal>
<goal>lightning__AppPage</goal>
<goal>lightning__HomePage</goal>
</targets>
</LightningComponentBundle>
progressBarExample.html
To reference a useful resource in a template, use {property} syntax (i.e. {progress} in our instance), which is identical syntax we use to reference any JavaScript property.
<!-- ProgressBarExample.html -->
<template>
<type>
<div
class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium">
<b>Progress Bar Instance</b>
</div>
<div class="slds-box slds-theme_default">
<div model="margin-left: 2%;">
<div>
<div class="slds-grid slds-grid_align-spread slds-p-bottom_x-small">
<span>Observe Progress</span>
<span aria-hidden="true">
<robust>{progress}% Full</robust>
</span>
</div>
</div>
<lightning-progress-bar
measurement="medium"
worth={progress}
variant="round">
</lightning-progress-bar>
</div>
<lightning-input
title="firstName"
label="First Title"
worth={firstName}
onchange={handleChange}>
</lightning-input>
<lightning-input
title="lastName"
label="Final Title"
worth={lastName}
onchange={handleChange}>
</lightning-input>
<lightning-input
kind="date"
title="birthdate"
label="Birthdate"
worth={birthdate}
onchange={handleChange}>
</lightning-input>
<lightning-input
kind="e mail"
title="emailAddress"
label="E mail Tackle"
worth={emailAddress}
onchange={handleChange}>
</lightning-input>
<lightning-input
kind="tel"
title="cell"
label="Cellular"
worth={cell}
onchange={handleChange}>
</lightning-input>
<div class="slds-m-top_small slds-align_absolute-center">
<lightning-button
variant="Impartial"
label="Reset"
class="slds-m-left_x-small"
onclick={handleReset}>
</lightning-button>
<lightning-button
variant="model"
class="slds-m-left_x-small"
label="Submit"
onclick={handleSubmit}>
</lightning-button>
</div>
</div>
</type>
</template>
progressBarExample.js
Right here’s the JavaScript that adjustments the worth of the progress bar. It will increase the progress bar by 20% as customers begin filling the shape discipline one by one.
//ProgressBarExample.js
import { LightningElement } from 'lwc';
export default class InputExample extends LightningElement() {
progress = 0;
emailAddress="";
cell="";
birthdate="";
firstName="";
lastName="";
handleChange(occasion) {
const discipline = occasion.goal.title;
if (discipline === 'firstName') {
this.firstName = occasion.goal.worth;
}
else if (discipline === 'lastName') {
this.lastName = occasion.goal.worth;
}
else if (discipline === 'cell') {
this.cell = occasion.goal.worth;
}
else if (discipline === 'emailAddress') {
this.emailAddress = occasion.goal.worth;
}
else if (discipline === 'birthdate') {
this.birthdate = occasion.goal.worth;
}
this.fieldsCompleted();
}
fieldsCompleted() {
var numVal = 0;
if (this.firstName != null && this.firstName != '') {
numVal = numVal + 1;
}
if (this.lastName != null && this.lastName != '') {
numVal = numVal + 1;
}
if (this.birthdate != null && this.birthdate != '') {
numVal = numVal + 1;
}
if (this.emailAddress != null && this.emailAddress !='') {
numVal = numVal + 1;
}
if (this.cell != null && this.cell !='') {
numVal = numVal + 1;
}
this.progressBar(numVal);
}
progressBar(numVal) {
if (numVal >= 1) {
this.progress = numVal * 20;
}
else {
this.progress = 0;
}
}
handleSubmit() {
}
handleReset() {
this.progress = 0;
this.emailAddress="";
this.cell="";
this.birthdate="";
this.firstName="";
this.lastName="";
}
}
Formative Evaluation:
I wish to hear from you!
What’s one factor you realized from this submit? How do you envision making use of this new data in the true world? Be at liberty to share within the feedback under.
