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
Toasts
Demo
Check below code sample for more information
Happy Learning!!!
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
- Notices alert users to system-related issues and updates.
- 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.
- To dismiss the notice, only the OK button is currently supported.
Toasts
- Toasts enable you to provide feedback and serve as a confirmation mechanism after the user takes an action.
- 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.
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