{"id":6224,"date":"2021-06-28T13:47:57","date_gmt":"2021-06-28T13:47:57","guid":{"rendered":"https:\/\/www.greytrix.com\/blogs\/salesforce\/?p=6224"},"modified":"2021-07-21T07:24:18","modified_gmt":"2021-07-21T07:24:18","slug":"how-to-display-toasts-or-notices-using-lightning-notificationlibrary","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/06\/28\/how-to-display-toasts-or-notices-using-lightning-notificationlibrary\/","title":{"rendered":"How to Display Toasts or Notices using Lightning : NotificationLibrary"},"content":{"rendered":"\n<p>In this blog, we will discuss on how to display messages via toast or notices using <strong>Lightning:NotificationLibrary <\/strong>component.<\/p>\n\n\n\n<p><strong>Lightning:NotificationLibrary<\/strong><strong><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Lightning:NotificationLibrary <\/strong>component provides an easy way to display messages via toasts or notices.<\/li><li>However, Toast message helps in providing feedback to users. Above all, a toast message can be closed automatically after the predefined period of time has elapsed.<\/li><li>Notices can block the user\u2019s entire screen until the user closes it manually. After that, it shall alert users about system-related issues and updates.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><em><span style=\"text-decoration: underline;\">Create Lightning Component<\/span><\/em><\/strong><\/h4>\n\n\n\n<p><strong>LightningNotifications Component<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Firstly, to display toast or notices using <strong>Lightning:NotificationLibrary <\/strong>component we have to include &#8220;<code><strong>&lt;lightning:notificationsLibrary aura:id=\"notifyId\"\/&gt;<\/strong>\" tag in the component that triggers the notifications, where aura:id is a unique local ID.<\/code><\/li><li>Secondly, kindly note that only one tag is enough to display multiple notifications. Refer the below code to define the component.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;aura:component&gt;\n    &lt;lightning:notificationsLibrary aura:id=\"notifyId\"\/&gt;\n    &lt;lightning:button name=\"notice\" label=\"Display Notice\" onclick=\"{!c.showNotice}\"\/&gt;\n    &lt;lightning:button name=\"toast\" label=\"Display Toast\" onclick=\"{!c.showToast}\"\/&gt;\n&lt;\/aura:component&gt;<\/code><\/pre>\n\n\n\n<p><strong>LightningNotificationController<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Also, in order to create and display notice, we need to use &#8220;<code><strong>component.find('notifyId').showNotice()<\/strong>\"<\/code>, where&nbsp;&#8220;<code><strong>notifyId<\/strong>\"<\/code> is &nbsp;the&nbsp;<code>aura:id<\/code>&nbsp;of<code> lightning:notificationsLibrary<\/code> instance which we define in the above component.<\/li><li>Similarly, to create and display toast, we need to use \u201c<code><strong>component.find('notifyId').showToast()<\/strong>\u201d<\/code>,where&nbsp;\u201c<code><strong>notifyId\u201d<\/strong><\/code> is&nbsp; the&nbsp;<code>aura:id<\/code>&nbsp;of<code> lightning:notificationsLibrary<\/code> instance which we define in the above component.<\/li><li>Kindly refer to the below code.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>({\n  \tshowNotice : function(component, event, helper) {\n\t\tcomponent.find('notifyId').showNotice({\n            \"variant\": \"error\",\n            \"header\": \"An Internal Server has occured!\",\n            \"message\": \"There was a problem updating the record. Please contact your system administrator.\",\n            closeCallback: function() \n\t\t\t{\n                $A.get('e.force:refreshView').fire();\n            }\n        });\n\t},\n    showToast : function(component, event, helper) {\n        component.find('notifyId').showToast({\n            \"variant\": \"Success\",\n            \"title\": \"Success!\",\n            \"message\": \"Component Loaded successfully.\"\n        });\n\t}  \n})<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Here is the output, so now when the user clicks on the \u201c<strong>Display Notice<\/strong>\u201d button, a notice message popup will appear as shown in the below image.<\/li><\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2021\/06\/1_Display-Notice.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2021\/06\/1_Display-Notice.png\" alt=\"Display Notice\"><\/a><\/center>\n<font size=\"2\"><center><i>Display Notice<\/i><\/center><\/font>\n\n\n\n<ul class=\"wp-block-list\"><li>Similarly, when the user clicks on the \u201c<strong>Display Toast<\/strong>\u201d button, a toast message popup will appear as shown in the below image.<\/li><\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2021\/06\/2_Display-Toast.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2021\/06\/2_Display-Toast.png\" alt=\"Display Toast\"><\/a><\/center>\n<font size=\"2\"><center><i>Display Toast<\/i><\/center><\/font>\n\n\n\n<p>This way, you can display messages via toast or notice using the lightning component. We hope you may find this blog resourceful and helpful.<\/p>\n\n\n\n<p>If you still have concerns and need more help, please contact us at <a href=\"mailto:salesforce@greytrix.com\">salesforce@greytrix.com<\/a>.<\/p>\n\n\n\n<p style=\"text-align: justify\"><b>About Us<\/b><\/br>\n<p><a href=\"https:\/\/www.greytrix.com\/\">Greytrix<\/a> \u2013 a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.<br><br> Greytrix has some unique solutions for Cloud CRM such as <a href=\"\">Salesforce Sage integration<\/a> for <a href=\"https:\/\/www.greytrix.com\/sage-x3-erp\/integration\/\">Sage X3<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-100-integration\/\">Sage 100<\/a> and <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-300-integration\/\">Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Salesforce customization and development services<\/a> along with services such as Salesforce <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/data-migration-support\/\">Data Migration<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Integrated App development<\/a>, Custom App development and Technical Support business partners and end users. Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU&#x2122; integration for Sage ERP \u2013 Salesforce is a 5-star rated app listed on <a href=\"https:\/\/appexchange.salesforce.com\/appxListingDetail?listingId=a0N30000000psM5EAI\" target=\"_blank\" rel=\"noopener\">Salesforce AppExchange<\/a>.<br> The GUMU&#x2122; Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.<br><br> For more information on our Salesforce products and services, contact us at <a href=\"mailto:salesforce@greytrix.com\">salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n\n\n\n<p id=\"block-a24bf3ab-2bb4-428e-9187-427a937253cb\"><strong>Related Posts<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\" id=\"block-6a4f000f-ecac-4fbf-8f23-c83b93e4a0d4\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/06\/15\/how-to-add-or-remove-css-style-from-the-component-element-during-runtime-or-dynamically\/\" data-type=\"URL\" data-id=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/06\/15\/how-to-add-or-remove-css-style-from-the-component-element-during-runtime-or-dynamically\/\" target=\"_blank\">How to Add or Remove CSS style from the component\/element during runtime or dynamically<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/05\/29\/how-to-add-utility-bar-in-a-salesforce-lightning-application\/\" target=\"_blank\">Adding Utility bar in a Salesforce lightning application<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/04\/12\/how-to-notify-user-about-unsaved-changes-on-the-ui-using-lightning-component\/\" target=\"_blank\">How to Notify User about Unsaved Changes on the UI using Lightning Component<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/03\/24\/add-delete-row-dynamically-in-salesforce-lightning\/\" target=\"_blank\">Add Delete Row Dynamically In Salesforce Lightning<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/01\/22\/salesforce-how-to-get-row-index-of-lightning-table-rows\/\" target=\"_blank\">Salesforce \u2013 How to get row index of lightning table rows<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2020\/12\/30\/how-to-activate-and-add-salesforce-lightning-component-on-community-experience\/\" target=\"_blank\">How to Activate and Add Salesforce Lightning component on Community experience<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, we will discuss on how to display messages via toast or notices using Lightning:NotificationLibrary component. Lightning:NotificationLibrary Lightning:NotificationLibrary component provides an easy way to display messages via toasts or notices. However, Toast message helps in providing feedback to users. Above all, a toast message can be closed automatically after the predefined period of\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/06\/28\/how-to-display-toasts-or-notices-using-lightning-notificationlibrary\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1131,1068,1169,1168,206,1055,1069,1133,207,208,1166,1171,1172,367,651,1032,1167,1170],"class_list":["post-6224","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-aura","tag-aura-method","tag-display-notice","tag-display-toast","tag-lightning","tag-lightning-aura-component","tag-lightning-aura-method","tag-lightning-basic","tag-lightning-basics","tag-lightning-component","tag-lightningnotificationslibrary","tag-notificationas","tag-notifications-library","tag-salesforce","tag-salesforce-lightning-component","tag-salesforce-lightning-component-bundle","tag-toast-and-notice","tag-toast-message"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=6224"}],"version-history":[{"count":3,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6224\/revisions"}],"predecessor-version":[{"id":6237,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6224\/revisions\/6237"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=6224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=6224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=6224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}