Up next in 10
Supercharge Your Flows: Using Lightning Web Components as Flow Actions
Sep 12, 2025
Show More Show Less
View Video Transcript
0:07
Hello everyone. In this video, we are
0:09
going to see how to invoke a lightning
0:12
web component
0:15
in a Salesforce flow as an action. Let's
0:20
say you have created a lightning web
0:22
component and then you wanted to invoke
0:23
that particular lightning web component
0:25
from a flow. then you can make use of
0:28
this video as a reference. Please make
0:30
sure that the lightning web component
0:33
will be executed as an action. So we are
0:37
not going to display that on a screen.
0:40
Uh for example, we create apex invocable
0:44
method and then we will call that in
0:48
Salesforce flow as an action.
0:52
the Apex will run
0:54
uh in the Apex server and then it will
0:56
return the value. We will be able to
0:58
store that in Salesforce flow variables
1:01
if needed and then we will be able to
1:03
make decisions based on the business use
1:06
cases whatever we have. Similarly, if
1:08
you wanted to do the same thing instead
1:10
of Apex, if you wanted to use Lightning
1:12
Web Component, then you can refer this
1:15
video.
1:16
Starting Salesforce winter 26 release,
1:20
we have a target called lightning
1:23
double_flow action
1:26
which can be utilized in Salesforce
1:28
lightning web component. So that the
1:30
lightning web component can be invoked
1:32
as an action. When you create this
1:34
lightning web component in the
1:36
JavaScript, we have to
1:39
um use a method called invoke so that
1:43
this particular method will be executed
1:45
when this lightning web component is
1:49
invoked as an action.
1:52
Before running into the technical uh
1:56
side of it, let's look at a sample flow.
1:59
So I created a screen flow
2:02
in the welcome I'm just uh displaying a
2:05
text saying welcome to form factor
2:07
check. Next this is my lightning web
2:11
component. So the lightning web
2:13
component name is form factor action.
2:16
I'm invoking the lightning web component
2:19
and then I'm storing the return value
2:21
from the lightning web component
2:23
in this form factor value which is a
2:26
flow variable.
2:29
In the end screen, I'm displaying a text
2:31
saying you are viewing it from the type
2:33
of screen the user is viewing the
2:35
application and then a thank you note.
2:39
Let's uh run this. I'm currently running
2:43
this screen flow from my
2:47
desk uh sorry uh from my laptop. So the
2:50
screen will be large. So it should
2:52
display that I'm viewing it from large
2:56
screen and then it is displaying a thank
2:58
you note. So the lightning web component
3:00
was invoked and from the lightning web
3:02
component I'm using the form factor and
3:05
then I'm returning that form factor back
3:07
to this Salesforce flow. Let's look at
3:09
the light uh
3:12
code behind this. So in HTML it will be
3:16
empty. So if you scroll down, I would
3:19
have mentioned that since it is an
3:21
headless action, the template will be
3:24
null or empty. In the JavaScript,
3:29
I'm using RT API for form factor. So
3:31
this is the variable which will be
3:33
returned back to the flow.
3:36
So this is the form factor variable that
3:39
will be available in the Salesforce flow
3:42
configuration. so that the value stored
3:44
in this form factor variable will be
3:46
passed back to the Salesforce flow. So
3:49
at APA invoke so this is a method that
3:51
will be invoked. I have a simple
3:53
console.log statement and then I'm
3:56
getting the current form factor and I'm
3:59
assigning the form factor to the current
4:00
form factor and then I'm displaying what
4:02
is the value using console.log
4:05
statement.
4:07
So this particular form current form
4:09
factor is coming from this form factor.
4:12
So here using at
4:14
Salesforce/client/formmf
4:16
factor I'm getting what is the form
4:18
factor. So this particular lightning web
4:21
component which I have created can be
4:24
reused in multiple salesforce flows
4:27
where I have to do some decisions based
4:30
on the
4:32
viewing device. If it is from mobile
4:35
then I have to run into a different path
4:38
in the flow. then I can make use of this
4:40
reusable lightning web component and
4:42
then I can do the decisions in the flow.
4:45
So here I'm just uh displaying a end
4:48
screen but here I can do add an decision
4:51
and then based on the returned form
4:53
factor value I can make multiple
4:55
decisions
4:57
for mobile I can hide an uh I can run a
5:00
different uh business process. if they
5:02
are viewing it from the large screen, I
5:04
can have a different business um um
5:07
process.
5:11
So if you wanted to invoke a lightning
5:13
web component from your Salesforce flow
5:15
as an action, then you can make use of
5:17
this uh uh video as a reference.
5:21
Please check the video description. In
5:23
the video description, I have shared my
5:25
blog post. From the blog post, you
5:27
should be able to get the JavaScript and
5:28
as well as the configuration file for
5:30
the JS meta.xml file for your reference.
5:38
I hope it was helpful.
5:46
Thank you for watching.
#Internet Software