+ Start a Discussion
Christian Schwabe 9Christian Schwabe 9 

LWC: Progress Indicator (current step)

Hi my friends,

currently I'm struggeling with the "current-step"-parameter on the lightning progress indictator (lightning-progress-indicator) in lightning web components.

I have a progress indicator:
<lightning-progress-indicator class="slds-align_absolute-center" current-step={currentStep} type="base" variant="base">
                                        <lightning-progress-step label="VIEW DUPLICATES" value=1></lightning-progress-step>
                                        <lightning-progress-step label="COMPARE RECORDS" value=2></lightning-progress-step>
                                        <lightning-progress-step label="CONFIRM MERGING" value=3></lightning-progress-step>
                                    </lightning-progress-indicator>

and a button that should switch the current step:
<lightning-button variant="brand" label="Next" title="Next" disabled={nextButtonDisabled} onclick={handleNext}></lightning-button>
and a corresponding eventhandler-method:
handleNext(){
        console.log('>>>handleNext in mergeDuplicates.js called.');
        console.log('>>>this.currentStep: ' + this.currentStep);

        switch (this.currentStep) {
            case 1:
                this.currentStep = 2;
                break;
            case 2:
                this.currentStep = 3;
                break;
            default:
                break;
        }

        console.log('>>>this.currentStep: ' + this.currentStep);
    }

The eventhandler-method is called correctly (I see it in the console), but and that's is the part I don't understand: The current-step of progress indicator is not changed visually.

Anyone an idea for the reason?

I am grateful for any help.


Best regards,
Chris
Best Answer chosen by Christian Schwabe 9
Alain CabonAlain Cabon
@Chris,    it seems that numeric values don't work.
 
import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
   @track currentStep = "1";

   handleNext(){
        console.log('>>>handleNext in mergeDuplicates.js called.');
        console.log('>>>this.currentStep: ' + this.currentStep);
        switch (this.currentStep) {
            case "1":
                this.currentStep ="2";
                break;
            case "2":
                this.currentStep = "3";
                break;
            default:
                this.currentStep = "1";
                break;
        }
        console.log('>>>this.currentStep: ' + this.currentStep);
    }
}
 
<template>
    <lightning-progress-indicator class="slds-align_absolute-center" current-step={currentStep} type="base" variant="base">
              <lightning-progress-step label="VIEW DUPLICATES" value="1"></lightning-progress-step>
              <lightning-progress-step label="COMPARE RECORDS" value="2"></lightning-progress-step>
              <lightning-progress-step label="CONFIRM MERGING" value="3"></lightning-progress-step>
    </lightning-progress-indicator>
    <lightning-button variant="brand" label="Next" title="Next" disabled={nextButtonDisabled} onclick={handleNext}></lightning-button>
</template>

 

All Answers

Alain CabonAlain Cabon
@Chris,    it seems that numeric values don't work.
 
import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
   @track currentStep = "1";

   handleNext(){
        console.log('>>>handleNext in mergeDuplicates.js called.');
        console.log('>>>this.currentStep: ' + this.currentStep);
        switch (this.currentStep) {
            case "1":
                this.currentStep ="2";
                break;
            case "2":
                this.currentStep = "3";
                break;
            default:
                this.currentStep = "1";
                break;
        }
        console.log('>>>this.currentStep: ' + this.currentStep);
    }
}
 
<template>
    <lightning-progress-indicator class="slds-align_absolute-center" current-step={currentStep} type="base" variant="base">
              <lightning-progress-step label="VIEW DUPLICATES" value="1"></lightning-progress-step>
              <lightning-progress-step label="COMPARE RECORDS" value="2"></lightning-progress-step>
              <lightning-progress-step label="CONFIRM MERGING" value="3"></lightning-progress-step>
    </lightning-progress-indicator>
    <lightning-button variant="brand" label="Next" title="Next" disabled={nextButtonDisabled} onclick={handleNext}></lightning-button>
</template>

 
This was selected as the best answer
Christian Schwabe 9Christian Schwabe 9
Hi Alain,

thank you for your support. That fix my problem!


Regards,
Chris