Display toast message with buttons in a Lightning Component

Question

Has anyone displayed a toast message with buttons in a Lightning Component?

I need to add 'OK' and 'Cancel' buttons to the toast message.

This is my code for the toast message:

var resultsToast = $A.get("e.force:showToast");
resultsToast.setParams({
    "message": 'Are you sure you want to Cancel this form?',
    "mode": 'sticky'
});
resultsToast.fire();

Is that possible? Please suggest other alternatives if not.

Thanks.

Answer 1

No, a toast is an informative message (e.g. an error occurred or something else). It is not a modal dialog with buttons you can configure. You'll notice that there's absolutely no way to know that a toast has even been closed/dismissed, much less know the disposition of that closure.

The correct method would be to use the lightning:overlayLibrary (or create your own modal dialog). How it works is given in the documentation. First, you include overlay library:

<lightning:overlayLibrary aura:id="overlayLib"/>

And then you call it when you need it:

    var modalBody;
    $A.createComponent("c:modalContent", {},
       function(content, status) {
           if (status === "SUCCESS") {
               modalBody = content;
               component.find('overlayLib').showCustomModal({
                   header: "Application Confirmation",
                   body: modalBody, 
                   showCloseButton: true,
                   cssClass: "mymodal",
                   closeCallback: function() {
                       alert('You closed the alert!');
                   }
               })
           }                               
       });

Where c:modalContent is the thing you want to show in the modal dialog. I suggest you read the documentation for more information.

Further down, they demonstrate a OK/Cancel dialog. It's kind of complicated, so I won't reproduce it here, but basically you create a custom footer component that has the buttons to show and a custom modal component for the body to show.