lightning component:toast alert message

Question

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);
}

Answer 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();

Answer 2

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.