How To Show Multiple Screens With Progress Indicator Bar on Modal Box in Lightning Component

Lightning Component

Hi friends, today we are going to create a sample salesforce lightning component for showing multiple screens with progress indicator bar inside a modal popup box.

with the winter 18 release we have ‘lightning:progressIndicator‘ out of the box component, which is Provides a visual indication on the progress of a particular process. this have came with 2 type of pattern, one is ‘base’ and other one is ‘path’ :

these progress indicator have useful when we are working with the multiple screens / steps scenario.

Now let’s start with our sample lightning component example, where we will manage multiple screens inside a custom modal popup box with progress indicators.

Output :

progress indicator sfdcmonkey.com

 

Step 1 : Create Lightning Component : modalWithProgress.cmp

From Developer Console >> File >> New >> Lightning Compoenent

<!--
 * sfdcmonkey.com 
 * 11/17/2017
 * support API 41.0 and above
 *-->
<aura:component >
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <!--currentStep attribute will control the steps of progress indicator-->
    <aura:attribute name="currentStep" type="string" default="1"/>
    <!--Use "slds-m-around_xx-large" class to add standard Large padding to the component--> 
    
    <div class="slds-m-around_xx-large">
        
        <lightning:button variant="brand" 
                          label="Click to Open"
                          title="Click to Open"
                          onclick="{! c.openModel }"/> 
        
        <!--Use aura:if tag to display Model Box, on the bese of conditions. [isOpen boolean attribute] -->    
        <aura:if isTrue="{!v.isOpen}">
            
            <!--###### MODAL BOX Start From Here ######--> 
            <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <!-- ###### MODAL BOX HEADER Part Start From Here ######-->
                    <div class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                        <h2 id="header99" class="slds-text-heading--medium">About Sfdcmonkey.com</h2>
                        <br/>
                        
                        <!--lightning progressIndicator start-->
                        <lightning:progressIndicator currentStep="{!v.currentStep}" type="base">
                            <lightning:progressStep label="Step One" value="1" onclick="{!c.selectFromHeaderStep1}"/>
                            <lightning:progressStep label="Step Two" value="2" onclick="{!c.selectFromHeaderStep2}"/>
                            <lightning:progressStep label="Step Three" value="3" onclick="{!c.selectFromHeaderStep3}"/>
                        </lightning:progressIndicator>
                    </div>
                    
                    <!--###### MODAL BOX BODY Part Start From Here ######-->
                    <div class="slds-modal__content slds-p-around_medium">
                        <!--showing 3 screens based on progress indicator steps-->
                        <div class="{!v.currentStep == '1' ? 'slds-show' : 'slds-hide'}" style="color:red" >
                            <p>Hello i am the Step 1</p>
                        </div>
                        <div class="{!v.currentStep == '2' ? 'slds-show' : 'slds-hide'}" style="color:green">
                            Hello i am the Step 2
                        </div>
                        <div class="{!v.currentStep == '3' ? 'slds-show' : 'slds-hide'}" style="color:blue" >
                            Hello i am the Step 3
                        </div>
                    </div>
                    
                    <!--###### MODAL BOX FOOTER Part Start From Here ######-->
                    <div class="slds-modal__footer slds-modal__footer_directional">
                        <lightning:button disabled="{!v.currentStep != '1' ? '' : 'disabled'}"
                                          variant="neutral" 
                                          label="Back"
                                          title="Back"
                                          onclick="{! c.moveBack }"/>
                        <aura:if isTrue="{!v.currentStep != '3'}">
                            <lightning:button variant="brand" 
                                              label="Next"
                                              title="Next"
                                              onclick="{! c.moveNext }"/>
                        </aura:if>
                        <aura:if isTrue="{!v.currentStep == '3'}"> 
                            <lightning:button variant="brand" 
                                              label="Finish"
                                              title="Finish"
                                              onclick="{! c.finish }"/>  
                        </aura:if>
                    </div>
                </div>
            </div>
            <div class="slds-backdrop slds-backdrop_open"></div>
            <!--###### MODAL BOX Part END Here ######-->
        </aura:if>
    </div>
</aura:component>
  • See Code Comments.

See Also : Create Modal/Popup Box In Lightning Component – Salesforce

Client Side JavaScript Controller : modalWithProgressController.js
/*
 * sfdcmonkey.com 
 * 11/17/2017
 * support API 41.0 and above
 */
({
   openModel: function(component, event, helper) {
    // for Display Model,set the "isOpen" attribute to "true"
      component.set("v.isOpen", true);
   },
    
   closeModel: function(component, event, helper) {
    // for Hide/Close Model,set the "isOpen" attribute to "Fasle"  
      component.set("v.isOpen", false);
   },
 
    moveNext : function(component,event,helper){
     // control the next button based on 'currentStep' attribute value    
     var getCurrentStep = component.get("v.currentStep");
        if(getCurrentStep == "1"){
            component.set("v.currentStep", "2");
        }
        else if(getCurrentStep == 2){
            component.set("v.currentStep", "3");
        }
    },
    
    moveBack : function(component,event,helper){
      // control the back button based on 'currentStep' attribute value    
        var getCurrentStep = component.get("v.currentStep");
         if(getCurrentStep == "2"){
            component.set("v.currentStep", "1");
         }
         else if(getCurrentStep == 3){
            component.set("v.currentStep", "2");
         }
    },
    
    finish : function(component,event,helper){
      // on last step show the alert msg, hide popup modal box and reset the currentStep attribute  
        alert('Thank You !');
        component.set("v.isOpen", false); 
        component.set("v.currentStep", "1");
    },
   
   // when user click direactly on step 1,step 2 or step 3 indicator then showing appropriate step using set 'currentStep'   
    selectFromHeaderStep1 : function(component,event,helper){
        component.set("v.currentStep", "1");
    },
    selectFromHeaderStep2 : function(component,event,helper){
        component.set("v.currentStep", "2");
    },
    selectFromHeaderStep3 : function(component,event,helper){
        component.set("v.currentStep", "3");
    },
})
  • See code comments.
From developer console >> file >> new >> Lightning Application
Step 1 : demo.app [Lightning Application]
<aura:application extends="force:slds">
    <c:modalWithProgress/>
<!-- here c: is org. default namespace prefix-->
</aura:application>

Output :

progress indicator sfdcmonkey.com

 

To create ‘path’ style progress indicator you have need to add type=”path” attribute in your ‘lightning:progressIndicator‘ tag in lightning component.

progress indicator
Path

 

Related Resource:

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can share your thoughts  in comment box.

Happy Learning 🙂

4 comments

Leave a Reply