|
|
Original image created by GPT 5o based on a prompt from Bob Buzzard
Introduction
The Winter '26 release of Salesforce introduced Lightning Web Components as local actions in screen flows. This allows client-side JavaScript to be executed as a 'function' in the flow, without the need for a round trip to the server for an Apex action.
Sample Actions
For this blog post I created a couple of LWCs to act as local actions :
- A modal that displays a warning/reminder to a user and make them think about what they were about to do
- A toast that displays the results of the user's request
In order to use an LWC as a local action, it must implement a function
named invoke, which carries out the
JavaScript processing. The flow runtime executes this function when it
encounters a local action element tied to an LWC. The invoke method for my
modal local action is shown below:
@api title;
@api size;
@api content;
@api async invoke() {
const result=await ModalDemo.open({
size: this.size,
title: this.title,
content: this.content
});
console.log(result);
}
This opens the modal and displays a message based on the
title,
size and
content properties supplied by the
flow, making it suitable for reuse across multiple scenarios. In order to
allow a flow to pass properties to an LWC, you need to decorate the property
with @api in the LWC and define it
in the targetConfigs section of
the js-meta.xml file:
<targets>
<target>lightning__FlowAction</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__FlowAction">
<property name="title" type="String" label="Modal title" role="inputOnly" />
<property name="content" type="String" label="Modal content" role="inputOnly" />
<property name="size" type="String"
label="Modal size" default="large" role="inputOnly" />
</targetConfig>
</targetConfigs>
Note that I've defined these with a role of inputOnly, as the component only
uses these properties to display the modal.
The Flow
I have simple flow based on the scenario of deleting a contact:
The Warning Modal configuration
supplies the property values for the modal for this scenario.
These properties are simple text values here, but any resource can be used, as
this the case for the
Success Toast action which uses the
contactInformation formula
resource:
which is constructed from the record detail of the contact to be deleted:
Executing the Flow
For demo purposes I've added the flow to a Lightning App Builder page - note
that it doesn't delete anything, just claims to have done so!
A Gotcha
Fun fact - my original idea for this demo was to have a confirmation dialog
asking if you were sure you wanted to delete the record. I had to pivot from
this, as it appears that it is currently not possible to pass information back
to the flow from the LWC.
This would typically be achieved by publishing a FlowAttributeChangeEvent
to update a property indicating if the user has confirmed or not, but when I
try this (even when that is all the invoke method does!) I get the following
error from the LWC:
I'm not sure whether this is me (I don't think so, as I've confirmed I'm doing
the right thing based on multiple blogs and articles), unsupported (I can't
find anything in the docs), or a bug, but it does rather limit the usefulness
of this feature so hopefully it's either my mistake or Salesforce sort it out
soon!
