I building a custom progress builder, if my stage is closed lost all the stages before my closed stage is appearing in green , but in standard component it not showing green color.

Image : enter image description here

my code:

 <lightning:progressIndicator currentStep="{!v.CurrentStep}" type="path" variant="base">
                        <aura:iteration items="{! v.AllStagesList }" var="step">
                            <aura:if isTrue="{!step != 'Closed Lost'}">                
                                <lightning:progressStep class="slds-is-incomplete" label="{! step }" value="{! step }" onclick="{!c.onClickProgressIndicatorSteps}"/>
                                <aura:set attribute="else">
                                    <lightning:progressStep class="slds-is-lost" label="{! step }" value="{! step }" onclick="{!c.onClickProgressIndicatorSteps}"/>

Plz help!!

  • Your progressStep is using the slds-is-incomplete class. Change that class accordingly to either show nothing or a green completed stage (like slds-is-complete) – Brian Miller Dec 10 '19 at 10:31
  • @BrianMiller how to make a ProgressIndicator grey background once it is closed lost – Raja Sabarish Dec 10 '19 at 10:47
  • I thought slds-is-incomplete would do the trick. Try google chrome inspecting the standard component on those path items to see what slds classes they're using. – Brian Miller Dec 10 '19 at 10:49
  • Also, I would edit your question to indicate that you want the grey background items - I didn't realize that's what you wanted from the original question – Brian Miller Dec 10 '19 at 10:50
  • @BrianMiller I wiill try chrome inspecting – Raja Sabarish Dec 10 '19 at 12:24

I'm not sure if Progress Indicator is the component you want for your UX needs. Progress Indicator is meant to show linear progression, where all previously completed steps are meant to be successful. It doesn't support a concept of "Lost", and you would not have the ability to suppress the "slds-is-complete" class on previous steps (it's baked into the component, and its presence intentionally overrides css declarations applied to "slds-is-incomplete").

For your needs, you really need to use the Path component. This component is tailored towards those user interface states, and was designed to support the case you have.

Please check out the documentation here to get more information about the Path component: https://developer.salesforce.com/docs/component-library/bundle/lightning:path/documentation

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.