Activity Forums Salesforce® Discussions What is the use case of <lightning:notificationsLibrary /> tag in Salesforce lightning?

  • Deepak

    Member
    December 11, 2019 at 2:42 pm

    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.

    Here’s an example that contains a button. When clicked, the button displays a notice with the error variant.

    <aura:component>
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <lightning:button name="notice" label="Show Notice" onclick="{!c.handleShowNotice}"/>
    </aura:component>
    This client-side controller displays the notice.

    ({
    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!');
    }
    });
    }
    })
    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.

    Parameters
    PARAMETER
    TYPE
    DESCRIPTION
    header
    String
    The heading that’s displayed at the top of the notice.
    title
    String
    The title of the notice, displayed in bold.
    message
    String
    The message within the notice body. New lines are replaced by <br/> and text links by anchors.
    variant
    String
    Changes the appearance of the notice. Accepted variants are info, warning, and error. This value defaults to info.
    closeCallback
    Function
    A callback that’s called when the notice is closed.
    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.

    <aura:component>
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <lightning:button name="toast" label="Show Toast" onclick="{!c.handleShowToast}"/>
    </aura:component>
    This client-side controller displays the toast.

    ({
    handleShowToast : function(component, event, helper) {
    component.find('notifLib').showToast({
    "title": "Success!",
    "message": "The record has been updated successfully."
    });
    }
    })
    Displaying Links in Toasts and Notices
    To display a link in the message, use the messageData attribute to pass in url and label values for the message string.

    ({
    handleShowToast : function(component, event, helper) {
    component.find('notifLib').showToast({
    "title": "Success!",
    "message": "Record {0} created! See it {1}!",
    "messageData": [
    'Salesforce',
    {
    url: 'http://www.salesforce.com/',
    label: 'here',
    }
    ]
    });
    })

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos