Confirm dialog in salesforce lightning experience

In this post, you will learn the steps to create custom confirm dialog in salesforce lightning experience.

Create a custom component and add the below code in the .cmp file

<aura:component implements="flexipage:availableForAllPageTypes" access='global'>

    <aura:attribute name="showModal" type="boolean" default="false" />

    <lightning:button name="Open confirm dialog" label="Open confirm dialog" onclick="{!c.openConfirmDialog}"/>

   

    <aura:if isTrue="{!v.showModal}">

        <div style="height:640px">

            <section role="dialog" tabindex="-1" class="slds-modal slds-modal_x-small slds-fade-in-open" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">

                <div class="slds-modal__container">

                    <header class="slds-modal__header">

                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Confirmation</h2>

                    </header>

                    <div class="slds-modal__content slds-p-around_medium slds-p-left_large" id="modal-content-id-1">

                        <p style='margin-left:18%'>Are you sure you want to perform this action?</p>

                    </div>

                    <footer class="slds-modal__footer">

                        <lightning:button class="slds-button slds-button_brand" name='Yes' label='Yes' onclick='{!c.apexcall}'/>

                        <lightning:button class="slds-button slds-button_brand" name='No' label='No' onclick='{!c.closeModal}'/>

                    </footer>

                </div>

            </section>

            <div class="slds-backdrop slds-backdrop_open"></div>

        </div>

    </aura:if>

</aura:component>

Client-side controller js code

({

    apexcall : function(component, event, helper) {

        var hideModal = component.get('v.showModal');

        component.set('v.showModal', !hideModal);

       //logic to do something

    },

    openConfirmDialog : function(component, event, helper) {

        var showModal = component.get('v.showModal');

        component.set('v.showModal', !showModal);

    },

    closeModal : function(component, event, helper) {

        var showModal = component.get('v.showModal');

        component.set('v.showModal', !showModal);

    },

})

Save the component bundles and add this component to any page layout from the lightning app builder. 

Verify the custom confirm dialog behavior.

We hope you liked this post. Add your feedback or queries in the comments section below. Thanks for using our services.

Learn More

How to get a list of objects in salesforce

How to enable my domain in salesforce lightning

How to create a custom lookup in salesforce lightning component