function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
JaanuJaanu 

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>
Balagopal GBalagopal G

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.

 

 

JaanuJaanu
I have the following code for path ... everything looks fine... except the "Check Mark" when the satge is completed. For some reason the check mark is not getting it ... any help please ?

 <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>
Balagopal GBalagopal G

Hi ,

check this out :

<aura:attribute name="status" type="String" default="test"/>


     <div class="slds-path" style="margin-top: 2em;">
                        <div class="slds-grid slds-path__track">
                            <div class="slds-grid slds-path__scroller-container">
                                  <div class="slds-path__scroller" role="application">
                                    <div class="slds-path__scroller_inner">
                                        <ul class="slds-path__nav" role="listbox" aria-orientation="horizontal">
 <li class="{!v.status=='check'?'slds-path__item slds-is-active  slds-is-current':'slds-path__item slds-is-complete'}" role="presentation">
                                              <span aria-selected="true" class="slds-path__link" href="javascript:void(0);" id="path-1" role="option" tabindex="0">
                                                <span class="slds-path__stage">
                                                      <lightning:icon iconName="utility:check" variant="inverse" size="x-small" alternativeText="Stage Complete"/>
                                                  <span class="slds-assistive-text">Stage Complete</span>
                                                </span>
                                                <span class="slds-path__title">check</span>
                                              </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                         </div>
         </div>
 

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.

JaanuJaanu
It did not work .. I have changed the following line of code ... still I don't see the check mark ...I can see the green color (this was happening before also)...
JaanuJaanu
this line of code I changed ... anything else needs to be done pleae ?

<li class="{!v.status=='check'?'slds-path__item slds-is-active  slds-is-current':'slds-path__item slds-is-complete'}" role="presentation">
Balagopal GBalagopal G
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
  
<aura:attribute name="status" type="String" default="test"/>


     <div class="slds-path" style="margin-top: 2em;">
                        <div class="slds-grid slds-path__track">
                            <div class="slds-grid slds-path__scroller-container">
                                  <div class="slds-path__scroller" role="application">
                                    <div class="slds-path__scroller_inner">
                                        <ul class="slds-path__nav" role="listbox" aria-orientation="horizontal">
 <li class="{!v.status=='check'?'slds-path__item slds-is-active  slds-is-current':'slds-path__item slds-is-complete'}" role="presentation">
                                              <span aria-selected="true" class="slds-path__link" href="javascript:void(0);" id="path-1" role="option" tabindex="0">
                                                <span class="slds-path__stage">
                                                      <lightning:icon iconName="utility:check" variant="inverse" size="x-small" alternativeText="Stage Complete"/>
                                                  <span class="slds-assistive-text">Stage Complete</span>
                                                </span>
                                                <span class="slds-path__title">check</span>
                                              </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                         </div>
         </div>

</aura:component>

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.
JaanuJaanu
I tried ... I am getting "Check" text with green color background ... but I am really expecting "\/" (not V ... I mean check symbol ).. in the examples.. they show the that...but I am not getting it ...