Configure the Component Markup and Design Resource for a Flow Action

Make your custom Lightning web components available as flow local actions by targeting lightning__FlowAction.

Here’s sample code for a simple “Show Toast” component that sets a couple of attributes and displays a toast message on the screen.

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>

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}

When admins reference this component in a flow, they can pass data between the flow and the LWC component. To set an attribute using values from the flow, use the Set Input Values tab. To store an attribute’s value in a flow variable, use the Store Output Values tab.

See Also

Release Preview

This release is in preview. Features described here don't become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can't guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.