Create and Start a Flow in a Custom Lightning Web Component

Create and start a screen flow from any Lightning web component to yours.

lightning-flow represents a flow interview in Lightning runtime. To create a flow in your component, set the lightning-flow component’s flow-api-name attribute to the API name of the flow that you want to use. To use this component, build a flow with the Salesforce Flow Builder first. The component includes the navigation buttons Back, Next, Pause, and Finish.

If your flow has custom Lightning web components or Aura components, then you can’t use lightning-flow on Experience Cloud sites that use Lightning Web Runtime.

Note

Example

This example creates and starts the Survey Customers flow.

1<!-- myComponent.html -->
2<template>
3  <lightning-flow flow-api-name="Survey_customers"> </lightning-flow>
4</template>

You can provide initial inputs for the interview by setting the flow-input-variables 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<!-- myComponent.html -->
2<template>
3  <lightning-flow
4    flow-api-name={flowName}
5    flow-input-variables={inputVariables}
6    onstatuschange={handleStatusChange}>
7  </lightning-flow>
8</template>

1// myComponent.js
2import { LightningElement } from "lwc";
3
4export default class MyComponent extends LightningElement {
5  opportunityId;
6  accountId;
7  customerLocation;
8
9  get flowName() {
10    if (this.customerLocation === "USA") {
11      flowname = "Survey_USA";
12    } else {
13      flowname = "Survey_General";
14    }
15  }
16
17  get inputVariables() {
18    return [
19      {
20        // Match with the input variable name declared in the flow.
21        name: "OpportunityID",
22        type: "String",
23        // Initial value to send to the flow input.
24        value: this.opportunityId,
25      },
26      {
27        // Match with the input variable name declared in the flow.
28        name: "AccountID",
29        type: "String",
30        // Initial value to send to the flow input.
31        value: this.accountId,
32      },
33    ];
34  }
35
36  handleStatusChange(event) {
37    if (event.detail.status === "FINISHED") {
38      // set behavior after a finished flow interview.
39    }
40  }
41}

Usage Considerations

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

The onstatuschange event returns these parameters.

If your flow has custom Lightning web components or Aura components, then you can’t uselightning-flow on Experience Cloud sites that use Lightning Web Runtime.

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 $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 status of the interview. Valid statuses for a flow interview are: `STARTED`: The interview successfully started. `PAUSED`: The interview successfully paused. `FINISHED`: The interview for a flow with screens finished. `FINISHED_SCREEN:` The interview for a flow without screens finished, and the component displayed a default screen with this message: Your flow finished. `ERROR`: Something went wrong and the interview failed.

Customizing a Flow’s Finish Behavior

Each flow component includes the navigation buttons Back, Next, Pause, and Finish, which navigate within the flow. By default, when the flow finishes, the component reloads the first screen for a new interview. To customize what happens when the flow finishes, add an event handler for the onstatuschange action when status is FINISHED.