This new 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:
Starting with Summer ’20, you can install a version of this component that uses a custom property editor:
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. It accepts data in two forms: 1) a comma-separated string or 2) a flow resource that’s a collection of strings.
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.
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.|
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’.|
|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.|
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.
Version 2.0 Unmanaged REQUIRES SUMMER ’20 ORG OR LATER
Video: Warning may have some obsolete information Watch the video.