Create a Form with a Progress Bar in Lightning Web Component

Create a Form with a Progress Bar in Lightning Web Component

Last Updated on June 24, 2022 by Rakesh Gupta

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?!

  1. Access Static Resources, Content Asset Files in Lightning Web Component
  2. Access Custom Labels in Lightning Web Component
  3. Add Confirmation, Alert, and Prompt Dialog Box to Lightning Web Component

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. 

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

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

  1. size – The size of the progress bar. Valid values are x-small, small, medium, and large. 
  2. 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 the home page only for desktops.

<?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.

<!-- 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.

//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.

Have feedback, suggestions for posts, or need more information about Salesforce online training offered by me? Say hello, and leave a message!

2 thoughts on “Create a Form with a Progress Bar in Lightning Web Component

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.