3

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/

  • 4
    Please do not fundamentally change your question were it invalidates the answers that other work so hard to provide to your original question. If the answer does indeed answer the question you posted accept it and if you now have a new question ask a new one. – Eric Apr 16 '17 at 0:17
  • Gotcha, makes sense. Thanks for keeping it on topic. – ATA1k Apr 16 '17 at 0:31
9

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.
    });
}
  • Hey @javanoob, you need to pass your name down to me =) Yeah, I see it now. The scope/context is changing for (component,event,helper) when I try to use them within the sweetalert function. I tried to pass the Event as a variable as well, and that didnt work. So your solution (or setting it as an aura:attribute) got me what I needed. I appreciate your time. – ATA1k Apr 16 '17 at 15:22
  • A final comment - I copied your code, and it all works well. Using debug statements, I see it hit the helper function. But! The Server Side Controller Action ($A.enqueueAction(action)) doesn get executed until I do something else within the page. It hits the code to set the Callback and the enqueueAction, but it doesnt actually happen (I can still access the file) until I click another button in the page, or even resize the window. I cant see any errors, so its hard to figure out the issue. I may post another question on this. – ATA1k Apr 16 '17 at 17:43
  • 1
    @ATA1k I am sorry. I did not understand the problem you are trying to explain. Maybe you can post a new question with the screenshot or the exact error or problem you are facing. Thanks! – javanoob Apr 16 '17 at 18:54
  • You answered the original question perfectly! I went ahead and posted another question about this new issue. There has been a suggestion that Im about to try out now. Thanks again – ATA1k Apr 17 '17 at 4:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.