force:showToast In lightning

In this blog we are going to learn about how to show toast in lightning record page by using force:showToast. Toast are the message box or you can say notification which developer can show according to action of the user. Let’s know the attribute of toast.

ATTRIBUTES

type : The toast can be of 4 types
- info
- success
- warning
- error
key : It specify the icon on the toast when type is not defined.
title : it specify the title of the toast
message : It specifies the message to show the user
messageTemplate : If we want to override the message which is specified in message attribute we can use this attribute along with messageTemplateData.
messageTemplateData : To show the overridden message you must use this attribute.
duration : It specify the duration of toast to be show to user. After specified duration toast will automatically disappear.
mode : It specify how the toast will disappear. In salesforce there are 3 types of mode.
- dismissible : Toast will disappear either by user action or on complete of specified duration.
- pester : Toast will disappear on complete of specified duration. Close button will not appear.
- sticky : Toast will disappear by user action .

TOAST EXAMPLE

1. Create lightning component as follows:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <!-- 
    /**
    * Webkul Software.
    *
    * @category  Webkul
    * @author    Webkul
    * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
    * @license   https://store.webkul.com/license.html
    */
    -->
    <div>
        <lightning:button label="Information"
                          variant="brand"
                          onclick="{!c.showInfoToast}"
                          >
        </lightning:button>
        <lightning:button label="Error"
                          variant="destructive"
                          onclick="{!c.showErrorToast}">
        </lightning:button>
        <lightning:button label="Warning"
                          variant="inverse"
                          onclick="{!c.showWarningToast}"
                          class="wk_warning">
        </lightning:button>
        <lightning:button label="Success"
                          variant="inverse"
                          onclick="{!c.showSuccessToast}"
                          class = "wk_success">
        </lightning:button>
    </div>
</aura:component>

2. #CSS

.THIS {
}
.THIS .wk_warning {
    background : #FFB75D !important;
}
.THIS .wk_success {
    background : #04844B !important;
}

3. # Client side controller

({
    /**
    * Webkul Software.
    *
    * @category  Webkul
    * @author    Webkul
    * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
    * @license   https://store.webkul.com/license.html
    */
    showInfoToast : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            title : 'Info Message',
            message: 'Mode is dismissible ,duration is 5sec and this is normal Message',
            messageTemplate: 'Record {0} created! See it {1}!',
            duration:' 5000',
            key: 'info_alt',
            type: 'info',
            mode: 'dismissible'
        });
        toastEvent.fire();
    },
    showSuccessToast : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            title : 'Success Message',
            message: 'Mode is pester ,duration is 5sec and this is normal Message',
            messageTemplate: 'Record {0} created! See it {1}!',
            duration:' 5000',
            key: 'info_alt',
            type: 'success',
            mode: 'pester'
        });
        toastEvent.fire();
    },
    showErrorToast : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            title : 'Error Message',
            message:'Mode is pester ,duration is 5sec and Message is not overrriden because messageTemplateData is not specified',
            messageTemplate: 'Mode is pester ,duration is 5sec and Message is overrriden',
            duration:' 5000',
            key: 'info_alt',
            type: 'error',
            mode: 'pester'
        });
        toastEvent.fire();
    },
    showWarningToast : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            title : 'Warning',
            message: 'Mode is pester ,duration is 5sec and normal message',
            messageTemplate: 'Mode is sticky ,duration is 5sec and Message is overrriden because messageTemplateData is {1}',
            messageTemplateData: ['Salesforce', {
                url: 'http://www.webkul.com/',
                label: 'Click Here',
            }],
            duration:' 5000',
            key: 'info_alt',
            type: 'warning',
            mode: 'sticky'
        });
        toastEvent.fire();
    },
})

OUTPUT

# Info Toast

# Error Toast

# Warning Toast

# Success Toast

Support

That’s all for How To Show Toast In Lightning Record Page , still if you have any further query or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to add a ticket, we will be happy to help you https://support.uvdesk.com/en/customer/create-ticket/.

Tags: alert in salesforce lightning notification message box in lightning Salesforce Toast in lightning component

Snehil Jaiswal 16-July-2021

View Comments (4) Comment or Ask a Question

Quick Links

force:showToast In lightning

Table of Content

ATTRIBUTES

TOAST EXAMPLE

OUTPUT

Support