Wednesday, 30 January 2019

Toast Notification in Lightning Web Components | ShowToastEvent | (LWC)


Lets talk about how to fire Toast Notification in Lightning web component | LWC. Toast message is used to pop up the alert message to user. To display toast notification you need to import the ShowToastEvent from lightning/platformShowToastEvent module and dispatch the ShowToastEvent event with message , title and variant.

Syntax 

ShowToastMessage() {
     const toastEvnt = new  ShowToastEvent( {
           title: 'Welcome in Apex Hours',
           message: 'This is your toast message',
           variant: 'info',
     });
     this.dispatchEvent (toastEvnt);

}


Here is sample code:-

toastMessage.html
<template>
    <lightning-card title="Show Toast Message" icon-name="custom:custom56">
        <lightning-input label="Message" value={msg} onchange={msgchange}></lightning-input>
        <lightning-button label="Show Toast Message" onclick={ShowToastMessage}></lightning-button>
    </lightning-card>
</template>


toastMessage.js
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ToastMessage extends LightningElement {
    msg = '';
    msgchange(event){
        this.msg = event.target.value;
    }
    ShowToastMessage() {
        const toastEvnt = new  ShowToastEvent( {
              title: 'Welcome in Apex Hours' ,
              message: this.msg ,
              variant: 'success' ,
        });
        this.dispatchEvent (toastEvnt);
   }
}


toastMessage.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="ToastMessage">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>


Output


Check this post for more detail.

Please check below post on Lightning Web Components:-
  1. Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org
  2. Invoke Apex Controller from Lightning Web Component | Lightning Web Component inside Another LWC
  3. Design attributes in Lightning Web Components | CSS and SVG Files | Lightning Web Components | targetConfigs
  4. How to get current user id in lightning web component | Access logged in user ID in LWC

Check our YouTube Channel for more recording in Lightning Web Components. 

Thanks,
Amit Chaudhary
amit.salesforce21@gmail.com

9 comments:

  1. Hi Amit,

    Thanks for the post. I have one problem. I am not able to see the components on edit page(Any - Record and Home page) in custom components section. Already I have added the targets in meta.xml file. Please help.

    ReplyDelete
    Replies
    1. you need to edit you flexi page and need to add the components on page.

      Delete
    2. I am doing the same but can not see my components.

      Delete
    3. Update meta.xml file like below
      true

      lightning__AppPage
      lightning__RecordPage
      lightning__HomePage

      Delete
  2. i found problem in meta.xml file. isExposed was false that's why it's not coming in components section.

    ReplyDelete
    Replies
    1. Great your issue is resolved , Yes you need set
      true

      Delete
  3. Shall I display toast in lighting community pages?

    ReplyDelete
  4. Hi Amit,

    Thanks for the post, however, I am looking to handle the toast event in my LWC.
    I have a flexipage where we have a bunch of components including LWCs, I want to handle the toast event and execute some js code in my LWC. Any ideas please ?

    ReplyDelete