+ Start a Discussion
Wei Dong 10Wei Dong 10 

Any confirm dialog in lightning?

Hi,
I have to use "window.confirm(……)" in the Lightning page to confirm, is there anything like "showToast" window in the Lightning or any other solutions?
Best Answer chosen by Wei Dong 10
Maharajan CMaharajan C
Hi Wei,

The LIghtning Overlaylibrary and Application Component will help you to achieve this:

I have design a sample component for you which will helps you:

1. Create one Application Event :(Name as OverlayLibraryModalEvent)

<aura:event type="APPLICATION" description="Event to handle overlay Action" >
 <aura:attribute name="message" type="String"/>
</aura:event>


2. Create the Overlay Component :(Name as OverlayLibraryModal) ==> This will hold the OK and Cancel button

Here am passing the string as which button getting clicked to parent component via Application event

<aura:component access="global">
    <aura:registerEvent name="appEvent" type="c:OverlayLibraryModalEvent"/>
    <lightning:overlayLibrary aura:id="overlayLib"/>
    
    <!--Component Start--> 
    <div class="slds-text-align_center slds-m-around_x-medium">
        <lightning:button name="cancel" label="Cancel" onclick="{!c.handleCancel}"/>
        <lightning:button name="ok" label="OK" variant="brand" onclick="{!c.handleOK}"/>
    </div>
    <!--Component End-->
</aura:component>

OverlayLibraryModal JS:

({
    handleCancel : function(component, event, helper) {
        //closes the modal or popover from the component
        var appEvent = $A.get("e.c:OverlayLibraryModalEvent");
        appEvent.setParams({
            "message" : "Cancel" });
        appEvent.fire();
        component.find("overlayLib").notifyClose();
    },
    handleOK : function(component, event, helper) {
        //do something
        var appEvent = $A.get("e.c:OverlayLibraryModalEvent");
        appEvent.setParams({
            "message" : "Ok" });
        appEvent.fire();
        component.find("overlayLib").notifyClose();
    }
})


3. Parent Comonent :  (Component which hold the initial submit button)

Once you have recievd the which button clicked msg then do the further operation handleApplicationEvent method

<aura:component  implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global">
    <!--Declare Attribute-->
    <aura:attribute name="FirstName" type="String"/> 
    <aura:attribute name="LastName" type="String"/> 
    
    <aura:handler event="c:OverlayLibraryModalEvent" action="{!c.handleApplicationEvent}"/>
    
    <lightning:overlayLibrary aura:id="overlayLib"/>
    
    <!--Component Start-->   
    <div class="slds-m-around--xx-large">
        <lightning:input name="fname" label="First Name" value="{!v.FirstName}" />
        <lightning:input name="lname" label="Last Name" value="{!v.LastName}" />
        <br/>
        <lightning:button variant="brand" label="Show Modal" onclick="{!c.handleShowModal}"/>
    </div>
    <!--Component End-->
</aura:component>

Parent Comonent JS:

({
    handleShowModal: function(component) {
        var fName = component.get("v.FirstName");
        var lName = component.get("v.LastName");
        $A.createComponent("c:OverlayLibraryModal", {},
                           function(content, status) {
                               if (status === "SUCCESS") {
                                   var modalBody = content;
                                   component.find('overlayLib').showCustomModal({
                                       header: "Hi " + fName +" "+ lName + " Please let us know your confirmation!!!",
                                       body: modalBody, 
                                       showCloseButton: false,
                                       closeCallback: function(ovl) {
                                           console.log('Overlay is closing');
                                       }
                                   }).then(function(overlay){
                                       console.log("Overlay is made");
                                   });
                               }
                           });
    },
    
    handleApplicationEvent : function(cmp, event) {
        var message = event.getParam("message");
        alert('@@@ ==> ' + message);
        if(message == 'Ok')
        {
        // if the user clicked the OK button do your further Action here
        }
       else if(message == 'Cancel')
      {
        // if the user clicked the Cancel button do your further Action here for canceling
      }
    }
})

https://developer.salesforce.com/docs/component-library/bundle/lightning:overlayLibrary/documentation

Can you please Let me know if it helps or not!!!

If it helps don't forget to mark this as a best answer!!!


Thanks,
Maharajan.C

All Answers

Raj VakatiRaj Vakati
Instead of confirm use the lightning:notificationsLibrary . You can able to use the  lightning: notificationsLibrary  library 


Refer this link 
https://developer.salesforce.com/docs/component-library/bundle/lightning:notificationsLibrary/documentation

https://rajvakati.com/2018/04/15/lightningnotificationslibrary-example/
Wei Dong 10Wei Dong 10
Thanks first!

But your given example has ONLY an "OK" button, what I want is something like "window.confirm(...)"——You have an "OK" or "Cancel" button to choose. So How to cope with that?
Maharajan CMaharajan C
Hi Wei,

The LIghtning Overlaylibrary and Application Component will help you to achieve this:

I have design a sample component for you which will helps you:

1. Create one Application Event :(Name as OverlayLibraryModalEvent)

