Control What Happens When a Flow Interview Finishes

By embedding a flow in a custom lightning-flow component, you can shape what happens when the flow finishes.

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

Embed a Flow using lightning-flow

By default, when a flow user clicks Finish, a new interview starts and the user sees the first screen of the flow again. By embedding a flow in a custom lightning-flow component, you can shape what happens when the flow finishes by using the onstatuschange event handler.

To redirect to another page, use the Navigation service.
To control what happens when an auto-launched flow finishes, check for the FINISHED_SCREEN status.

1<!-- myComponent.html -->
2<template>
3  <lightning-flow flow-api-name="myFlow" onstatuschange={handleStatusChange}> </lightning-flow>
4</template>

1// myComponent.js
2handleStatusChange(event) {
3    if(event.detail.status === 'FINISHED') {
4        // Redirect to another page in Salesforce., or
5        // Redirect to a page outside of Salesforce., or
6        // Show a toast, or something else
7    }
8}

Example: Navigate to a Record When the Flow Finishes

This example redirects the user to a case created in the flow by using the lightning/navigation NavigationMixin.Navigate method.

1// myComponent.js
2import { LightningElement } from "lwc";
3import { NavigationMixin } from "lightning/navigation";
4
5export default class MyComponent extends NavigationMixin(LightningElement) {
6  navigateToRecord(recordId) {
7    this[NavigationMixin.Navigate]({
8      type: "standard__recordPage",
9      attributes: {
10        recordId,
11        actionName: "view",
12      },
13    });
14  }
15
16  handleStatusChange(event) {
17    if (event.detail.status === "FINISHED") {
18      const outputVariables = event.detail.outputVariables;
19      for (let i = 0; i < outputVariables.length; i++) {
20        const outputVar = outputVariables[i];
21        if (outputVar.name === "redirect") {
22          this.navigateToRecord(outputVar.value);
23        }
24      }
25    }
26  }
27}

For more information, see Navigation.