Simple LWC Toaster Component + LWC as Action

Isaias

@ssisaias

Today, we'll be looking at how to create a simple LWC Toaster component. This toaster component will allow you to display a toaster message to the user.

First things first, connect VSCode to your org create a new LWC component called lwcToaster

Next, let's add the basic HTML template for our component. This will be the markup for our toaster. For this we are using Quick Action Panel LWC, that will tell salesforce that this will be a dedicated Action modal (which we are going to use to test our toaster component).

lwcToaster.html:

<template>
    <!-- sldsValidatorIgnoreNextLine -->
    <lightning-quick-action-panel header="Toaster...">
    </lightning-quick-action-panel>
</template>

Then we can add our JS Code. We use the showToastEvent event to display the toast message.

lwcToaster.js:

import { LightningElement } from 'lwc';
import { ShowToastEvent } from "lightning/platformShowToastEvent";


export default class LwcToaster extends LightningElement {

  connectedCallback() {
    setTimeout(() => {
      this.showToast('Process Completed', 'Success', 'success')
    }, 2000);

    setTimeout(() => {
      this.showToast('Process Started',  'Info')
    }, 4000);

    setTimeout(() => {
      this.showToast('Error while sending emails', 'Unknow error', 'error', 'sticky')
    }, 6000);

    setTimeout(() => {
      this.showToast('Emails sent', 'Warning', 'warning', 'pester')
    }, 8000);

    setTimeout(() => {
      this.closeQuickAction();
    }, 10500);
  }
  
  /**
  * @param {string} message - The message to be displayed in the toast
  * @param {string} title - The title of the toast
  * @param {string} variant - The variant of the toast (info, success, warning, error)
  * @param {string} mode - The mode of the toast (dismissable, pester, sticky)
  */
  showToast(message, title, variant="info", mode="dismissable") {
    this.dispatchEvent(
      new ShowToastEvent({
        title,
        message,
        variant,
        mode
      })
    );
  }

  closeQuickAction() {
    this.dispatchEvent(new CloseActionScreenEvent());
  }
}

As we will be using an action to test our component, we need to create a new action that uses our component. First let take a look in our meta file: lwcToaster.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>ScreenAction</actionType>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

The targetConfigs > targetConfig > actionType: "ScreenAction" tells salesforce out intention to use this component as an action.

Deploy the component and let's create the action after.

Now, let's create our action. Go to Setup > Object Manager > Account > Buttons, Links, and Actions > New Action

Now, all the is left, is to add it to the page layout. Go to Setup > Object Manager > Account > Page Layouts > Select the you will use > Mobile & Lightning Actions

From there, click to override the actions if needed, and then we can add the action to the layout.

voila! Now we can select an Account record and the button will be there.

References:

• Lightning Web Components - Show Toast Event