{"id":6632,"date":"2022-02-22T14:17:00","date_gmt":"2022-02-22T14:17:00","guid":{"rendered":"https:\/\/www.greytrix.com\/blogs\/salesforce\/?p=6632"},"modified":"2024-09-04T07:00:02","modified_gmt":"2024-09-04T07:00:02","slug":"displaying-types-of-toast-message-in-lightning-web-component","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/22\/displaying-types-of-toast-message-in-lightning-web-component\/","title":{"rendered":"Displaying Types of Toast Message in Lightning Web component"},"content":{"rendered":"\n<p>In this blog, we are going to discuss on Displaying <strong>Types of Toast Message <\/strong>in Lightning Web component which pops up an alert of <strong>Success, error, warning, and Info <\/strong>message for users.<\/p>\n\n\n\n<p>A Toast message simply provides information to alert users.<\/p>\n\n\n\n<p>Toast messages i.e., ShowToastEvent also support Experience Builder sites but are not supported in login pages in ExperienceBuilder sites.<\/p>\n\n\n\n<p>To display a toast message in Lightning Experience we need to import <strong>ShowToastEvent <\/strong>from the <strong>lightning\/platformShowToastEvent module.<\/strong><\/p>\n\n\n\n<p><strong>Before doing source code you have to follow these steps below &#8211;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a lightning web component page using <strong>visual studio code<\/strong>.<\/li>\n\n\n\n<li>Give any name to an LWC page as we are giving as <strong>toastExample<\/strong>. Use Control Shift P and select SFDX: Create lightning Web Component.<\/li>\n\n\n\n<li>Or you can also go for using control shift P is <strong>go to View <\/strong>and select <strong>command Palette.<\/strong><\/li>\n\n\n\n<li>We are using this command palette to create SFDX: Create lightning Web Component. and <strong>authorize our org.<\/strong><\/li>\n\n\n\n<li>Now you are ready to do the source code let\u2019s start and understand the below example <strong>with Js, Html, and XML page on visual studio code.<\/strong><\/li>\n<\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/1.-toastExample.html.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\/2022\/02\/1.-toastExample.html.png\" alt=\"toastExample.html\"><\/a><\/center>\n<font size=\"2\"><center><i>toastExample.html<\/i><\/center><\/font>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/2.-toastExample.js-1.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\/2022\/02\/2.-toastExample.js-1.png\" alt=\"toastExample.js\"><\/a><\/center>\n<font size=\"2\"><center><i>toastExample.js<\/i><\/center><\/font>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/3.-toastExample.js-2.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\/2022\/02\/3.-toastExample.js-2.png\" alt=\"toastExample.js continuation\"><\/a><\/center>\n<font size=\"2\"><center><i>toastExample.js continuation<\/i><\/center><\/font>\n\n\n\n<h2 class=\"wp-block-heading has-vivid-red-color has-text-color has-link-color wp-elements-a2f652a73c89cc4d61c4db730f860a34\"><strong>This is the XML page where we want to show our alert message or notification.<\/strong><\/h2>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/4.-toastExample.js-meta.xml_.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\/2022\/02\/4.-toastExample.js-meta.xml_.png\" alt=\"toastExample.js-meta.xml\"><\/a><\/center>\n<font size=\"2\"><center><i>toastExample.js-meta.xml<\/i><\/center><\/font>\n\n\n\n<h2 class=\"wp-block-heading has-vivid-red-color has-text-color has-link-color wp-elements-75b6ca7d76213ffdde0d700f1fdb4935\"><strong>Now let\u2019s add this Toast LWC on the Home Page.<\/strong><\/h2>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/5.-Buttons-in-LWC.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\/2022\/02\/5.-Buttons-in-LWC.png\" alt=\"Buttons in LWC\"><\/a><\/center>\n<font size=\"2\"><center><i>Buttons in LWC<\/i><\/center><\/font>\n\n\n\n<h2 class=\"wp-block-heading has-vivid-red-color has-text-color has-link-color wp-elements-f57c62fbd47d2f4941a9c691ee6181e9\"><strong>Now after a button click, you can see the alert on Home Page &#8211;<\/strong><\/h2>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/6.-Success-Error-Warning-Toast-message.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\/2022\/02\/6.-Success-Error-Warning-Toast-message.png\" alt=\"Displaying Types of Toast Message in Lightning Web component\"><\/a><\/center>\n<font size=\"2\"><center><i>Success Error Warning Toast message<\/i><\/center><\/font>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2022\/02\/7.-Info-Toast-Message.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\/2022\/02\/7.-Info-Toast-Message.png\" alt=\"Displaying Types of Toast Message in Lightning Web component\"><\/a><\/center>\n<font size=\"2\"><center><i>Info Toast Message<\/i><\/center><\/font>\n\n\n\n<p>Using the above steps we hope that you are able to add Toast Messages to your LWC application\/screens. <\/p>\n\n\n\n<p>We hope that you find this blog helpful, if you still have queries, don\u2019t hesitate to contact us at&nbsp;<a rel=\"noreferrer noopener\" href=\"mailto:salesforce@greytrix.com\" target=\"_blank\">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><strong>Related Posts<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/01\/10\/how-to-create-a-quote-template-in-salesforce\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create A Quote Template In Salesforce?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/09\/22\/how-to-use-email-template-in-apex-code\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Use Email Template in Apex Code<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/14\/how-to-create-multi-select-pick-list-field-using-lightning-web-component\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/14\/how-to-create-multi-select-pick-list-field-using-lightning-web-component\/\" rel=\"noreferrer noopener\">How to Create Multi-Select Pick-list Field Using Lightning Web Component<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/01\/17\/how-to-create-records-from-apex-restful-service-in-salesforce\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create records from Apex Restful Service<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/08\/14\/how-to-avoid-null-pointer-exception-by-using-safe-navigator-operator\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Avoid Null Pointer Exception By Using Safe Navigator Operator (?.)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/08\/17\/how-to-create-a-dynamic-multi-filter-object-in-salesforce-part-i\/\" target=\"_blank\" rel=\"noreferrer noopener\">Create a dynamic multi-filter object in Salesforce-Part I<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/01\/31\/how-to-call-the-apex-method-in-lightning-web-component\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to call the apex method in lightning web component<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, we are going to discuss on Displaying Types of Toast Message in Lightning Web component which pops up an alert of Success, error, warning, and Info message for users. A Toast message simply provides information to alert users. Toast messages i.e., ShowToastEvent also support Experience Builder sites but are not supported in\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2022\/02\/22\/displaying-types-of-toast-message-in-lightning-web-component\/\">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":[1168,206,207,208,1050,1049,367,651,1032,1276,1167,1170,1277],"class_list":["post-6632","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-display-toast","tag-lightning","tag-lightning-basics","tag-lightning-component","tag-lightning-web-component","tag-lwc","tag-salesforce","tag-salesforce-lightning-component","tag-salesforce-lightning-component-bundle","tag-showtoastevent","tag-toast-and-notice","tag-toast-message","tag-toast-message-on-a-button-click"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6632","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=6632"}],"version-history":[{"count":3,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6632\/revisions"}],"predecessor-version":[{"id":9451,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6632\/revisions\/9451"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=6632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=6632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=6632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}