Home
lightning:notificationsLibrary Example

lightning:notificationsLibrary Example

By April 15, 2018 Lightning 0 Comments

In this blog, I am going to explain how to use lightning:notificationsLibrary that provides an easy way to display notices and toast in the app. lightning:notificationsLibrary  component is supported in Lightning Experience, Salesforce app, and Lightning communities only. 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.

<lightning:notificationsLibrary aura:id="notifLib"/>
    <lightning:button name="Show Error Notice" label="Show Error Notice" onclick="{!c.handleShowErrorNotice}"/>

 

 handleShowErrorNotice : function(component, event, helper) {
        component.find('notifLib').showNotice({
            "variant": "error",
            "title":"Error",
            "header": "Something has gone wrong!",
            "message": "Unfortunately, there was a problem updating the record.",
            closeCallback: function() {
                alert('You closed the alert!');
            }
        });
    },

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.

<lightning:notificationsLibrary aura:id="notifLib"/>
<lightning:button name="success" label="Show Success" onclick="{!c.handlesuccessToast}"/>

 

handlesuccessToast : function(component, event, helper) {
        component.find('notifLib').showToast({
            "variant":"success",
            "title": "Notif library Success!",
            "mode":"sticky",
            "message": "The record has been updated successfully."
        });
    }

 

The Below lightning component shows the different type of notifications.

 

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <lightning:button name="Show Error Notice" label="Show Error Notice" onclick="{!c.handleShowErrorNotice}"/>
    <lightning:button name="Show info Notice" label="Show info Notice" onclick="{!c.handleShowInfoNotice}"/>
    <lightning:button name="Show warning Notice" label="Show warning Notice" onclick="{!c.handleShowWarningNotice}"/>
    <lightning:button name="info" label="Show info" onclick="{!c.handleinfoToast}"/>
    <lightning:button name="warning" label="Show Warning" onclick="{!c.handlewarningToast}"/>
    <lightning:button name="success" label="Show Success" onclick="{!c.handlesuccessToast}"/>
    <lightning:button name="Erorr" label="Show Error" onclick="{!c.handleerrorToast}"/>  
</aura:component>

 

({    
    handleShowErrorNotice : function(component, event, helper) {
        component.find('notifLib').showNotice({
            "variant": "error",
            "title":"Error",
            "header": "Something has gone wrong!",
            "message": "Unfortunately, there was a problem updating the record.",
            closeCallback: function() {
                alert('You closed the alert!');
            }
        });
    },
    handleShowInfoNotice : function(component, event, helper) {
        component.find('notifLib').showNotice({
            "variant": "info",
            "title":"Info",
            "header": "Infomration Message!",
            "message": "Please Modify the Record.",
            closeCallback: function() {
                alert('You closed the alert!');
            }
        });
    },
    handleShowWarningNotice : function(component, event, helper) {
        component.find('notifLib').showNotice({
            "variant": "warning",
            "title":"Error",
            "header": "Something has gone wrong!",
            "message": "Unfortunately, there was a problem updating the record.",
            closeCallback: function() {
                alert('You closed the alert!');
            }
        });
    },
    handleinfoToast : function(component, event, helper) {
        component.find('notifLib').showToast({
            "variant":"info",
            "title": "Notif library Success!",
            "message": "The record has been updated successfully."
        });
    },
    handlewarningToast : function(component, event, helper) {
        component.find('notifLib').showToast({
            "variant":"warning",
            "mode":"dismissable",
            "title": "Notif library Success!",
            "message": "The record has been updated successfully."
        });
    },
    handlesuccessToast : function(component, event, helper) {
        component.find('notifLib').showToast({
            "variant":"success",
            "title": "Notif library Success!",
            "mode":"sticky",
            "message": "The record has been updated successfully."
        });
    },
    handleerrorToast : function(component, event, helper) {
        component.find('notifLib').showToast({
            "variant":"error",
            "mode":"pester",
            "title": "Notif library Success!",
            "message": "The record has been updated successfully."
        });
    }
})

 

 

 

Related Posts