Lightning-progress-indicator in lwc with example

 In this blog post we will learn about "Lightning-progress-indicator in lwc".

A lightning-progress-indicator component displays steps horizontally. It indicates the number of steps in a given process, the current step, as well as prior steps which is completed.

Steps are created using lightning-progress-step component along with label and value attributes. The current step is specified using the current-step attribute, The current step must match one of the value attributes on a lightning-progress-step component as shown below.

• Set type="base" to create a component that implements the progress indicator blueprint in the Lightning Design System. 

          A progress indicator component communicates to the user the progress of a particular process.

     

• Set type="path" to create a component that implements the path blueprint in the Lightning Design System. 

          The Path communicates to the user the progress of a particular process.

• If the type is not specified, the default type base is used. 

<template>

    <lightning-progress-indicator type="path" current-step="account">

        <lightning-progress-step label="Account" value="account">

        </lightning-progress-step>

        <lightning-progress-step label="Contact" value="contact">

        </lightning-progress-step>

        <lightning-progress-step label="Opportunity" value="opportunity">

        </lightning-progress-step>

    </lightning-progress-indicator>

</template>

Let us take an example for detail understanding.

lightningprogressindicator.html

<template>

    <div class="slds-theme_default">

        <div class="slds-p-around_medium">

    <lightning-progress-indicator type="path" current-step={selectedStep}>

        <lightning-progress-step label="Account" value="account" onclick={selectStepAccount}>

        </lightning-progress-step>

        <lightning-progress-step label="Contact" value="contact" onclick={selectStepContact}>

        </lightning-progress-step>

        <lightning-progress-step label="Opportunity" value="opportunity" onclick={selectStepOpportunity}>

        </lightning-progress-step>

    </lightning-progress-indicator>

   

    <div class="slds-m-vertical_medium">

    <lightning-button label="Next" onclick={nextStep}></lightning-button>

    <lightning-button label="Previous" onclick={previousStep}></lightning-button>

</div>

</div>

</div>

</template>

lightningprogressindicator.js

import { LightningElement, track } from 'lwc';

 

export default class Lightningprogressindicator extends LightningElement {

    @track selectedStep ='account';

    nextStep(){

    var moveToNextStep = this.selectedStep;

    if(this.selectedStep == 'contact'){

        alert('Next step is opportunity');

        this.selectedStep = 'opportunity';

    }

    else if(this.selectedStep == 'account'){

        alert('Next step is contact');

        this.selectedStep = 'contact';

    }

    }

    previousStep(){

        var moveToPreviousStep = this.selectedStep;

        if(this.selectedStep == 'contact'){

            alert('Previous step is account');

            this.selectedStep = 'account';

        }

        else if(this.selectedStep == 'opportunity'){

            alert('Previous step is contact');

            this.selectedStep = 'contact';

        }

    }

     selectStepAccount(){

        alert('Selected step is account');

        this.selectedStep = 'account';

    }

     selectStepContact(){

        alert('Selected step is contact');

        this.selectedStep = 'contact';

    }

     selectStepOpportunity(){

        alert('Selected step is opportunity');

        this.selectedStep = 'opportunity';

    }

}

lightningprogressindicator.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>55.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Now, let's add it to record page to see the result.

Now, click on "Next" button.