Developer Topic: An Early Look at the Interface for the New LWC Flow Component

In Winter ’23, you can now drop an LWC version of the Flow component into your own LWC’s, allowing you to build components that embed screen flows. Here’s an early look at the documentation. Let us know if find any bugs!

---

A lightning-flow component represents a flow interview in Lightning runtime. To use this component, build a flow with the Salesforce Flow Builder first.

To create a flow in your component, set the lightning-flow component’s flowApiName attribute to the name of the flow that you want to use. The component includes navigation buttons (Back, Next, Pause, and Finish), for users to navigate within the flow.

This example creates and starts the Survey Customers flow.

<template>
    <lightning-flow
        flow-api-name='Survey_customers'
    >
    </lightning-flow>
</template>

You can provide initial inputs for the interview by setting the flowInputVariables attribute to an array of input values.

This example creates and starts an interview by passing in initial values for the flow. It handles a change in the interview using the onstatuschange event handler.

<template>
    <lightning-flow
        flow-api-name='Survey_customers'
        flow-input-variables={inputVariables}
        onstatuschange={handleStatusChange}
    >
    </lightning-flow>
</template>

get inputVariables() {
    return [
        {
            name: 'OpportunityID',
            type: 'String',
            value: '<Opportunity.Id>'
        },
        {
            name: 'AccountID',
            type: 'String',
            value: '<Opportunity.AccountId>'
        }
    ];
}

handleStatusChange(event) {
    if (event.detail.status === 'FINISHED') {
        // set behavior after a finished flow interview
    }
}

Usage Considerations

Thelightning-flow component only supports active flows for the flowApiName attribute.

The onstatuschange event returns these parameters.

Parameter	Type	Description
activeStages	Object[]	The current value of the $Flow.ActiveStages variable in the flow. Available in API version 42.0 and later.
currentStage	Object	The current value of the $Flow.CurrentStage variable in the flow. Available in API version 42.0 and later.
flowTitle	String	The flow’s label.
helpText	String	The help text for the current screen. Available in API version 42.0 and later.
guid	String	The interview’s GUID. Available in API version 42.0 and later.
outputVariables	Object[]	The current values for the flow’s output variables.
status	String	The current status of the interview.

These are the valid status values for a flow interview.

• STARTED: The interview is started and ongoing.
• PAUSED: The interview is paused successfully.
• FINISHED: The interview for a flow with screens is finished.
• FINISHED_SCREEN: The interview for a flow without screens is finished.
• ERROR: Something went wrong and the interview failed.

Customizing a Flow’s Finish Behavior

By default, a finished flow without screens displays the message “Your flow finished.” A finished flow with screens returns users to the first screen for a new interview.

Change this behavior with the flowFinishBehavior attribute to manage whether a new interview should restart or only run once.

These are the valid flowFinishBehavior values.

• NONE: The flow only runs once.
• RESTART: The flow restarts once it has finished.

To customize what happens when the flow finishes, add an event handler for the onstatuschange action when the status value contains FINISHED.