UnofficialSF

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:

  1. (required) The full set of all of the items that should appear in the list boxes
  2. (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:

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 valuesFor simple cases where there’s no distinction between the label and value
Single collection of stringsFor simple cases where there’s no distinction between the label and value
Two collections of stringsFor cases where you want to display labels but the underlying values are different
a FieldDescriptor data structureAllows 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:

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

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:

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:

useWhichObjectKeyForLabelpicks the field that should be displayed in the dual list boxes. Defaults to ‘label’.
useWhichObjectKeyForDatapicks the field that should be used to represent the value of the choice. Usually this is ‘name’.
useWhichObjectKeyForSortpicks the sort order field that should used for the list. Usually this is ‘label’.
useObjectValueAsOutputBoolean. 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

Install Prerequisites

Before installing this component you need to have on your org the Flow Base Components support package, version 1.2 or greater.

Install that here.

Version 2.1.4 Unlocked
7/24/20 – Eric Smith – Added option to sort results from GetFieldDefinition Flow Action
Read about it here.

Older Versions

Source Code

Source

Archives

Video: Warning may have some obsolete information Watch the video.