3

I'm calling an LWC from a flow. A parent lwc calls a child lwc. The child dispatches a custom event which calls a method on the parent that attempts to dispatch a showtoastevent.

child:

handleError(errorMessage) {

    console.log('Limit Reached');

    const limitEvent = new CustomEvent('limitreached', {
       detail: errorMessage
    });

    this.dispatchEvent(limitEvent);
}

parent:

handleNotification(event) {
    console.log('**********IN PARENT***********');
    console.log('DETAIL---'+event.detail);
    const evt = new ShowToastEvent ({
        title: 'Warning',
        message: event.detail,
        mode: 'pester',
        varant: 'error'
    });
    this.dispatchEvent(evt);
}

I can see from the console that the parent method is called but nothing displays on the page.

Here it says that an embedded lwc in a vf page doesn't work either. Is this also true for an embedded lwc in a flow? ShowToastEvent notification is not displayed in LWC

5

2 Answers 2

5
+100

You can show ShowToastEvent from embedded LWC in a flow.
There is no limits for it here : lightning-platform-show-toast-event,

About ShowToastEvent not working in Visualforce Pages,
We use our LWC in a Visualforce Page using Lightning Out.
And ShowToastEvent doesn't work in Lightning Out (Standalone Lightning App, see targets for Platform Show Toast Event)

If there was something,
It would be included here : Runtime Considerations for Flow Screen Components.

To check your case I created a simple Screen Flow and added one LWC to it.
Then I created a simple Action button from which I call this Flow enter image description here

The flow LWC element :

enter image description here

The LWC JS code :

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
 
export default class TestFlowScreen extends LightningElement {
    connectedCallback(){
        try {
            let eventDetail = 'TestFlowScreen';
            console.log('connectedCallback');
            console.log('DETAIL---' + eventDetail );
            const evt = new ShowToastEvent ({
                title: 'Warning',
                message: eventDetail,
                mode: 'pester',
                variant: 'error'
            });
            this.dispatchEvent(evt);
        } catch (error) {
            console.error(error);
        }
    }
}

And when I press the button, I see the Event.

enter image description here

SO :

Please ensure that you imported the ShowToastEvent as expected :

import { ShowToastEvent } from 'lightning/platformShowToastEvent';
  • Double check if event.detail can be shown in ShowToastEvent.message.
  • variant not varant !!!
  • put your code from handleNotification() method in try{}catch(error){} block to see any errors happen.

Please say if any of it fixed your issue.

1
  • Hi, I used your example but it only works if the screen flow is called from a record page, or quick action... when I tried to call from a list view action (using the flow URL) didnt not work. BTW thank for you answer. Still looking for a alternatives. :)
    – vivi-ramji
    Oct 1, 2023 at 20:09
1
  1. As per documentation, platformShowToastEvent need to be imported in parent component js.
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

Kindly check if import statement is there. Documentation Link for your reference-> https://developer.salesforce.com/docs/component-library/bundle/lightning-platform-show-toast-event/documentation

You must log in to answer this question.

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