Site icon UnofficialSF

Custom Flow Navigation Buttons: move beyond ‘Next’ and ‘Previous’

UPDATE 5/31/2021: This component has been replaced (and upgraded) by Flow Button Bar, which contains all the functionality available here plus some significant new features, and also includes a much more user-friendly configuration panel. I recommend using Flow Button Bar going forward.

Overview

Custom Flow Navigation Buttons is a simple, lightweight tool that gives Flow builders the ability to present users with customizable navigation choices that go beyond the standard “Next/Finish” and “Previous”.

The Problem

Standard Flow navigation options are very limited: Next/Finish and Previous. This means Flow builders often have to resort to radio buttons to drive navigation logic, which can feel clunky to the end user and are time-consuming to build:

The Solution

This component enables Flow builders to add their navigation buttons to Flow screens. This gives users a more intuitive, modern interface, and is faster and easier for Flow admins to build!

Features

Bonus suggested usage

Setup & Instructions

  1. Install component: https://login.salesforce.com/packaging/installPackage.apexp?p0=04t4x000000YwSM
  2. In Flow Builder, drag the “Nav Button Set” component onto a Flow screen.
    1. Like all Flow elements, give it a unique API name
  3. Add desired button labels in the order you’d like them to appear in a comma-separated list
  4. Optionally, set colours for the buttons (from the listed options) in a comma-separated list
  5. Select the position (left/center/right) of the buttons and whether you’d like a horizontal dividing line, or just leave the defaults
  6. Hide the standard footer! Or don’t, I guess, but it looks weird

The label of the clicked button is saved to the component’s “selectedValue” output value, and can then be referenced in a Decision element to route the user accordingly. “selectedValue” is updated whenever one of the buttons in the set is clicked.

Screenshots

Adding the component to the Flow screen:

Using the output from the button set to route the user to the next step in the flow:

Release History

Which button is right for me?

Please see this document for a breakdown of the various navigation buttons available on UnofficialSF and which one is right for your use case: Which button is right for me?

Installation

Unmanaged Package
See Setup & Instructions for detailed setup instructions

Source Code

View source

Skip to toolbar