This blog post explains how to embed/place/use lightning component in Screen Flow. The Lightning component which will be used in Flow must implement interface lightning:availableForFlowScreens. Let's take a basic example with a contact insertion using screen flow. In this example, the lightning component is used a account look up search field.
To demonstrate this approach in a simple way I took lightning data services tag lightning:recordEditForm and to avoid complexity. The attributes specified in design:component will be accessible from flow. When these design attributes are mapped/connected to flow variables, the lightning component even can restore the field values from paused flows.
Once created the Lightning component then create a Screen flow to insert a Contact. Drag and drop the Lightning component created in previous step. Provide mapping for lightning component variables which are from design attribute section, to the Flow variables. The input and output variables mapping in flow will ensures the Lightning component loads the saved data when flow paused. The flow variable {!acRecId} in this case holds the account Id selected in Lightning component and makes it available for Insert contact stage in flow even user comes back to paused flows.
Add other text fields such as email and phone of contact to the flow screen and provide mapping in the final contact insert stage as mentioned below screenshots.
Adding Lightning component and other text fields in screen flow.
Drag and drop the create records action from flow actions and provide mapping for inserting contact record from flow input fields and variables.
Cheers!!!
 |
| Screen Flow preview |
To demonstrate this approach in a simple way I took lightning data services tag lightning:recordEditForm and to avoid complexity. The attributes specified in design:component will be accessible from flow. When these design attributes are mapped/connected to flow variables, the lightning component even can restore the field values from paused flows.
Once created the Lightning component then create a Screen flow to insert a Contact. Drag and drop the Lightning component created in previous step. Provide mapping for lightning component variables which are from design attribute section, to the Flow variables. The input and output variables mapping in flow will ensures the Lightning component loads the saved data when flow paused. The flow variable {!acRecId} in this case holds the account Id selected in Lightning component and makes it available for Insert contact stage in flow even user comes back to paused flows.
Add other text fields such as email and phone of contact to the flow screen and provide mapping in the final contact insert stage as mentioned below screenshots.
Adding Lightning component and other text fields in screen flow.
Drag and drop the create records action from flow actions and provide mapping for inserting contact record from flow input fields and variables.
Cheers!!!
0 comments
Note: only a member of this blog may post a comment.