Flow

A lightning-flow component represents a screen 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.

1<template>
2    <lightning-flow
3        flow-api-name='Survey_customers'
4    >
5    </lightning-flow>
6</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.

1<template>
2    <lightning-flow
3        flow-api-name='Survey_customers'
4        flow-input-variables={inputVariables}
5        onstatuschange={handleStatusChange}
6    >
7    </lightning-flow>
8</template>

1get inputVariables() {
2    return [
3        {
4            name: 'OpportunityID',
5            type: 'String',
6            value: '<Opportunity.Id>'
7        },
8        {
9            name: 'AccountID',
10            type: 'String',
11            value: '<Opportunity.AccountId>'
12        }
13    ];
14}
15
16handleStatusChange(event) {
17    if (event.detail.status === 'FINISHED') {
18        // set behavior after a finished flow interview
19    }
20}

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

If you have custom Lightning Web Components or Aura components in your flow, then you won’t be able to use lightning-flow on Experience Cloud sites that use Lightning Web Runtime.

The onstatuschange event returns these parameters.

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.

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.