Control Navigation in Flow Screen Components | Use Components in Salesforce Targets | Lightning Web Components Developer Guide

A flow screen component can control navigation programmatically by dispatching navigation events from the lightning/flowSupport module. You can advance to the next screen, go back, pause the flow, or finish it, and you can check which actions are available before firing an event.

Navigation Events

Import navigation events from lightning/flowSupport.

Event	Description
`FlowNavigationNextEvent`	Advances to the next screen. If the current screen is the last one, use `FlowNavigationFinishEvent`.
`FlowNavigationBackEvent`	Returns to the previous screen.
`FlowNavigationPauseEvent`	Pauses the flow interview and saves its state for later resumption.
`FlowNavigationFinishEvent`	Finishes the flow interview and triggers any configured post-flow behavior, such as a redirect URL.

Check Which Actions Are Available

Not every navigation action is available on every screen. For example, the Back action isn’t available if the current screen is the first screen, and the Pause action is available only in flows where saving is enabled. Before you fire a navigation event, check whether the corresponding action is available.

Flow Builder passes a list of available actions to your component through the availableActions property. Declare it as an @api property in your component’s JavaScript file.

1// myComponent.js
2import { LightningElement, api } from "lwc";
3
4export default class MyComponent extends LightningElement {
5  @api availableActions = [];
6}

The availableActions array contains string values for each action the current screen supports: "NEXT", "BACK", "PAUSE", "FINISH".

Use availableActions to show or hide navigation buttons and to guard navigation event dispatches.

1get canGoNext() {
2  return this.availableActions.find((action) => action === "NEXT");
3}
4
5get canGoBack() {
6  return this.availableActions.find((action) => action === "BACK");
7}

Dispatch a Navigation Event

Import the events you need, then dispatch them in event handlers.

1import { LightningElement, api } from "lwc";
2import {
3  FlowNavigationNextEvent,
4  FlowNavigationBackEvent,
5  FlowNavigationPauseEvent,
6  FlowNavigationFinishEvent,
7} from "lightning/flowSupport";
8
9export default class MyNavigationComponent extends LightningElement {
10  @api availableActions = [];
11
12  handleNext() {
13    if (this.availableActions.find((action) => action === "NEXT")) {
14      this.dispatchEvent(new FlowNavigationNextEvent());
15    }
16  }
17
18  handleBack() {
19    if (this.availableActions.find((action) => action === "BACK")) {
20      this.dispatchEvent(new FlowNavigationBackEvent());
21    }
22  }
23
24  handlePause() {
25    if (this.availableActions.find((action) => action === "PAUSE")) {
26      this.dispatchEvent(new FlowNavigationPauseEvent());
27    }
28  }
29
30  handleFinish() {
31    if (this.availableActions.find((action) => action === "FINISH")) {
32      this.dispatchEvent(new FlowNavigationFinishEvent());
33    }
34  }
35}

Hide the Built-In Footer

When your component provides its own navigation buttons, hide the flow screen’s built-in footer so that the screen has only one set of navigation controls. In Flow Builder, open the screen element that contains your component. In the Configure Footer section, disable Show Footer.

Navigation Event Guidelines

Follow these guidelines when using navigation events.

Fire navigation events in event handlers or in methods that an event handler invokes.
Don’t fire navigation events outside of event handlers. Doing so leads to a poor user experience.
Don’t fire navigation events in lifecycle hooks such as connectedCallback or renderedCallback.
Avoid firing FlowAttributeChangeEvent and a navigation event at the same time. There’s no guarantee that the component has rendered updated values before navigation begins, which can cause race conditions.

To improve flow performance, consider these best practices.

Don’t use a dummy screen to perform navigation. It leads to poor flow performance.
Don’t include code after dispatching a FlowNavigationNextEvent. Navigation moves the user away from the current screen immediately, so any code after the dispatch doesn’t run.

If you encounter a scenario where navigation must be done within the initialization phase of the screen because data isn’t yet available to Flow Decision Nodes, post a request for an upgrade in Idea Exchange.

See Also