Control screen flow navigation from LWC

Greetings, Trailblazers! In this article, we will learn about the Lighting Flow Support API. This API offers different events that can be fired from LWC to notify the flow when the LWC component is called from the Screen Flow.

You can perform the below actions with the Lighting Flow Support API.

• FlowNavigationBackEvent: navigate to the previous flow screen.
• FlowNavigationNextEvent: navigate to the next screen.
• FlowNavigationPauseEvent: Requests the flow runtime to pause the flow.
• FlowNavigationFinishEvent: Requests the flow runtime to terminate or finish the flow.
• FlowAttributeChangeEvent: Informs the runtime that a component property has changed.

We will discuss the first four events, in this API, and FlowAttributeChangeEvent will be discussed in a separate article.

Example Scenario - Flow Navigation from LWC

Imagine a scenario where you have built a custom LWC component to use in a Screen Flow that contains multiple screens. The LWC component is interactive and includes a couple of buttons. The requirement is to navigate the flow to the next or previous page based on some input value.

Let’s learn how to control flow navigation from an LWC. I’ve included code samples for each event, so you can simply copy and paste the code directly into your codebase.

Note: These events are only available for components where the target is set to lightning__FlowScreen. If you use these events outside of the flow context, you might encounter errors.

Available Actions Context

Before we start the implementation, please note that your component needs to be aware of available flow actions such as Next, Previous, Pause, or Finish.

To make the LWC aware of these actions, you need to create a public attribute named availableActions with a type of array.

The flow runtime provides these values at runtime to your component, so you can show or hide buttons based on the available actions and check for them before calling them.

Note: It is important to check for available events to prevent your component from running into errors. That is why I have added different checks for the same.

Navigate to the Next Page of flow from LWC

1. Import the event definition

   import { FlowNavigationNextEvent } from 'lightning/flowSupport';
   

2. Fire the next flow page event

     @api
     availableActions = [];
   
     get isNextAction() {
       return this.availableActions.includes('NEXT');
     }
   
     navigateNextFlowScreen() {
       if (this.isNextAction) {
         const navigateNext = new FlowNavigationNextEvent();
         this.dispatchEvent(navigateNext);
       }
     }
   

3. Now, call the above function from the controller, or attach it to a DOM event, such as a button click.

Navigate to the Previous Page of flow from LWC

1. Import the event definition

   import { FlowNavigationBackEvent } from 'lightning/flowSupport';
   

2. Fire the previous flow page event.

     @api
     availableActions = [];
   
     get isPreviousAction() {
       return this.availableActions.includes('BACK')
     }
   
     navigatePreviousFlowScreen() {
       if (this.isPreviousAction) {
         const navigateBack = new FlowNavigationBackEvent();
         this.dispatchEvent(navigateBack);
       }
     }
   

3. Now, call the above function from the controller, or attach it to a DOM event, such as a button click.

Terminate the flow execution from LWC

1. Import the event definition

   import { FlowNavigationFinishEvent } from 'lightning/flowSupport';
   

2. Fire the finish flow event.

     @api
     availableActions = [];
   
     get isFinishAction() {
       return this.availableActions.includes('FINISH')
     }
   
     requestFinishFlow() {
       if (this.isFinishAction) {
         const finishFlow = new FlowNavigationFinishEvent();
         this.dispatchEvent(finishFlow);
       }
     }
   

3. Now, call the above function from the controller, or attach it to a DOM event, such as a button click.

Pause the flow execution from LWC

1. Import the event definition.

   import { FlowNavigationPauseEvent } from 'lightning/flowSupport';
   

2. Fire the pause flow event.

     @api
     availableActions = [];
   
     get isPauseAction() {
       return this.availableActions.includes('PAUSE')
     }
   
     requestPauseFlow() {
       if (this.isPauseAction) {
         const pauseFlow = new FlowNavigationPauseEvent();
         this.dispatchEvent(pauseFlow);
       }
     }
   

3. Now, call the above function from the controller, or attach it to a DOM event, such as a button click.

So that is how we can navigate inside the screen flow from LWC. Feel free to copy-paste the code samples and visit the detailed articles for more info.

Full Code Example

flowNavigationExample.js

/**
 * @author Rahul Gawale
 * @article - https://www.forcetrails.com/2024/08/control-screen-flow-navigation-from-lwc.html
 * This component demonstrates the usage of Lightning Flow API events.
 * You can see how we can control the flow navigation, pause or finish the flow.
 */
import { LightningElement, api } from 'lwc';
import { FlowNavigationNextEvent, FlowNavigationBackEvent, FlowNavigationPauseEvent, FlowNavigationFinishEvent } from 'lightning/flowSupport';

export default class FlowNavigationExample extends LightningElement {
  @api
  availableActions = [];

  /**
   * Check availability for the action to avoid errors
   */
  get isNextAction() {
    return this.availableActions.includes('NEXT')
  }

  get isFinishAction() {
    return this.availableActions.includes('FINISH')
  }

  get isPreviousAction() {
    return this.availableActions.includes('BACK')
  }

  get isPauseAction() {
    return this.availableActions.includes('PAUSE')
  }

  /**
   * fire the events
   */
  navigateNextFlowScreen() {
    if (this.isNextAction) {
      const navigateNext = new FlowNavigationNextEvent();
      this.dispatchEvent(navigateNext);
    }
  }

  navigatePreviousFlowScreen() {
    if (this.isPreviousAction) {
      const navigateBack = new FlowNavigationBackEvent();
      this.dispatchEvent(navigateBack);
    }
  }

  requestPauseFlow() {
    if (this.isPauseAction) {
      const pauseFlow = new FlowNavigationPauseEvent();
      this.dispatchEvent(pauseFlow);
    }
  }

  requestFinishFlow() {
    if (this.isFinishAction) {
      const finishFlow = new FlowNavigationFinishEvent();
      this.dispatchEvent(finishFlow);
    }
  }
}

flowNavigationExample.html

<template>
  <lightning-card variant="narrow">
    <div slot="title">
      Flow Navigation
    </div>
    <div slot="footer">
      <!-- Show button only when action is available -->
      <lightning-button
        if:true={isPreviousAction}
        class="slds-var-p-around_xx-small"
        label="Previous"
        onclick={navigatePreviousFlowScreen}
      ></lightning-button>

      <!-- Show button only when action is available -->
      <lightning-button
        if:true={isNextAction}
        class="slds-var-p-around_xx-small"
        variant="brand"
        label="Next"
        onclick={navigateNextFlowScreen}
      ></lightning-button>

      <!-- Show button only when action is available -->
      <lightning-button
        if:true={isPauseAction}
        class="slds-var-p-around_xx-small"
        label="Pause"
        onclick={requestPauseFlow}
      ></lightning-button>

      <!-- Show button only when action is available -->
      <lightning-button
        if:true={isFinishAction}
        class="slds-var-p-around_xx-small"
        variant="success"
        label="Finish"
        onclick={requestFinishFlow}
      ></lightning-button>
    </div>

    <div class="slds-var-p-around_small">
      Add Component Content here
    </div>
  </lightning-card>
</template>

flowNavigationExample.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>61.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Flow Navigation Example</masterLabel>
    <description>This LWC navigates between flow screens</description>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
</LightningComponentBundle>

LWC Roadmap

If you're interested in learning more about Lightning Web Components, check out my other articles on LWC Basics. Click the below link to see the list of all articles.

Click the link below to see the full list of articles:

LWC Series: Your Roadmap to Mastering Lightning Web Components