How to create dynamic and interactive flows using LWC Components?

In this blog post, let’s understand how we can create dynamic and interactive flows using LWC components.

By reading this post, you will be able to understand,

• How to include LWC component in screen flow
• How to pass data String & Collection from LWC to screen flow
• How to pass data Collections from Flow to LWC
• How to configure input and output parameters in LWC to accept data
• How to navigate to next screen by using flow-support event
• How to use Data Table in Flow and LWC

To use an LWC in a screen flow, make sure to enable the target tag like this:

The lightning/flowSupport module provides events that enables a component to control flow navigation and notify the flow if changes in attribute values.

Below is the list of events lightning/flowSupport supports,

• FlowAttributeChangeEvent — Informs the runtime that a component property has changed.
• FlowNavigationBackEvent — Requests navigation to the previous screen.
• FlowNavigationNextEvent — Requests navigation to the next screen.
• FlowNavigationPauseEvent — Requests the flow runtime to pause the flow.
• FlowNavigationFinishEvent — Requests the flow runtime to terminate the flow.

Out of these events we will learn how to use FlowNavigationNextEvent, FlowAttributeChangeEvent in our implementation scenario.

Scenario

Create a button and input field in LWC. Onclick of button pass 10 contact records to flow, then navigate to next flow screen and whatever value entered in LWC input filed, display it in flow.

Also Display 10 contact records as data table in screen flow. Then if user selected row/records in Flow data table, then pass the selected records to LWC and show as Data table.

Pass Data from LWC to Flow

Before implementing will divide the scenario, first will see how to pass the data from LWC to Flow. It’s recommended that first create LWC component, then create FLOW to avoid errors. 

Scenario 1: Create a button and input field in LWC. Onclick of button pass 10 contact records to flow, then navigate to next screen and whatever value entered in LWC input filed, display it in flow. Also show 10 contact records as data table in flow.

Next, will create LWC component. 

In this HTML component, a button is created using the lightning-button tag, and an input field is created using the lightning-input tag.

Next, in JS Since we’re calling an Apex method to fetch 10 records, we first imported the relevant class and method. We also imported `FlowAttributeChangeEvent` and `FlowNavigationNextEvent` from `lightning/flowSupport` to display the entered input data in the flow and allow navigation to the next screen.

To Navigate to next screen on click of button FlowNavigationNextEvent event is used. And that’s handled in handleGoNext() flow. Also to capture the property change in runtime used FlowAttributeChangeEvent . In both case custom event is created and it’s been fired. 

Now, let’s create the XML file, which is the most important step.

• To make your component usable in a flow screen, add the lightning__FlowScreen target.
• To include input and output fields in your component, use targetConfig properties.
• Use the InputOnly role when you want to receive data in the LWC, and OutputOnly to send data out from the LWC.

Note: If you don’t specify the role attribute, the default value allows input and output.

In our case, I need to pass an sObject collection to the flow, so I created an `OutputOnly` property called `contactlist`. To pass the input data entered, I also created a property named `passDataToFlow`.

Let’s see our XML component,

Now we are done with LWC, let’s create a screen flow.

Go to ->set up ->flow’s ->Click New Flow.

Add a screen element to canvas and search for LWC component in components tab add it to screen. Then I have added display text field to show the value entered in LWC as below.

1. Pass_Data_To_Flow_From_LWC is an API name of LWC component added in screen flow. 
2. {!Pass_Data_To_Flow_From_LWC.passDataToFlow}   – referenced LWC component property i.e. Data Table API name and property name.

Then added one more screen to show 10 contact records in data table.

In data Table source collection added LWC component API name and property as above. Also configure the row as needed. 

Now we are done with scenario one let’s look at our flow.

Next, will see how to pass data from flow to LWC.

How to pass data from Flow to LWC

Scenario: Whatever records selected in datatable of flow pass it to LWC then show those records as data table.

To pass selected records from data table to FLOW, let’s create a collection variable to store those. As we are selecting contact record, hence chosen record as data type and contact as object in variable.

Note: we will use same flow.

Next will create one more LWC component, where LWC will accept a collection variable as input data type. And display the selected records as a data table.

In JS created array to accept the collection variable from flow. i.e. inputDataFromFlow. And created columns array to display.

In property type we need to extend sObject and name as T. (This will be generally used).  Once extended the object, you can pass any kind of data.  Then create one more property name as inputDataFromFlow to store passed collection and used type as collection as collection of objects. And role as inputonly. 

Note:  This is a mandatory step to include else you can’t pass data to LWC from flow.

Now we are done with LWC part, let’s go to FLOW add this component in screen flow. 

So, let’s add one more screen to canvas. Then from canvas component add LWC component. Then in right hand side you can see input Type and property created in flow.  As I need to pass contact list, so chosen contact and passed selected records variable.

As we are added inputType property so once you added the component to the screen you can see these options. Also, we need to pass selected record collection variable as shown above.

Now we are done with our flow, lets see the final look of it.

Conclusion

In this blog post, we explored how to create dynamic and interactive flows using LWC components. You’ve learned how to include an LWC component in a screen flow, pass string and collection data between LWC and the flow, and configure input and output parameters for smooth data exchange.

Additionally, we covered how to use flow-support events for navigation to the next screen and how to integrate a Data Table in both Flow and LWC for better data handling. If you have any questions or doubts, feel free to leave a comment!

Output Video

Also Read

• Component Library 
• Configure a Component for Flow Screens

Share this article
• Facebook
• Twitter
• LinkedIn