Overview

The new and improved Flow Button Bar (FBB) builds on the existing “Custom Flow Navigation Buttons” component, which 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’.”

FBB brings a more user-friendly interface, new features like icons and vertical buttons, and now offers two distinct “modes” of Flow functionality: Navigation Mode and Selection Mode.

Features

Navigation Mode

Navigation Mode covers the functionality provided by the existing component, and is used to replace and extend the functionality of the native Flow navigation buttons (Next/Finish and Previous). It allows Flow admins to add one or more Lightning buttons to a Flow screen that, when clicked, return the value associated with that button and navigate to the next (or previous) Flow element. This value can then be handled by a Decision element to route the user accordingly. Buttons in Navigation Mode can be styled with different variants, and the button bar can be oriented horizontally or vertically. In horizontal orientation, the buttons can be aligned to the left, right, or center, and in vertical orientation an optional Description Text value can be displayed.

• 

• 

• 

• 

The Flow Button Bar (FBB) component is shown on Decision Screen in the example above. When the user clicks one of the buttons, their selected value is stored in the component’s ‘value’ property, and the user is navigated to a decision element where they can be routed based on their selection.

Selection Mode

Selection Mode is used to present users with a grouped set of buttons each representing a different selectable option. Selection Mode is comparable to other input elements like radio buttons or picklists, but uses a button group UI and allows for both single- or multi-select. Clicking a button in Selection Mode does not cause navigation within the Flow. In Selection Mode, the component returns two properties: 

• values[]
  • list of strings with zero or one elements, or more if multiselectis enabled, containing any selected values in the FBB component. In single-select button bars, the list will contain a maximum of one element.
• value
  • String used for single-select button bars. Returns the first element in values[]. Used for convenience and to conform to the format of the standard components.
  • Setting this value resets values[]to a list of one, [value], thereby removing any other selected values.

For selections with more than a handful or so of options, it’s probably better to use a checkbox group or radio buttons instead.

• 

• 

Common Features

Both Navigation Mode and Selection Mode have the following properties, all of which are optional:

• label
  • Text to be displayed as a label above the button bar
• showLines
  • horizontal lines below and/or above the button bar to visually separate it from other screen components
• help text (coming soon)

Settings & Configuration

A major upgrade in Flow Button Bar is that it is now configured through a Custom Property Editor, giving far greater control over the look and feel of the configuration panel than previously possible.

• 

• 

The configuration panel contains two sections: Buttons and Button Bar Settings.

Buttons

This section is used to add, delete, and reorder the buttons in your button bar. Click “add new button” to open the Button Builder modal (see below) and create a new button. Click an existing button, or the pencil icon beside it, to open the modal and edit its settings. The trash icon deletes an icon, and the order of the icons can be changed by dragging and dropping them into the desired position. You can also see a preview of your button bar to make sure everything looks right, but note that the preview is at present notperfect and you’ll still need to test some features in debug.

Button Bar Settings

These are the configurations that apply to the overall button bar, as opposed to the individual buttons. They include:

1. Label: label text to be displayed above the button bar.
2. Action mode (required): choose between Navigation or Selection, as described above.
3. Required (Selection Mode only): does not allow user to unselect all options once selected. Also used to communicate validation requirements.
4. Multi-select (Selection Mode only): allows user to select more than one of the options in the group.
5. Orientation (Navigation Mode only): controls whether the buttons are laid out horizontally or vertically.
6. Alignment (horizontal orientation only): controls whether the button bar is aligned to the left, center, or right of the Flow screen.
7. Display horizontal lines: optionally adds lines visually separating the button bar from the rest of the components on the Flow screen. Options are: Neither, Above, Below, Both

Button Builder

Clicking on an existing button in the list, or clicking “Add new button”, opens up the button builder modal:

1. Label (required): the text on the button that will be displayed to end users.
2. Value (required): the value that will be returned by the button upon selection. Defaults to be the same as Label, and has no requirements around formatting, but admins may find it useful to distinguish between values and labels.
   1. Note: If the button value is set to ‘Previous’ (not case-sensitive), the Flow navigation action that will get executed is Previous. In all other cases, the Flow navigation action is Next, or Finish if on the final element.
3. Variant: dropdown list used to control the style of the button. Options are: Neutral, Base, Brand, Outline Brand, Destructive, Text Destructive, and Success.
4. Icon Name: dropdown list used to add an icon to the button.
5. Icon Position: controls whether the icon (if present) appears on the left or right side of the button.
6. Description Text (vertical orientation only): Text to be displayed horizontally in line with vertical buttons.

Setup & Instructions

1. Install the Flow Base Packs, following the instructions here.
2. In Flow Screen Builder, drag the “Flow Button Bar” component onto a Flow screen.
   1. Like all Flow elements, give it a unique API name—you will use this to refer to the user’s selected value(s) downstream in your Flow.
3. Add up to 5 buttons by clicking “Add new button” and using the Button Builder to configure each button.
4. Choose an Action Mode: either Navigation or Selection.
5. Complete any other optional or required configuration settings.
6. If you want to replace the standard Flow navigation, remember to hide the standard footer(use the showLinesattribute to add a horizontal line above the button bar and mimic the standard UI).

You can then incorporate the button bar’s selected value(s) into your downstream Flow logic, e.g. in Decision elements, formulas, or for conditional visibility.

Installation

This component is part of the Flow Screen Components Base Pack package library. Click the link to learn more and install.

For developers

FBB was built to be used not only by Flow admins using the CPE UI to configure the settings, but also by developers who are building CPEs or other Flow screen LWCs (or non-Flow LWCs, for that matter). The component in Selection Mode is intended to be closely interchangeable with some of the standard input components like lightning-combobox, lightning-radio-group and lightning-radio-group. The component takes the following values:

1. options (required): a list of label-value pairs, the same that you’d pass into one of the standard components.
2. actionMode: determines the functional “mode” of the button bar. Valid values are selection(default) and navigation.
3. alignment: determines horizontal alignment if in horizontal mode. Valid values are left(default), center, and right.
4. orientation: determines vertical alignment if in Navigation Mode. Valid values are horizontal(default) and vertical.
5. showLines: controls the optional display of horizontal lines above and/or below the button bar. Valid values are neither(default), above, below, and both.
6. label: optionally displays label text above the button (generally used in Selection Mode, less so in Navigation Mode).
7. helpText: optionally displays help text in a lightning-helptext component that follows the label.
8. multiselect: if set to any non-falsey value, allows for the selection of multiple values. If falsey, selecting any option automatically deselects any other selected options.
9. required: if set to any non-falsey value, displays a required indicator before the component’s label. Also intended to used in validation logic.
10. errorMessage: optionally displays a red error message underneath the component.

When any button in the bar is clicked, the buttonclickevent is dispatched. Parent components must listen for this event. The event contains event.detail.values, the list of the values of any selected buttons (used for multi-select button bars) and event.detail.value, which is simply the first element of values(used for single-select button bars).

View Source

Main component (fsc_flowButtonBar) source code
Custom Property Editor (fsc_flowButtonBarCPE) source code

This version includes a few community requested enhancements to Flow Flexcard. It includes rich text fields now supported in visible fields, multi-select of cards, header style control, and some overall UE enhancements. Check out the details below.

The first new addition was requested by quite a few people and that was rich text support for visible fields. Something to note here is the card size does not change based off of the field content so remember to either make your cards larger using the cardSize property or limit your field content.

Next up we have Multi-Select. When you set Allow Muli-Select to true it will add a checkbox input when marked as checked will add that individual card recordId to a output collection variable named selectedRecords.

Finally Header Style allows you to control how your header is presented to your users using a string input of HTML style tags. i.e. background-color:powderblue;font-weight:bold;

Here is a video walkthrough highlighting these updates

View Details and Download

We’ve added an action called CollectionCalculate to the CollectionProcessors package that lets you provide a collection of records, specify a field by name, and indicate whether you’d like to add, multiply or average the values. The result is returned both as a decimal and a string.

Input Attributes

inputCollection	a collection of SObjects
fieldName	the name of a field on the objects that you’re passing in
operation	allowable values: “Average”, “Add”, “Multiply”
policyForNullAndEmptyFields	String. Allowable Values: “use0”, “use1”. If any other value is used or if this attribute is null, an empty field or null value in one of the passed in records will cause the action to fail. ‘use0’ replaces empty and null fields with zero and ‘use1’ replaces them with 1

Install

Available in version 1.28 and later of CollectionProcessors

Source

source

I have released a maintenance update for the Datatable component.

Current Version: 3.2.1

Updates:

• Picklist values can now be restricted to a single record type per table

Bug Fixes:

• Text formula fields will now wrap correctly (This had regressed in v3.2.0) 
• Output Selected Rows is no longer null if the screen containing the Datatable also has a Section component

See the complete list in the Release Notes

Flow has never been good at managing multiselect picklist fields. Over the years, many intrepid flowhanites have provided assistance. Here, we provide an installable Flow Action that leverages last year’s new support for generic types to provide a nice and simple new way to solve problems that use these fields.

Use this new Manage Multiselect Field action to easily do these things:

1. Select an additional value for a multiselect picklist field
2. Deselect a selected value from a multiselect picklist field
3. Check for the presence of a particular value in the set of selected values
4. Given a specific record, obtain both the full set of available values and the currently selected values in the form of a List of Strings that can be used downstream in your flow with tools like QuickChoice.

Inputs

objectApiName	String	Name of the object where your field is
fieldApiName	String	Name of the multiselect picklist field you’re manipulating
operation	String	Supported values are CheckForValue, ReturnStringCollection, AddValue, and RemoveValue
targetValue	String	Use to specify a value to add or remove, or to check for whether a value is selected.
saveAutomatically	Boolean	If set to true, will save any changes made by the action immediately. Note that this will commit any open transactions in the flow
curRecord	Record	the actual record you’re examining or changing

Outputs

availableValuesList	List<String>
selectedValuesList	List<String>
selectedValuesSemicolonString	String (this is the ‘native’ way that these fields store data)
targetPresent	Boolean	Returns a value if action is set to

Install

Version 1.0.4 4/7/24 Production Sandbox. Bug fix.

Old Versions

Version Unmanaged 5/16/21

Installation note: This package currently creates a multiselect picklist field called ‘Fruit__c’ on the Account object to provide something to run tests on. If that’s a problem, you can install this action without the test class by simply grabbing the main action code here and pasting it into a New Class in Developer Console.

Source

source