Navigate to Flow Screens Dynamically with Custom Navigation Buttons

I recently came across a very interesting use case(thanks to Sarah Khalid).

Imagine you have a flow screen with a bunch of custom navigation buttons that take you to the next flow screen when clicked. But what if you want to navigate to different screens based on the button you clicked?

NOTE: One way to solve this is by replacing custom navigation buttons with radio buttons paired with a Decision element and navigate to screen based on the selected radio button. However, this costs you an extra click and also makes the design less intuitive.

So what can we do?

Let’s take a very simple example and see how we can solve this.

We have a screen with three custom navigation buttons(Button 1, 2 and 3) and we want to automatically navigate to Screen 1, 2 and 3 when the respective button is clicked.

Idea

The idea is simple. Whenever the button is clicked, we set an attribute/property, say SelectedButton, with a value and expose the attribute in the flow as an output. Then, using manual variable assignment, we set a flow variable with the ‘SelectedButton’ output and use a Decision element to navigate to the screen based on the value of the flow variable.

Let’s see some code!

HTML file

<template>
    <div class="slds-align_absolute-center">
        <lightning-button
            variant="brand"
            label={label}
            onclick={handleNavigation}
        ></lightning-button>
    </div>
</template>

JS file

import { LightningElement, api } from 'lwc';
import { FlowNavigationNextEvent } from 'lightning/flowSupport';

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

    @api
    label; //Label of the button

    @api
    buttonId; //Unique button Id

    @api
    selectedButtonId; //Property that'll store the buttonId

    handleNavigation() {

        this.selectedButtonId = this.buttonId; //Setting the buttonId when button is clicked.

        /** Navigating to next screen */
        if (this.availableActions.find(action => action === 'NEXT')) {
            const navigateNextEvent = new FlowNavigationNextEvent();
            this.dispatchEvent(navigateNextEvent);
        }
    }
}

XML file

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

    <masterLabel>Flow Navigation Button</masterLabel>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>

    <targetConfigs>

        <targetConfig targets="lightning__FlowScreen">
            <property name="label" type="String" label="Button Label" role="inputOnly"/>
            <property name="buttonId" type="String" label="Button ID" role="inputOnly"/>
            <property name="selectedButtonId" type="String" label="Selected Button ID" role="outputOnly"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Let’s see it in action!

Hope you find this one useful! Catch you in the next one! ✌
And thank you for being an awesome reader! Subscribe to this blog for receiving all the latest updates straight to your inbox. 🙂