[SalesForce] How to use SweetAlert in a Lightning Component

I have a Lightning Component that deletes a record.

Currently its simply a html Button onclick, which calls a function in the Client Side Controller, which calls a helper function:

cmp:
<button type="button"  onclick="{!c.deleteRec}">Delete</button>

controller:
deleteRec: function(component, event, helper) {
            helper.deleteRec(component, event, helper);}

I would like to use Sweetalert for the confirmation. I cant figure out how to take the confirmation, and then call the deleteRec function. Does anyone have a simple example?

https://limonte.github.io/sweetalert2/

Best Answer

Here is a working example of code in my dev org:

Prerequisite:

  1. I downloaded sweetalert library(zip file) from their site and uploaded as static resource in my dev org with name as sweetalert2.

HelloWorldApp.app

<aura:application extends="force:slds" controller="HelloWorldApexController">

    <ltng:require   scripts="/resource/sweetalert2/sweetalert2.js"
                    styles="/resource/sweetalert2/sweetalert2.css"
                    afterScriptsLoaded="{!c.afterScriptsLoaded}"/>

    <button aura:id="delete-btn"
            type="button" 
            onclick="{!c.deleteRec}"
            class="slds-hide">Delete</button>
</aura:application>

HelloWorldAppController.js:

({
    afterScriptsLoaded: function(component,event,helper){
        var btnElem = component.find("delete-btn");
        console.log(btnElem);
        // Because click of the delete button will show sweetalert..we should display the delete button only if
        // resources are loaded.
        $A.util.removeClass(btnElem,"slds-hide");
        // Add the slds classes to button to display.
        $A.util.addClass(btnElem,"slds-button");
        $A.util.addClass(btnElem,"slds-button--brand");
    },
    deleteRec: function(component,event,helper){
        swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then(function (){
            // This block of code gets executed if user chooses ok for deleting record.
            console.log("User chose to delete the record");
            // Here you can call the helper function.
        });
    }
})

Output: https://imgur.com/a/DQDY9

EDIT:

To retrieve attribute of the button in controller code, make the below changes:

Component markup:

<button aura:id="delete-btn"
        type="button" 
        onclick="{!c.deleteRec}"
        data-recId="yyyyyy"
        class="slds-hide">Delete</button>

Controller code:

deleteRec: function(component,event,helper){

    var idVar = event.target.dataset.recid; // get recId attribute

    swal({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
    }).then(function (){
        console.log('Record id is '+ idVar); //Printing from success function
        // This block of code gets executed if user chooses ok for deleting record.
        console.log("User chose to delete the record");
        // Here you can call the helper function.
    });
}
Related Topic