Create Flow Local Actions using Lightning Web Components

To execute client-side logic in your flow, build or modify custom Lightning web components to use as local actions in flows. For example, get data from third-party systems without going through the Salesforce server, or open a URL in another browser tab. After you configure the component’s meta XML, and JavaScript code, it’s available in Flow Builder as a Core Action element.

Lightning web components in flows must comply with Lightning Locker restrictions.
Flows that include Lightning web components are supported only in Lightning runtime.
Lightning web components require a browser context to run, so flow local action components are supported only in screen flows.

Note

Example

Here’s a sample ShowToastExampleComponent component and JavaScript class, which triggers an alert that displays a toast message on screen before navigating to the next flow screen. In Flow Builder, local actions are available from the Core Action element.

Use the lightning/toast module instead to display a toast notification on LWR sites. For more information, check out Component Reference: Toast.

Tip

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3   <apiVersion>63.0</apiVersion>
4   <isExposed>true</isExposed>
5   <targets>
6       <target>lightning__FlowAction</target>
7   </targets>
8   <targetConfigs>
9       <targetConfig targets="lightning__FlowAction">
10           <property name="toastTitle" type="String" label="Toast title to display" />
11           <property name="toastMessage" type="String" label="Toast message to display" />
12       </targetConfig>
13   </targetConfigs>
14</LightningComponentBundle>

1<template>
2   Local action templates should be blank.
3</template>

1import { api, LightningElement } from 'lwc';
2import { ShowToastEvent } from 'lightning/platformShowToastEvent';
3
4
5export default class ShowToastExampleComponent extends LightningElement {
6   @api toastTitle;
7   @api toastMessage;
8
9   @api invoke() {
10       this.dispatchEvent(new ShowToastEvent({
11           title: this.toastTitle,
12           message: this.toastMessage,
13       }));
14   }
15}