How To Show Multiple Screens With Progress Indicator Bar on Modal Box in 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 :
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 :
To create ‘path’ style progress indicator you have need to add type=”path” attribute in your ‘lightning:progressIndicator‘ tag in lightning component.
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
Cute and cool. Thanks!!!
Thanks for your feedback @Gus
I’m getting this error
“TypeError”, message: “afterRender threw an error in ‘lightning:progressI…annot read property ‘parentElement’ of undefined
I can’t find why yet
Can i replace icon with Text?