Open Lightning Modal With Progress Indicator Using Lightning Component

Arun Garg   4/18/2018   salesforce lightning, salesforce lightning company, salesforce lightning consultant, salesforce lightning developer   2 comments  

Here, I am displaying salesforce lightning modal with a progress indicator in footer using lightning component.

In this article, you will be able to open modal on click button and close the modal and add progress indicator in a footer.

Let's start process step by steps:

Step 1: Create lighting component 'ProgressIndicator.cmp' and use below code.

<aura:component >     <aura:attribute name="showpage1" type="boolean" default="true"/>     <aura:attribute name="showpage2" type="boolean" default="false"/>     <aura:attribute name="showpage3" type="boolean" default="false"/>     <aura:attribute name="openModal" type="boolean" default="false"/>     <aura:attribute name="currentstep" type="String" default="step1"/>     <lightning:button variant="brand" label="Open" onclick="{!c.openModal}" />     <aura:if isTrue="{!v.openModal}">         <div class="demo-only" style="height: 640px;">             <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-slide-up-open">                 <div class="slds-modal__container">                     <header class="slds-modal__header">                         <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick="{!c.hideModal}">                             <lightning:icon iconName="utility:close" size="small" alternativeText="Close"/>                         </button>                         <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header</h2>                     </header>                     <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">                         <aura:if isTrue="{!v.showpage1}">                             <p>Step 1</p>                         </aura:if>                         <aura:if isTrue="{!v.showpage2}">                             <p>Step 2</p>                         </aura:if>                         <aura:if isTrue="{!v.showpage3}">                             <p>Step 3</p>                         </aura:if>                     </div>                     <footer class="slds-modal__footer slds-modal__footer_directional">                         <lightning:progressIndicator currentStep="{!v.currentstep}">                             <lightning:progressStep label="Step 1" value="step1" onclick="{!c.page1}"/>                             <lightning:progressStep label="Step 2" value="step2" onclick="{!c.page2}"/>                             <lightning:progressStep label="Step 3" value="step3" onclick="{!c.page3}"/>                         </lightning:progressIndicator>                     </footer>                 </div>             </section>             <div class="slds-backdrop slds-backdrop_open"></div>         </div>     </aura:if> </aura:component>

 Step 2: Create lighting component controller 'ProgressIndicatorController.js' and use this code.

({      openModal : function(component, event, helper) {         component.set("v.openModal",true);     },     page1 : function(component, event, helper) {         component.set("v.showpage1",true);         component.set("v.showpage2",false);         component.set("v.showpage3",false);         component.set("v.currentstep","step1");                     },     page2 : function(component, event, helper) {         component.set("v.showpage2",true);         component.set("v.showpage1",false);         component.set("v.showpage3",false);         component.set("v.currentstep","step2");             },     page3 : function(component, event, helper) {         component.set("v.currentstep","step3");             component.set("v.showpage3",true);         component.set("v.showpage2",false);         component.set("v.showpage1",false);             },     hideModal: function(component, event, helper) {         component.set("v.openModal",false);     } })

Step 3: Create lighting app for preview the components.

<aura:application >     <c:ProgressIndicator/> </aura:application>

Reference- https://www.girikon.com/blog/open-lightning-modal-with-progress-indicator-using-lightning-component/