We want to use Lightning toasts from Lightning Out. We want to do this using the standard new ShowToastEvent approach, so our components will work identically either in Lightning Experience or Lighting Out.

Our naive plan was to set up a listener on our VF page in which the Lightning Out component runs, catch the lightning__showtoast event, then pass it to the iframe parent using postMessage, listen for the message event in a top-level Ligthning component such as one running in the utility bar, retrieving the parameters, and then re-issuing the new ShowToastEvent event.

This all worked--almost. What we found is that when the listener on the VF page picks up the event, its parameters (title, message, mode etc.) are nowhere to be found--not in the detail field of the event, or anyw3here else. This is the case whether the component setting up the listener is an LWC or an Aura component. I have consulted the built-in file toastManager.js, which seems to be retrieveing the toast attributes by simply saying event.toastAttributes, but when I do that I just get undefined. A little bit of detective work reveals that new ShowToastEvent does some magic with "secure events", and places the parameters in this toastAttributes field, but that is not visible by the time the event arrives at the VF page listener.

How can I catch a lighting__showtoast event with the toast attributes intact so I can access them?

  • I got this to work by setting the API version of the component trying to access event.toastAttributes to 39.0 in order to disable Locker Service, but have no idea what unintended consequences that might lead to.
    – kamezaburo
    Commented Feb 5, 2020 at 1:22


You must log in to answer this question.

Browse other questions tagged .