0

hi guys does anyone know how to change my alert message into toast alert message.. please help here my code

action.setCallback(this,function(a){
        //get the response state
        var state = a.getState();

        //check if result is successfull
        if(state == "SUCCESS"){
            //Reset Form
            var newContact = {'sobjectType': 'Contact',
                                'contact_FNAME__c': '',
                                'contact_LNAME__c': '',
                                'Email': '',
                                'Phone': ''
                               };
            //resetting the Values in the form
            component.set("v.Contact",newContact);
            alert('Record is Created Successfully');
        } else if(state == "ERROR"){
            alert('Error in calling server side action');
        }
    });
    //adds the server-side action to the queue        
    $A.enqueueAction(action);
}

2 Answers 2

1

Use e.force:showToast to show toast https://developer.salesforce.com/docs/component-library/bundle/force:showToast/documentation

showToast : function(component, event, helper) {
    var toastEvent = $A.get("e.force:showToast");
    toastEvent.setParams({
        "title": "Success!",
        "message": "The record has been updated successfully."
    });
    toastEvent.fire();
}

like the above example. same in your function as well. You can create a function in helper class and pass the title, type and message from you success and error method.

var title = '';
var type = '';
var message = '';
if (state == "SUCCESS") {
    //Reset Form
    var newContact = {
        'sobjectType': 'Contact',
        'contact_FNAME__c': '',
        'contact_LNAME__c': '',
        'Email': '',
        'Phone': ''
    };
    //resetting the Values in the form
    component.set("v.Contact", newContact);
    alert('Record is Created Successfully');
    title = 'Success';
    type = 'success';
    message = 'Record is Created Successfully';
} else if (state == "ERROR") {
    title = 'Error';
    type = 'error';
    message = 'Error in calling server side action';
    alert('Error in calling server side action');
}
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
    "title": title,
    "type": type,
    "message": message
});
toastEvent.fire();
6
  • further more explain . sir i got an error it wont save
    – zane
    Commented Oct 4, 2018 at 7:54
  • @zane whats the error?
    – Ratan Paul
    Commented Oct 4, 2018 at 7:59
  • i updated my code above so that you will understand . can you recreate it so that i can understand.
    – zane
    Commented Oct 4, 2018 at 8:02
  • and question form the example above. does those code are on helper?
    – zane
    Commented Oct 4, 2018 at 8:04
  • @zane you just put the toast logic in helper and pass the title,type and message to helper to show the toast or you can use direct code in your method itself like i gave example
    – Ratan Paul
    Commented Oct 4, 2018 at 8:35
0

Using force:ShowToast you can display the SLDS toast notification with a custom message. Example :

showToast : function(component, event, helper) {
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
    "title": "Success!",
    "type": "success",
    "message": "Account Widget was created."
});
toastEvent.fire(); }

type : success, error, warning.

Based on type, toast will display for 5000ms with a close button and slds style.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .