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

/2 Comments/in /by

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:

image.png

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!

image.png

Features

  • Add as many buttons as you want, all as a single component
  • Place anywhere on your Flow screen
  • Choose from four button colours: red, green, blue, and grey (default)
  • Select position of the buttons: left, center, or right (default)
  • Show or hide a horizontal separator line above the buttons
  • Buttons labelled “Next” or “Previous” automatically perform their standard navigation for convenience

Bonus suggested usage

  • If you want to place a Flow on a page in Salesforce but not have it auto-launch, give the Flow an initial screen with just a custom nav button on it labelled “Launch” (or whatever you want to call it)

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

  • V1.1: Jan 25 2021
  • V1.0: Jan 14 2021

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