The lightning:flow component is commonly inserted into aura components to enable screen flows to run when those components are rendered. What if you want to insert a flow into your own LWC component?If you’re building an LWC, you can’t currently just invoke lightning:flow because it has not yet become available in an LWC version (and LWC doesn’t allow Aura components to be inserted).
To address, that, the ScreenFlow LWC installable from this page provides a way to insert a flow into your own LWC container. Simply invoke it in your LWC like this:
<template>
<c-screen-flow width='100%' height='100' flow-name='testFlow' name="uniqueName" flow-params={flowParamsJSON}></c-screen-flow>
</template>When your component instantiates, it will load the named flow into an iframe created with the specified height and width, and pass in any input params you provide.
How It Works
Getting this to work required a bit of bricolage. When ScreenFlow initializes, it sets up some message-passing infrastructure and determines the org URL. It then renders an iframe and passes to that iframe the name of a visualforce page called screenFlow that’s provided in this package. The URL that loads the screenFlow page also contains query parameters with any input parameters.
The visualforce page has script on it that creates a lightning:flow aura component and then sends it a start flow command. More event infrastructure is put in place so that when the lightning:flow generates some sort of status change, the event it fires gets passed up to the visualforce page, where it’s converted into a message that get passed across the iFrame boundary to the parent screenFlow lwc, which will dispatch an event (“flowstatuschange”) with any output data. Your container can register to receive flowstatuschange events so it can receive the output values of the flow.
Install
Source Code
Keywords
Add Flows to LWC’s