Big Idea or Enduring Question:

How to create a form with a progress bar in the lightning web component?

Objectives:

After reading this blog, you’ll be able to:

Understand what is lightning-progress-bar field and how to use it
Create a form using the lightning web component
Add a progress bar to your form
and much more

In the past written a few articles on Lightning Web Component. Why not check them out while you are at it?!

Business Use case

Rachel Gillett is working as a Junior Developer at Gurukul on Cloud (GoC). By now, she has a fair understanding of creating a form using the lightning web component. Now she wants to learn how to an add a progress bar to the form, as shown below:

What is a lightning-progress-bar component?

The lightning-progress-bar component displays a horizontal progress bar from left to right to indicate the progress of an operation.

The progress bar is valuable for scenarios such as progress through a form, displaying downloading or uploading information, or even showing that the progress amount is unknown, but work is still active.

A progress bar must have both a start tag (i.e. <lightning-progress-bar>) and an end tag (i.e. </lightning-progress-bar>), as shown below.

Copy Code Copied Use a different Browser


<lightning-progress-bar value={progress}> 
</lightning-progress-bar>

Apart from the aria-label and variant attributes, it can have two more attributes:

size – The size of the progress bar. Valid values are x-small, small, medium, and large.
Value – Indicates the current status of the progress bar. It must be greater than or equal to 0 and less than or equal to 100 or the value of the max attribute (if present).

Automation Champion Approach (I-do):

In this blog post, we’ll go through everything you’ll need to create a progress bar for your own, and don’t worry; it’s super simple.

progressBarExample.js-meta.xml

A lightning web component can be used to build custom pages for Lightning Experience and the Salesforce mobile app quickly with point-and-click tools. Make sure to add the right target for it.

This configuration file makes the component available for all Lightning page types but restricts support on desktops.

Copy Code Copied Use a different Browser


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

progressBarExample.html

To reference a resource in a template, use {property} syntax (i.e. {progress} in our example), which is the same syntax we use to reference any JavaScript property.

Copy Code Copied Use a different Browser


<!-- ProgressBarExample.html -->
<template>
    <form>
        <div
            class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium">
            <b>Progress Bar Example</b>
        </div>
        <div class="slds-box slds-theme_default">
            <div style="margin-left: 2%;">
                <div>
                    <div class="slds-grid slds-grid_align-spread slds-p-bottom_x-small">
                        <span>Track Progress</span>
                        <span aria-hidden="true">
                            <strong>{progress}% Complete</strong>
                        </span>
                    </div>
                </div>
            <lightning-progress-bar 
                size="medium" 
                value={progress} 
                variant="circular">
            </lightning-progress-bar>
            </div>
            <lightning-input 
                name="firstName" 
                label="First Name" 
                value={firstName} 
                onchange={handleChange}>
            </lightning-input>
            <lightning-input 
                name="lastName" 
                label="Last Name" 
                value={lastName} 
                onchange={handleChange}>
            </lightning-input>
            <lightning-input 
                type="date" 
                name="birthdate" 
                label="Birthdate" 
                value={birthdate} 
                onchange={handleChange}>
            </lightning-input>
            <lightning-input 
                type="email" 
                name="emailAddress" 
                label="Email Address" 
                value={emailAddress}
                onchange={handleChange}>
            </lightning-input>
            <lightning-input 
                type="tel" 
                name="mobile" 
                label="Mobile" 
                value={mobile} 
                onchange={handleChange}>
            </lightning-input>
        <div class="slds-m-top_small slds-align_absolute-center">
            <lightning-button 
                 variant="Neutral" 
                 label="Reset" 
                 class="slds-m-left_x-small" 
                 onclick={handleReset}>
            </lightning-button>
            <lightning-button 
                 variant="brand" 
                 class="slds-m-left_x-small" 
                 label="Submit" 
                 onclick={handleSubmit}>
            </lightning-button>
        </div>
        </div>
    </form>
</template>

progressBarExample.js

Here’s the JavaScript that changes the value of the progress bar. It increases the progress bar by 20% as users start filling the form field one at a time.

Copy Code Copied Use a different Browser


//ProgressBarExample.js
import { LightningElement } from 'lwc';

export default class InputExample extends LightningElement() {

    progress = 0;
    emailAddress = '';
    mobile = '';
    birthdate = '';
    firstName = '';
    lastName = '';

    handleChange(event) {
    const field = event.target.name;
        if (field === 'firstName') {
            this.firstName = event.target.value;
        } 
        else if (field === 'lastName') {
            this.lastName = event.target.value;
        }
        else if (field === 'mobile') {
            this.mobile = event.target.value;
        }
        else if (field === 'emailAddress') {
            this.emailAddress = event.target.value;
        }
        else if (field === 'birthdate') {
            this.birthdate = event.target.value;
        }
        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.mobile != null && this.mobile !='') {
            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.mobile = '';
        this.birthdate = '';
        this.firstName = '';
        this.lastName = '';
    }
}

Formative Assessment:

I want to hear from you!

What is one thing you learned from this post? How do you envision applying this new knowledge in the real world? Feel free to share in the comments below.