<aura:event type="APPLICATION" description="Event to handle overlay Action" >
 <aura:attribute name="message" type="String"/>
</aura:event>


2. Create the Overlay Component :(Name as OverlayLibraryModal) ==> This will hold the OK and Cancel button

Here am passing the string as which button getting clicked to parent component via Application event

<aura:component access="global">
    <aura:registerEvent name="appEvent" type="c:OverlayLibraryModalEvent"/>
    <lightning:overlayLibrary aura:id="overlayLib"/>
    
    <!--Component Start--> 
    <div class="slds-text-align_center slds-m-around_x-medium">
        <lightning:button name="cancel" label="Cancel" onclick="{!c.handleCancel}"/>
        <lightning:button name="ok" label="OK" variant="brand" onclick="{!c.handleOK}"/>
    </div>
    <!--Component End-->
</aura:component>

OverlayLibraryModal JS:

({
    handleCancel : function(component, event, helper) {
        //closes the modal or popover from the component
        var appEvent = $A.get("e.c:OverlayLibraryModalEvent");
        appEvent.setParams({
            "message" : "Cancel" });
        appEvent.fire();
        component.find("overlayLib").notifyClose();
    },
    handleOK : function(component, event, helper) {
        //do something
        var appEvent = $A.get("e.c:OverlayLibraryModalEvent");
        appEvent.setParams({
            "message" : "Ok" });
        appEvent.fire();
        component.find("overlayLib").notifyClose();
    }
})


3. Parent Comonent :  (Component which hold the initial submit button)

Once you have recievd the which button clicked msg then do the further operation handleApplicationEvent method

<aura:component  implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global">
    <!--Declare Attribute-->
    <aura:attribute name="FirstName" type="String"/> 
    <aura:attribute name="LastName" type="String"/> 
    
    <aura:handler event="c:OverlayLibraryModalEvent" action="{!c.handleApplicationEvent}"/>
    
    <lightning:overlayLibrary aura:id="overlayLib"/>
    
    <!--Component Start-->   
    <div class="slds-m-around--xx-large">
        <lightning:input name="fname" label="First Name" value="{!v.FirstName}" />
        <lightning:input name="lname" label="Last Name" value="{!v.LastName}" />
        <br/>
        <lightning:button variant="brand" label="Show Modal" onclick="{!c.handleShowModal}"/>
    </div>
    <!--Component End-->
</aura:component>

Parent Comonent JS:

({
    handleShowModal: function(component) {
        var fName = component.get("v.FirstName");
        var lName = component.get("v.LastName");
        $A.createComponent("c:OverlayLibraryModal", {},
                           function(content, status) {
                               if (status === "SUCCESS") {
                                   var modalBody = content;
                                   component.find('overlayLib').showCustomModal({
                                       header: "Hi " + fName +" "+ lName + " Please let us know your confirmation!!!",
                                       body: modalBody, 
                                       showCloseButton: false,
                                       closeCallback: function(ovl) {
                                           console.log('Overlay is closing');
                                       }
                                   }).then(function(overlay){
                                       console.log("Overlay is made");
                                   });
                               }
                           });
    },
    
    handleApplicationEvent : function(cmp, event) {
        var message = event.getParam("message");
        alert('@@@ ==> ' + message);
        if(message == 'Ok')
        {
        // if the user clicked the OK button do your further Action here
        }
       else if(message == 'Cancel')
      {
        // if the user clicked the Cancel button do your further Action here for canceling
      }
    }
})

https://developer.salesforce.com/docs/component-library/bundle/lightning:overlayLibrary/documentation

Can you please Let me know if it helps or not!!!

If it helps don't forget to mark this as a best answer!!!


Thanks,
Maharajan.C
This was selected as the best answer
Wei Dong 10Wei Dong 10
Hi Maharajan C:

Thanks for your quick reply and there's a strange question——When the alert is popped up, I see the background is Not fully gray (this means ONLY a thin place is gray, but not the full screen of background is gray, with the modal dialog popped up).

Would you mind showing me your screenshot when popping up the dialog?
Maharajan CMaharajan C
Hi Wei,

Please find the below Screenshots: 

User-added image


User-added image


User-added image


Thanks,
Maharajan.C
Wei Dong 10Wei Dong 10
OK. I'll make a desicion and I'll reply to you.
Wei Dong 10Wei Dong 10
@Maharajan.C:

Thanks for your nice solution, I've marked yours as an answer.

BTW:Will Salesforce add this component as a most basic one like 'showToast'? This is a frequently-used Dialog for us......
Javier Chaos 5Javier Chaos 5
What about this component here (https://github.com/Chaos-Tech-Corp/Modal-Confirmation)? 

Allows you to customize the title, tagline, message, handles the Esc to close it and will callback your confirm function when the user clicks the confirm button. I think so far is the most complete I found.
user905user905
@Maharajan.C hi, can you please help me understand how 'handleApplicationEvent' method is getting called? i'm using lds and the component is being called from a button. if ok it should redirect my user to create a record and cancel should close the modal. appreciate your response. thank you.