lightning:notificationsLibrary Example
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.
|
1 2 |
<lightning:notificationsLibrary aura:id="notifLib"/> <lightning:button name="Show Error Notice" label="Show Error Notice" onclick="{!c.handleShowErrorNotice}"/> |
|
1 2 3 4 5 6 7 8 9 10 11 |
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.
|
1 2 |
<lightning:notificationsLibrary aura:id="notifLib"/> <lightning:button name="success" label="Show Success" onclick="{!c.handlesuccessToast}"/> |
|
1 2 3 4 5 6 7 8 |
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.
|
1 2 3 4 5 6 7 8 9 10 |
<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> |
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
({ 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." }); } }) |
