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.


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

    <div class="slds-align_absolute-center">

JS file

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

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

    label; //Label of the button

    buttonId; //Unique button Id

    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();

XML file

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">

    <masterLabel>Flow Navigation Button</masterLabel>


        <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"/>

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. 🙂

One thought on “Navigate to Flow Screens Dynamically with Custom Navigation Buttons

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.