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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!-- * 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
/* * 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]
|
1 2 3 4 5 6 7 8 |
<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?