DualListBox Flow Screen Component

This component surfaces the dual listbox in flow screens. It allows for multiple selection and returns the selected values either as a comma-separated list or (more usefully) as a collection of strings that can be looped over.

This is an installable component and is not the same as the built-in Multiselect Picklist, which looks like this:

Dual Listbox expects two key pieces of data:

(required) The full set of all of the items that should appear in the list boxes
(optional) The subset of items representing the ones that are selected (on the right side)

Unlike the Multiselect Picklist, the Dual Listbox does not (yet) directly accept picklist or multiselect picklist field types.

Likewise, you can output the set of selected values as either a comma-separated string or a string collection variable, or both.

If you output the set of selected values as a comma-separated string, you can feed that string variable back into the input to support ‘Previous’ and make sure the selections are remembered when Previous is clicked. At the moment, a bug is preventing Previous support for use cases where you store the selected values in a string collection variable.

You can also:

make input required
specify the minimum and/or maximum selections allowed by the user
set your own help text
set the vertical size of the component
disable reordering of the selected items

These attributes can be set in the “input” section when adding the component to a screen within a flow.

Datasources

This screen component accepts four kinds of input:

String of comma-separated values	For simple cases where there’s no distinction between the label and value
Single collection of strings	For simple cases where there’s no distinction between the label and value
Two collections of strings	For cases where you want to display labels but the underlying values are different
a FieldDescriptor data structure	Allows you to pair this component with Flow Actions that generate FieldDescriptor data. See below for more information.

Attributes

Dual List Box works with two sets of data:

the set of All values
the set of values that are selected (on the right)

To provide the set of All Values, specify the input by passing a value to ONLY ONE of the three data input attributes:

allOptionsFieldDescriptorList type=”apex://FieldDescriptor[]”
allOptionsCSV” type=”String”
allOptionsStringCollection type=”String[]”

If you’re using the ‘Two Collections of Strings’ datasource option, you can also specify an input for:

allOptionsStringCollectionLabels type = “String[]”

The attributes representing the Selected values can be provided as inputs (to set existing selections) and taken as outputs. They are:

selectedOptionsFieldDescriptorList type=”apex://FieldDescriptor[]”
selectedOptionsCSV type=”String”
selectedOptionsStringList type=”String[]”

Using the FieldDescriptor Datasource

The FieldDescriptor custom datatype provides a shortcut to populate a dual list box with all of the fields of an object. A common use case: , suppose you’re generating a layout and want to let the user pick which fields from a specified object will get displayed. (Here’s an example) .

To fill a dual list box with field names, place in front of it the GetFieldInformation action, which is included in the dual list box package. You pass in the name of an object (eg. ‘Contact) and it returns a collection field data, including each field’s label and apiName. You can then simply pass that output into the dual list box.

For more information on custom data types like FieldDescriptor, see (https://unofficialsf.com/the-salesforce-automation-and-decisioning-wiki/apex-data/)

When using the Field Descriptor option, you additionally need to tell the dual list box which attributes of the FieldDescriptor data structure should be assigned to the three different dual list box roles:

useWhichObjectKeyForLabel	picks the field that should be displayed in the dual list boxes. Defaults to ‘label’.
useWhichObjectKeyForData	picks the field that should be used to represent the value of the choice. Usually this is ‘name’.
useWhichObjectKeyForSort	picks the sort order field that should used for the list. Usually this is ‘label’.
useObjectValueAsOutput	Boolean. Defaults to True. Specifies which of useWhichObjectKeyForLabel and useWhichObjectKeyForLabel should be output. If this is set to true, the value of useWhichObjectKeyForData will be used.

Developer Notes

This functionality has been implemented in a hierarchy of components. At the center is the standard base dual-listbox lwc component. That component is pretty primitive, however, so we wrap it in extendedBaseDualListbox, which adds the ability to synchronize labels and values. That basically means that you can pass in two sets of values, choose one to display in the list boxes, and output the value from the other one, for each selection. ExtendedBaseDualListBox is not flow aware at all, and can be used in pure coding applications.

The DualListBox control that users interact with calls ExtendedBaseDualListbox. It is where the Flow-centric logic exists, including support for custom property editors and the FieldDescriptor data structure.

Install

DualListBox is part of the Flow Base Packs. Install Flow Screen Components Base Pack and it will show up in your Screen Builder

Older Versions

Source Code

Source