LWC Multi Step Wizard

Biswajeet   September 29, 2020   No Comments on LWC Multi Step Wizard

LWCWizard.html

<template>
    <lightning-progress-indicator current-step={currentStep} type="base" variant="base">
        <lightning-progress-step label="Step 1" value="1" onclick={handleOnStepClick}></lightning-progress-step>
        <lightning-progress-step label="Step 2" value="2" onclick={handleOnStepClick}></lightning-progress-step>
        <lightning-progress-step label="Step 3" value="3" onclick={handleOnStepClick}></lightning-progress-step>
    </lightning-progress-indicator>
    
    <template if:true={isStepOne}>
        <div>
            Step 1
        </div>
    </template>
    <template if:true={isStepTwo}>
        <div>
            Step 2
        </div>
    </template>
    <template if:true={isStepThree}>
        <div>
            Step 3
        </div>
    </template>
    
    <template if:true={isEnablePrev}>
        <lightning-button variant="base" label="Back" onclick={handlePrev}></lightning-button>
    </template>
    
    <template if:true={isEnableNext}>
        <lightning-button label="Next" variant="brand" onclick={handleNext}></lightning-button>
    </template>
    <template if:true={isEnableFinish}>
        <lightning-button label="Finish" variant="brand" onclick={handleFinish}></lightning-button>
    </template>
</template>

LWCWizard.js

import { LightningElement, track} from 'lwc';

export default class LWCWizard extends LightningElement {

    @track currentStep = '1';

    handleOnStepClick(event) {
        this.currentStep = event.target.value;
    }

    get isStepOne() {
        return this.currentStep === "1";
    }

    get isStepTwo() {
        return this.currentStep === "2";
    }

    get isStepThree() {
        return this.currentStep === "3";
    }

    get isEnableNext() {
        return this.currentStep != "3";
    }

    get isEnablePrev() {
        return this.currentStep != "1";
    }

    get isEnableFinish() {
        return this.currentStep === "3";
    }

    handleNext(){
        if(this.currentStep == "1"){
            this.currentStep = "2";
        }
        else if(this.currentStep = "2"){
            this.currentStep = "3";
        }
    }

    handlePrev(){
        if(this.currentStep == "3"){
            this.currentStep = "2";
        }
        else if(this.currentStep = "2"){
            this.currentStep = "1";
        }
    }

    handleFinish(){

    }
}

To create “base” style progress indicator you have need to add type="base" attribute in your lightning-progress-indicator tag in lightning component.

To create “path” style progress indicator you have need to add type="path" attribute in your lightning-progress-indicator tag in lightning component.