Tuesday, October 30, 2018

lightning:notificationsLibrary in lightning

This post explains the use of lightning:notificationLibrary in lightning component
lightning:notificationLibrary is supported in Lightning Experience, Salesforce app, and Lightning communities.
include one <lightning:notificationsLibrary aura:id=”notifLib”/> tag in the component that triggers all the notifications, and aura:id is a unique local id in the component.



Messages can be displayed in notices and toasts.
Notices
  1.  Notices alert users to system-related issues and updates.
  2. 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.
  3. To dismiss the notice, only the OK button is currently supported.

Toasts
  1. Toasts enable you to provide feedback and serve as a confirmation mechanism after the user takes an action.
  2. 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. 
  3. A toast can be dismissed or can remain visible until a predefined duration has elapsed.

Demo
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.

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.

Check below code sample for more information
Lightning Component
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <lightning:buttonGroup>
        <lightning:button variant="Neutral" label="Notice Info" onclick="{!c.showNoticeInfo}"/>
        <lightning:button variant="Neutral" label="Notice Error" onclick="{!c.showNoticeError}"/>
        <lightning:button variant="Neutral" label="Notice Warning" onclick="{!c.showNoticeWarning}"/>
        <lightning:button variant="Neutral" label="Toast Info" onclick="{!c.showToastInfo}"/>
        <lightning:button variant="Neutral" label="Toast Warning" onclick="{!c.showToastWarning}"/>
        <lightning:button variant="Neutral" label="Toast Success" onclick="{!c.showToastSuccess}"/>
        <lightning:button variant="Neutral" label="Toast Error" onclick="{!c.showToastError}"/>
    </lightning:buttonGroup>
</aura:component>
Javascript Controller
({
    showNoticeInfo : function(component, event, helper) {
        component.find('notifLib').showNotice({
            "variant": "info",
            "header": "Something has gone wrong!",
            "message": "Unfortunately, there was a problem updating the record.",
        });
    },
    
    showNoticeError : function(component, event, helper) {
        component.find('notifLib').showNotice({
            "variant": "error",
            "header": "Something has gone wrong!",
            "message": "Unfortunately, there was a problem updating the record.",
        });
    },
    
    showNoticeWarning : function(component, event, helper) {
        component.find('notifLib').showNotice({
            "variant": "warning",
            "header": "Something has gone wrong!",
            "message": "Unfortunately, there was a problem updating the record.",
        });
    },
    
    showToastInfo : function(component, event, helper) {
        component.find('notifLib').showToast({
            "variant": "info",
            "title": "Notif library Info!",
            "message": "The record has been updated successfully."
        });
    },
    
    showToastWarning : function(component, event, helper) {
        component.find('notifLib').showToast({
            "variant": "warning",
            "title": "Notif library Warning!",
            "message": "The record has been updated successfully."
        });
    },
    
    showToastSuccess : function(component, event, helper) {
        
        component.find('notifLib').showToast({
            "variant": "success",
            "title": "Notif library Success!",
            "message": "The record has been updated successfully."
        });
    },
    
    showToastError : function(component, event, helper) {
        component.find('notifLib').showToast({
            "variant": "error",
            "title": "Notif library Error!",
            "message": "The record has been updated successfully."
        });
    },
})
Let us know if you have any queries.
Happy Learning!!!

No comments:

Post a Comment