0

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);
     }
}
  • 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? – Bartosz Śliwiński Jun 28 '19 at 9:04
  • @BartoszŚliwiński I use it in Lightning Experience, updated question – Valentine Potapov Jun 28 '19 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? – Bartosz Śliwiński Jun 28 '19 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? – Valentine Potapov Jun 28 '19 at 9:23
3

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.

| improve this answer | |
0

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'
         })
);
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.