Navigation in Flow using Lightning Web Component

If you ever had a requirement to navigate between flow screens from a Lightning Web Component, then this blog is for you.

In this blog you will learn -

✏️ Create Lightning Web Component for Flow.

✏️ Create Sections in Flow.

✏️ Get Available Actions for Flow.

✏️ Navigate between screens in Flow.

First I will create a LWC which will import FlowNavigationBackEvent and FlowNavigationNextEvent from flowSupport.

The lightning/flowSupport module provides events that enable a component to control flow navigation and notify the flow of changes in attribute values.

The events are supported only in components where the target is lightning__FlowScreen.

Events include:

FlowAttributeChangeEvent — Informs the runtime that a component property has changed.

FlowNavigationBackEvent — Requests navigation to the previous screen.

FlowNavigationNextEvent — Requests navigation to the next screen.

FlowNavigationPauseEvent — Requests the flow runtime to pause the flow.

FlowNavigationFinishEvent — Requests the flow runtime to terminate the flow.

HTML

<template>
  <lightning-button label="Back" onclick={handleBack}> </lightning-button>
  <br />
  <br />
  <lightning-button label="Next" onclick={handleNext} variant="brand">
  </lightning-button>
</template>

import { LightningElement, api } from "lwc";
import {
  FlowNavigationBackEvent,
  FlowNavigationNextEvent
} from "lightning/flowSupport";
export default class LwcForFlow extends LightningElement {
  @api availableActions = [];
  handleNext() {
    if (this.availableActions.find((action) => action === "NEXT")) {
      const navigateNextEvent = new FlowNavigationNextEvent();
      this.dispatchEvent(navigateNextEvent);
    }
  }
  handleBack() {
    if (this.availableActions.find((action) => action === "BACK")) {
      const navigateBackEvent = new FlowNavigationBackEvent();
      this.dispatchEvent(navigateBackEvent);
    }
  }
}

In JS Controller I have used availableActions to check available actions for the current screen of flow.

The availableActions attribute lists the valid navigation actions for that screen.

A screen’s available actions are determined by:

Where in the flow the screen is. For example, Previous isn't supported on the first screen in a flow, Finish is supported for only the last screen in a flow, and you can never have both Next and Finish.
Whether the flow creator opted to hide any of the actions in the screen's Control Navigation settings. For example, if Pause is de-selected, the Pause action isn't included in availableActions.

Here are the possible actions, their default button label, and what's required for that action to be valid.

XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__FlowScreen</target>
  </targets>
</LightningComponentBundle>