Open Lightning Modal With Progress Indicator Using Lightning Component

• April 18, 2018
• Arun Garg

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 a modal on button click, close the modal, and add a progress indicator in the footer.

Let’s start the process step by step:

Step 1: Create Lightning component ProgressIndicator.cmp

<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}">
        <section role="dialog" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                ...
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </aura:if>
</aura:component>

Step 2: Create Lightning controller ProgressIndicatorController.js

({
    openModal : function(component) {
        component.set("v.openModal", true);
    },

    page1 : function(component) {
        component.set("v.showpage1", true);
        component.set("v.showpage2", false);
        component.set("v.showpage3", false);
        component.set("v.currentstep", "step1");
    },

    page2 : function(component) {
        component.set("v.showpage2", true);
        component.set("v.showpage1", false);
        component.set("v.showpage3", false);
        component.set("v.currentstep", "step2");
    },

    page3 : function(component) {
        component.set("v.showpage3", true);
        component.set("v.showpage1", false);
        component.set("v.showpage2", false);
        component.set("v.currentstep", "step3");
    },

    hideModal : function(component) {
        component.set("v.openModal", false);
    }
})

Step 3: Create Lightning app to preview the component

<aura:application extends="force:slds">
    <c:ProgressIndicator/>
</aura:application>