Screen Flow and LWC complete each other when it comes to feature limitations. Do you want to handle and show the flow error exception message occured during your flow interview? You might face some limitation with displaying some fancy flow error message within screen lightning flow itself. You can easily solve this problem using lightning web component called within the flow itself. We are going to demo the same scenario using flow and a LWC called inside it.

Use Case – Handle Flow error using LWC occurred in Flow

Create an account from screen flow and add the flow on Home page in Salesforce. If any error occurred in screen flow, pass the error message to LWC and display the error message on UI.

Implementation – Handle flow error using LWC occurred

Create LWC which can be called inside Screen flow. Name it errorPannel.

errorPannel.html

<template>
    <div class="slds-notify slds-notify_alert slds-alert_error" role="alert">
        <lightning-formatted-rich-text value={errors}></lightning-formatted-rich-text>
    </div>
</template>

errorPannel.js

errors is a public property defined in the js file for accepting the value from flow.

import { LightningElement, api } from 'lwc';
export default class ErrorPannel extends LightningElement {
   @api errors;
}

errorPannel.js-meta.xml

This component is configured for flow. Public property in lwc is also exposed so that it can accept the value from flow.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="errors" label="Error Message" type="String" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Screen Flow – New Account

Demo – Show Screen Flow Error in LWC

Do you need help?

Stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.

GET IN TOUCH

Schedule a 1:1 Meeting with me