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
ryanschierholzryanschierholz 

How do you return the value of a clicked step in a Progress Indicator path?

I am building a custom page, and I want certain items to show depending on which step in a path is clicked, but not yet active/updated. Pretty much similar to the built-in Guidance for Success on objects; as you click each step, the data below changes, even before you Mark as Current Step. 

Here is my lightning-progress-indicator path. I would love to get the value of the selected lightning-progress-step 
<lightning-progress-indicator id="phasePath"  current-step={phaseValue} type="path" variant="base" onclick={handlePathClick}>
                                <lightning-progress-step label="Welcome" value="PX"></lightning-progress-step>
                                <lightning-progress-step label="Getting Started" value="P0"></lightning-progress-step>
                                <lightning-progress-step label="Get Licensed" value="P1"></lightning-progress-step>
                                <lightning-progress-step label="Orientation" value="P2"></lightning-progress-step>
                                <lightning-progress-step label="Mentorship" value="P3"></lightning-progress-step>
                            </lightning-progress-indicator>

 
Best Answer chosen by ryanschierholz
ryanschierholzryanschierholz
I was able to find the answer. I updated the progress indicator to use an array: 
<lightning-progress-indicator if:false={showPX}
                id="phasePath" 
                current-step={phaseValue}  
                type="path" 
                variant="base"
                class="slds-m-around_small">
                <template for:each={steps} for:item="step">
                    <lightning-progress-step 
                        label={step.label} 
                        value={step.value} 
                        key={step.value}
                        onstepfocus={handlePathFocus}
                        ></lightning-progress-step>
                </template>
            </lightning-progress-indicator>

Then used the onstepfocus to run the handlePathFocus in js and get the index of the step clicked (event.detail.index):
  
handlePathFocus(event){
        event.preventDefault();     

        const stepIndex = event.detail.index;


        for (let i in this.steps){
            this.steps[i].visible = false;
        }
        this.steps[event.detail.index].visible = true;
    }