1

enter image description here

lightning:progressIndicator - How can I show all the steps as completed (with tick mark) as shown in the attachment.

2

According to lightning:progessIndicator,

You have to make currentstep value as the last value present in the lightning:progressStep

So in your image, you have 3 steps, you have to make currentStep as '3'

<lightning:progressIndicator currentStep="3" type="base" hasError="false" variant="base">
        <lightning:progressStep label="Step 1" value="1"/>
        <lightning:progressStep label="Step 2" value="2"/>
        <lightning:progressStep label="Step 3" value="3"/>

    </lightning:progressIndicator>
2
  • It does not work. It shows the last step as current but not as completed... – Elastep Sep 19 '19 at 19:43
  • Does not work for me neither... – Charles dB Jul 20 '20 at 11:53
0

THIS is how to do it correctly.... Spent an hour trying to figure it out...

    <lightning:progressIndicator  currentStep="AllDone" type="base" hasError="false" variant="base" >
            <lightning:progressStep label="Step1" value="Step1"/>
            <lightning:progressStep label="Step2" value="Step2" />
            <lightning:progressStep label="All Done" value="AllDone" class="slds-hide" />
        </lightning:progressIndicator>
0

Try this. I built on top of Elastep's idea. It didn't work with just class="slds-hide", I had to add <template if:true={allDone}> around it. I also assumed there is some trigger that completes the "path" which in my case is the Complete button.

ProgressIndicatorBasic.html

<template>
    <lightning-card title="Progress Indicator">
        <lightning-button label="Complete" slot="actions" onclick={handleCompleteProgressBar}></lightning-button>
        <p class="slds-p-vertical_large">
            
            <lightning-progress-indicator current-step={currentStep} type={type} has-error={hasError} variant={variant}>
                <template for:each={steps} for:item="step">
                    <lightning-progress-step label={step.label} value={step.value} key={step.label} onclick={handleActivateStep}></lightning-progress-step>
                </template>
                <template if:true={allDone}>
                    <lightning-progress-step label="All Done" value="alldone" class="slds-hide"></lightning-progress-step>
                </template>
            </lightning-progress-indicator> 

        </p>  
    </lightning-card>      
</template>

ProgressIndicatorBasic.js

import { LightningElement} from 'lwc';

const STEPS = [
    {"label":"Step 1","value":"1"},
    {"label":"Step 2","value":"2"},
    {"label":"Step 3","value":"3"}
];

export default class ProgressIndicatorBasic extends LightningElement {
    
    // Default values
    activeStep = 1;
    type = 'base';
    variant = 'base';
    hasError = false;
    allDone = false;

    get steps() {
        return STEPS;
    }

    get currentStep() {
        return this.activeStep.toString();
    }

    handleActivateStep(event) {
        if(this.currentStep == 'alldone') {
            this.allDone = false; // reset allDone and hide it
        }
        this.activeStep = (event.target.value != '' && event.target.value != null && typeof event.target.value != 'undefined') ? event.target.value : this.activeStep;
    }

    handleCompleteProgressBar() {
        this.activeStep = 'alldone';
        this.allDone = true;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.