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 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 lightning 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 lightning 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 extends="force:slds" >

    <c:ProgressIndicator/>

</aura:application>

You can check – Salesforce consulting Services – Girikon
Salesforce implementation partner & Services