Pass data from LWC to Flow

 

Pass data from LWC to Flow

In this topic we will get to know about how to pass data from LWC component into flow.

To send data from LWC component, we have have to dispatch an event of “{FlowAttributeChangeEvent}” module from ‘lightning/flowSupport’

FlowAttributeChangeEvent — Informs the runtime that a component property has changed.

Click Here for more information about ‘lightning/flowSupoort’ 

to send data, you have to first make public property by annotating with @api decorator then pass that property into FlowAttributeChangeEvent module.

After that we have to set property in target config

In Screen flow, drag and drop your LWC component so that it can display on your screen flow and provide api name of it. 

here I have given api name is “pass_data_from_lwc”

Make another screen to display value that have been passed from LWC component. Take a ‘Display Text’ and put value of that property comes from LWC component.

In this demostration, I have given “{!pass_data_from_lwc.someText}”

pass_data_from_lwc — its my api name of lwc component in screen flow

someText — property comes from lwc component

Output

Follow me on linkedIn and Twitter for such more related post