Salesforce Asked by user65190 on January 12, 2021
lightning:progressIndicator – How can I show all the steps as completed (with tick mark) as shown in the attachment.
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;
}
}
Answered by Tomasz Piechota on January 12, 2021
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>
Answered by Elastep on January 12, 2021
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>
Answered by Pranay Jaiswal on January 12, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP