function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ 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