What is Lightning Notifications Library | How and where to use it ? | Toast | Notice | Salesforce

Kapil October 09, 2020


In this vlog you will learn about Notifications Library in Lightning. Using Notifications Library you can display message via Notice or Toast.

This component requires API version 41.0 or later.

Messages can be displayed in notices and toasts. Notices alert users to system-related issues and updates. Toasts enable you to provide feedback and serve as a confirmation mechanism after the user takes an action.

Include one <lightning:notificationsLibrary aura:id="notifLib"/> tag in the component that triggers the notifications, where aura:id is a unique local ID. Only one tag is needed for multiple notifications.


Notices

Notices interrupt the user's workflow and block everything else on the page. Notices must be acknowledged before a user regains control over the app again. As such, use notices sparingly. They are not suitable for confirming a user’s action, such as before deleting a record. To dismiss the notice, only the OK button is currently supported.
Notices inherit styling from prompts in the Lightning Design System.
To create and display a notice, pass in the notice attributes using component.find('notifLib').showNotice(), where notifLib matches the aura:id on the lightning:notificationsLibrary instance.


Toasts

Toasts are less intrusive than notices and are suitable for providing feedback to a user following an action, such as after a record is created. A toast can be dismissed or can remain visible until a predefined duration has elapsed.

Toasts inherit styling from toasts in the Lightning Design System.

To create and display a toast, pass in the toast attributes using component.find('notifLib').showToast(), where notifLib matches the aura:id on the lightning:notificationsLibrary instance.

Here’s an example that contains a button. When clicked, the button displays a toast with the info variant and remains visible until you click the close button, denoted by the X in the top right corner.

Please check below example to understand it better

Component

1
2
3
4
5
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <lightning:button name="notice" label="Show Notice" onclick="{!c.handleShowNotice}"/>
    <lightning:button name="toast" label="Show Toast" onclick="{!c.handleShowToast}"/>
</aura:component>


Controller

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
({
    handleShowNotice : function(component, event, helper) {
        component.find("notifLib").showNotice({
            "variant": "error",
            "header": "Something has gone wrong!",
            "message": "Unfortunately, there was a problem updating the record.",
            closeCallback: function() {
                alert("You closed the alert!");
            }
        });
    },
    handleShowToast : function(component, event, helper) {
        //Accepted variants are info, success, warning, and error.
        component.find('notifLib').showToast({
            "title": "Success!",
            "message": "Record {0} created! See it {1}!",
            "messageData": [
                'Salesforce',
                {
                    url: 'http://www.salesforce.com/',
                    label: 'here',
                }
            ]
        });
    }
})


Checkout the complete tutorial video & output below :

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Keep Coding 


Tags:

Post a Comment

0 Comments