2

I have a custom Lightning Web Component that I am using in a Flow. Unfortunately, the standard ShowToastEvent event does not work when an LWC is in a Flow.

Is there an alternative component I can use for this? Not necessarily a toast message, but something I can use without creating a separate component.

Something like on the standard detail page perhaps?

enter image description here

This is my component, and I want to handle any errors from the delete button.

<template>
    <lightning-record-form
        record-id={recordId}
        object-api-name={objectApiName}
        layout-type="Full"
        mode="view"
    ></lightning-record-form>
    <template if:true={showDeleteButton}>
        <lightning-button variant="destructive" label="Delete" icon-name="utility:delete" onclick={handleDelete}></lightning-button>
    </template>
</template>
4
  • We addressed this by displaying the error in the custom LWC's rendering.
    – Phil W
    Aug 11, 2023 at 11:55
  • Could you share a sample of the code? On discussing with some colleagues I've gone with some text formatted with slds-text-color_error but it doesn't look that great as it's just the text.
    – fred
    Aug 16, 2023 at 19:00
  • 1
    We didn't try to use SLDS error colouring. Instead there are options like showing a warning utility icon and the error message in a div with .slds-theme_error theme, or presentation of the error in an alert. Other options are available.
    – Phil W
    Aug 16, 2023 at 19:55
  • Thanks @PhilW that's helpful!
    – fred
    Aug 16, 2023 at 20:20

1 Answer 1

5

Other than using a customization such as unofficialsf.com's Show Toast Flow Action, I don't know of any standard way to address this issue. There are, however, many ways you could deal with errors, inline within your own LWC components.

An example might be to use something like this in your component, showing this part of the template when there's an error (which would typically actually originate from a property of your LWC):

<div class="slds-theme_error">
    <lightning-icon icon-name="utility:error" variant="inverse" size="small"></lightning-icon>
    <span class="slds-p-left_xx-small">Some error message</span>
</div>

This might look something like:

Simple error message display

Alternatively, you might like to use the lightning-alert component to present the message in a dismissable "dialog".

There are many other options you could choose from, including simply showing the errors in toasts (though as you said these may not work in all contexts).

You must log in to answer this question.

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