You need to sign in to do that
Don't have an account?
Jaanu
lightning progress bar question?
I am trying to creating a progress bar in lightning with 4 stages... somehow it's not appearing properly ... Pls look at my code and suggest what is wrong...
I am following this - https://developer.salesforce.com/events/webinars/singlepagelightning
The output is not even close ... I don't see any progress bar ... just text with large box...
<div class="c-container">
<lightning:layout horizontalAlign="space">
<lightning:layoutItem flexibility="auto" padding="around-small">
<h3 class="slds-section-title--divider">Patient Journey</h3>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<!-- Progress Bar-->
<div class="slds-grid">
<div class="slds-tabs--path" role="application">
<ul class="slds-tabs--path__nav" role="tablist">
<li aura:id="accountIndicator" class="slds-tabs--path__item slds-is-current" role="presentation">
<a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
<span class="slds-tabs--path__stage">
<lightning:icon iconName="utility:check " size="x-small" alternativeText="Account Intake"/>
</span>
<span class="slds-tabs--path__title">Create A/C</span>
</a>
</li>
<li aura:id="caseIndicator" class="slds-tabs--path__item slds-is-incomplete" role="presentation">
<a class="slds-tabs--path__link" id="tabs-path-2" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
<span class="slds-tabs--path__stage">
<lightning:icon iconName="utility:check " size="x-small" alternativeText="Account Intake"/>
</span>
<span class="slds-tabs--path__title">Create Account Case</span>
</a>
</li>
<li aura:id="stageIndicator" class="slds-tabs--path__item slds-is-incomplete" role="presentation">
<a class="slds-tabs--path__link" id="tabs-path-3" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
<span class="slds-tabs--path__stage">
<lightning:icon iconName="utility:check " size="x-small" alternativeText="Patient Intake"/>
</span>
<span class="slds-tabs--path__title">Create Account Stage</span>
</a>
</li>
<li aura:id="reviewIndicator" class="slds-tabs--path__item slds-is-incomplete" role="presentation">
<a class="slds-tabs--path__link" id="tabs-path-4" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
<span class="slds-tabs--path__stage">
<lightning:icon iconName="utility:check " size="x-small" alternativeText="Patient Intake"/>
</span>
<span class="slds-tabs--path__title">Review</span>
</a>
</li>
</ul>
</div>
</div>
</lightning:layoutItem>
</lightning:layout>
</div>
I am following this - https://developer.salesforce.com/events/webinars/singlepagelightning
The output is not even close ... I don't see any progress bar ... just text with large box...
<div class="c-container">
<lightning:layout horizontalAlign="space">
<lightning:layoutItem flexibility="auto" padding="around-small">
<h3 class="slds-section-title--divider">Patient Journey</h3>
</lightning:layoutItem>
<lightning:layoutItem flexibility="auto" padding="around-small">
<!-- Progress Bar-->
<div class="slds-grid">
<div class="slds-tabs--path" role="application">
<ul class="slds-tabs--path__nav" role="tablist">
<li aura:id="accountIndicator" class="slds-tabs--path__item slds-is-current" role="presentation">
<a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
<span class="slds-tabs--path__stage">
<lightning:icon iconName="utility:check " size="x-small" alternativeText="Account Intake"/>
</span>
<span class="slds-tabs--path__title">Create A/C</span>
</a>
</li>
<li aura:id="caseIndicator" class="slds-tabs--path__item slds-is-incomplete" role="presentation">
<a class="slds-tabs--path__link" id="tabs-path-2" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
<span class="slds-tabs--path__stage">
<lightning:icon iconName="utility:check " size="x-small" alternativeText="Account Intake"/>
</span>
<span class="slds-tabs--path__title">Create Account Case</span>
</a>
</li>
<li aura:id="stageIndicator" class="slds-tabs--path__item slds-is-incomplete" role="presentation">
<a class="slds-tabs--path__link" id="tabs-path-3" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
<span class="slds-tabs--path__stage">
<lightning:icon iconName="utility:check " size="x-small" alternativeText="Patient Intake"/>
</span>
<span class="slds-tabs--path__title">Create Account Stage</span>
</a>
</li>
<li aura:id="reviewIndicator" class="slds-tabs--path__item slds-is-incomplete" role="presentation">
<a class="slds-tabs--path__link" id="tabs-path-4" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
<span class="slds-tabs--path__stage">
<lightning:icon iconName="utility:check " size="x-small" alternativeText="Patient Intake"/>
</span>
<span class="slds-tabs--path__title">Review</span>
</a>
</li>
</ul>
</div>
</div>
</lightning:layoutItem>
</lightning:layout>
</div>
Hi,
I think you got mixed up with progress bar and Path.
Please check this out:
Progress Bar:- https://www.lightningdesignsystem.com/components/progress-bar/#site-main-content
Path :- https://www.lightningdesignsystem.com/components/path/#site-main-content
These link will help you i believe.
Regards.
<li aura:id="accountIndicator" class="slds-path__item slds-is-complete" role="presentation">
<a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
<span class="slds-tabs--path__stage">
<lightning:icon iconName="utility:check " size="x-small" alternativeText="Patient Intake"/>
</span>
<span class="slds-tabs--path__title">Create Patient A/C</span>
</a>
</li>
<li aura:id="caseIndicator" class="slds-tabs--path__item slds-is-current" role="presentation">
<a class="slds-tabs--path__link" id="tabs-path-2" aria-controls="content-path-1" aria-selected="true" tabindex="0" role="tab" href="javascript:void(0);" aria-live="assertive">
<span class="slds-tabs--path__stage">
<lightning:icon iconName="utility:check " size="x-small" alternativeText="Patient Intake"/>
</span>
<span class="slds-tabs--path__title">Create Patient Case</span>
</a>
</li>
Hi ,
check this out :
based on the attribute value , if its not 'check' the stage is set as complete.the check mark is also shown as complete .
check the class in the li tag.
regards.
<li class="{!v.status=='check'?'slds-path__item slds-is-active slds-is-current':'slds-path__item slds-is-complete'}" role="presentation">
This is the code itested.
Its working for me.
this is class for that completion of a stage ' slds-path__item slds-is-complete'.
can you try using the above code and check the difference.
Regards.