5

I have a problem with Toast Event in Lightning Out App. I don't know why when I click on button "Show notification" - nothing happens. I want to see notification, but it's not showing.

HTML file:

<template>
        <lightning-button label="Show notification" onclick={showNotification}> 
        </lightning-button>
 </template>

JS File:

import {
LightningElement,
track,
api,
wire
} from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class TreeGrid extends LightningElement {

showNotification() {
         const event = new ShowToastEvent({
             title: 'Get Help',
             message: 'Salesforce documentation is available in the app. Click ? in the upper-right corner.',
              variant: 'warning',
              mode: 'pester'
         });
         this.dispatchEvent(event);
     }
}
4
  • Can you give a little bit context? E.g. where are you using this component? Is it in Lightning Experience or Lightning Out App or some other place? Jun 28, 2019 at 9:04
  • @BartoszŚliwiński I use it in Lightning Experience, updated question Jun 28, 2019 at 9:12
  • So is the component placed on Lightning Record Page, Home page or somewhere else? I copied your code into my dev org and it works fine. Can you check if console logs something? Jun 28, 2019 at 9:21
  • @BartoszŚliwiński I am sorry, probably you are right! Component is embeded in VF Page, so its Lightning Out App . Do you know how to resolve the issue? Jun 28, 2019 at 9:23

3 Answers 3

11

As you can see here platformShoToastEvent can only be used in Lightning Experience explicitly.

Since standard toasts are based on Appliacation Events there is nothing to handle your event in Lightning OutApp.

So what usually happens with toast events?

  1. You dispatch an event which is most probably set to propagate outside shadow DOM boundary (see documentation).
  2. Event travels all the way up to Application that the component resides in.
  3. Event is handled by some other component that listens on ShowToastEvent.
  4. Listening component shows a toast message.

In your case the 3 part is not performed because there's no component listening to ShowToastEvent so the toast is not showed.

What can you do?

Use completely custom solution. Here you can find general guidelines on how to create toasts using pure HTML with slds CSS. Keep in mind that you may also need to create some JS code. You can find plenty of examples througout internet with sample solutions. Here's one example. I haven't tested that but looks good in general.


UPDATE

Salesforce added a feature that allows you to show a toast message in Visualforce Page as well. See sforce.one.showToast. After a bit of investigation it turned out that you can add lightning__showtoast event listener in your VFP to trigger this function when LWC tries to fire its own toast. Keep in mind that the event listener approach is not a documented solution and as such, it may stop working correctly at some point for whatever reasons.

<script>
    document.addEventListener('lightning__showtoast', event => {
        sforce.one.showToast(event.toastAttributes);
    });
    $Lightning.use("c:YourOutApp", () => {
        ...
    });
</script>
1

For a sanity check, try using an alternate browser or try in Incognito mode. For me, Chrome stopped producing toast messages (all other JavaScript and events worked). However, it worked in other browsers and incognito. Completely uninstalling and re-installing Chrome solved the issue. (Upgrading did not help.)

1
  • 1
    Same happened to me. But I didn't uninstall Chrome, just relaunched it after the complete exit and the events returned. Sep 21, 2023 at 14:53
-1

I had the same issue, and resolved it by doing the below, try this:

this.dispatchEvent(
   new ShowToastEvent({
             title: 'Get Help',
             message: 'Salesforce documentation is available in the app.',
             variant: 'warning',
             mode: 'pester'
         })
);

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .