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.
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”.
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:
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!
- 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)
- See note and comparison with the “Launch Flow in Modal” in “Which button is right for me?”
Setup & Instructions
- Install component: https://login.salesforce.com/packaging/installPackage.apexp?p0=04t4x000000YwSM
- In Flow Builder, drag the “Nav Button Set” component onto a Flow screen.
- Like all Flow elements, give it a unique API name
- Add desired button labels in the order you’d like them to appear in a comma-separated list
- Optionally, set colours for the buttons (from the listed options) in a comma-separated list
- Select the position (left/center/right) of the buttons and whether you’d like a horizontal dividing line, or just leave the defaults
- 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.
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:
- V1.1: Jan 25 2021
- Thanks to Joe Grace for catching a bug!
- 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?
See Setup & Instructions for detailed setup instructions