Call LWC component from Screen Flow and how to pass data from Flow to LWC

 

Call LWC component from Screen Flow and how to pass data from Flow to LWC

In this topic, we will discussed about how to call LWC component from Screen flow and how to pass data instantly from screen flow to LWC by enabling reactive component.

To make variable work as reactively, first and foremost we do to “enable reactive component” under “Process Automation Setting”. See image below 

Note: If your flow version is 59 or above then you don’t need to enable it.

Create LWC component and define a public property using @api decorator so that property mark as publicly.

After that, we need to configure the design attribute in metadeta xml file.

we have to declare targetconfig as lightning_FlowScreen, under that tag we have to declare some property so that we can see in screen flow.

For more information about XML Configuration click here.

To pass data from screen flow to LWC component, first declare a Text Component and give API name for that. here I have given API name as screen_text_name.

Drag and drop your LWC component into screen and in your property, pass your screen text component api name.

Output

Follow me on linkedIn and Twitter for such more related post