Toast Message In Lightning Component

Toast displays the feedback and confirmation messages after the user takes any action.

This event “$A.get(“e.force:showToast”)” handled by the one.app container. It’s supported in Lightning Experience, Salesforce Mobile and Lightning Community.

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

There are many attributes available to control the behavior and look and feel of this toast message.

NAMETYPEDESCRIPTION
titlestringSpecifies the title for a message to display. The title is shown above the message in a slightly larger font.
durationintegerLength of time the toast is visible for, in milliseconds. Applies to ‘dismissible’ or ‘pester’ toast modes. The default is 5000ms if the provided value is less than 5000ms.
messagestringThe message to display in the toast.
keystringIcon to use when toast type is ‘other’. Icon keys are available at the Lightning Design System Icons page.
modestringThe toast mode, which controls how users can dismiss the toast. Valid values are ‘pester’ and ‘sticky’. The default is ‘dismissible’, which displays the close button.
typestringThe toast type, which can be ‘error’, ‘warning’, ‘success’, or ‘info’. The default is ‘other’, which is styled like an ‘info’ toast and doesn’t display an icon, unless specified by the key attribute.
messageTemplatestringOverwrites message string with the specified message. Requires messageTemplateData.
messageTemplateDataobject[]An array of text and actions to be used in messageTemplate.
force:showToast Attributes

The below example will display the toast message for 5000ms and it will auto dismiss after that.

showConfirmationToast : function(component, event, helper) {
    var toastEvent = $A.get("e.force:showToast");
    toastEvent.setParams({
        "title": "Success!",
        "type" : 'success',
        "mode" : 'dismissible',
        "duration" : 5000,
        "message": "The record has been created successfully."
    });
    toastEvent.fire();
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s