• Chris

Add a Visual Menu to Flow Builder

Updated: Jan 22

I recently wanted to add a more visually appealing and user-friendly way to add navigation to my flows. The goal was to allow end-users to select an option quickly, and the flow automatically navigates to the next screen. I used a picklist in the past, but that resulted in extra clicks.

Benefits over a picklist

  1. Come on, it just looks better!

  2. Fewer clicks (1 click vs 3 clicks)

  3. Faster!

  4. Very flexible.

Inputs

  1. Collection - Label - The labels used for each of the buttons

  2. Collection - SubLabel - The sub-labels used for each of the buttons.

  3. Collection - Value - The values used for each of the buttons.

  4. Collection - Icons - The icons used for each of the buttons.

  5. Show Icons? - A boolean to show the icons. The default is false.

  6. Show SubLabels? - A boolean to show the icons. The default is false.

  7. Icon Size - The size of the icon. Options include xx-small, x-small, small, medium, or large. The default is medium.

  8. Required - A boolean to determine if a selection is required to go to the next screen.

  9. Enable Auto Next - If enabled the screen will automatically transition to the next element. Please note there is an accessibility impact when enabling this option. If a user utilizes a keyboard or screen reader that will be unable to get to any other choice but the first.

Please Note

Collection - Label , Collection - SubLabel , Collection - Value and Collection - Icons are required. If you do not plan to use SubLabels or Icons just input the string collection you are utilizing for Collection - Label.


Outputs

  1. Label - Output the selected label

  2. SubLabel - Output the selected sub-label

  3. Value - Output the selected value

  4. Unique - Output the selected value + its index #

This component allows you to out the selected label, sublabel, and value. Therefore, you will be able to use the outputs on a decision element for navigation!


How to generate the menu

  1. Create a text variable that allows multiple values (collection). You will need one for labels, sub-labels, icons, and values.

  2. Then use an assignment element to add values to the collection

You can also combine this with Extract Strings From Collection from unofficialsf.com. Imagine searching for Contacts and then visually displaying the results to the end-user.

I hope this component adds value to your visual flows! Visual Nav is a lightning web component. Therefore, if you haven't created a Lightning Web Component previously I would recommend completing the following Trailhead: Build Lightning Web Components


visualNav.html

visualNav.js

visualNav.js-meta.xml