DualListBox Flow Screen Component

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:

  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. 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.

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:

  • 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:

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’.
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

Version 2.0 Unmanaged REQUIRES SUMMER ’20 ORG OR LATER

Older Versions

Source Code

Source

Archives

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

0 0 vote
Article Rating
Subscribe
Notify of
guest
30 Comments
Inline Feedbacks
View all comments
Sujay
Sujay
10 months ago

Hi,

Thank you for sharing.

Is there a way i can change the width of the box to fit longer strings?

Can you also update the “install” link for version 2

Cheers,

jhetland
9 months ago

This is great! Im trying to solve a UseCase where the user has to select a bunch of Files. Is there a way to pass in a Collection Variable that contains both Labels and IDs, so that I dont have to parse the Output and find the IDs again later?

Chase
Chase
1 month ago
Reply to  jhetland

Did you ever find a way to do this? I currently need to be able to do the same thing!

jhetland
1 month ago
Reply to  Chase

Yeah, it worked quite well. With the new version it should be even easier. Have a look at the Datatable video here: https://www.youtube.com/playlist?list=PLk4w8UmmUJNV1lgLGgJUlIkXyLoRhFUGd

Alex Edelstein
Admin
11 days ago
Reply to  jhetland

Note that the current version has a datasource called ‘two string collections’ which lets you pass in labels but outputs the corresponding values.

Heiko
Heiko
7 months ago

Do you plan to extend this component so that you can also set preselected values as input parameters? If you are loading an existing record you would most likely try to show the already selected options

Evan Ponter
Evan Ponter
7 months ago
Reply to  Heiko

Yes, there are two options for setting preselected values as input parameters. You can either pass in a comma-separated string value to the “Selected Items (Comma-Separated String)” field or pass in a Text variable that accepts multiple items (a collection variable) to the “Selected Items (String Collection)” field

John Duffy
5 months ago

Hi Alex. Great idea and video. I installed, but don’t see “Store Output Values” section in the righthand column. Any suggestions?

Andrey Shestakov
Andrey Shestakov
2 months ago

Hi!
Is there a sandbox version? Or can this be installed in sandbox?

Alex Edelstein
Admin
11 days ago

yes, take the installation url and replace ‘login’ with ‘test’.

Heath Parks
Heath Parks
1 month ago

I have installed 1.5 in my Sandbox, and created the string collection of values for education, and it’s showing up in my flow, however, when I go to create records, the component is not showing up to allow me to select the values.

In “allOptionsStringCollection” I have a variable set at {!coll_var_education_string} and I have the manually assign variables check box checked and under “selectedOptionsStringList” I have it set to {!var_selected_education}

Any idea why it’s not showing up?

SHawna Richardson
SHawna Richardson
1 month ago
Reply to  Heath Parks

Hey Heath, How were you able to install in your sandbox?

Heath Parks
Heath Parks
1 month ago

When you click on the Install link it takes you to something like https://login.salesforce.com/(and the remainder of the link). change the “login” to “test” so it looking something link this https://test.salesforce.com(remaider of link) and hit enter and then you log into the sandbox environment with your login and password as normal

Heath Parks
Heath Parks
1 month ago

I don’t see it noted, but I am guessing you can’t set a default value for multi select picklists using the duel list box component? I don’t see it as an option anywhere. I want the values to show up when doing an edit/update. I just wanted to confirm.

I am guessing it’s because even if someone added a value, it would just overwrite the current values unless the person selected all values including new.

SHawna Richardson
SHawna Richardson
29 days ago
Reply to  Heath Parks

Were you able to figure out how to set a default value? I’m looking to do the same thing.

SHawna Richardson
SHawna Richardson
29 days ago

My first thought is to set a default on the field in salesforce, then do the following: Yes, there are two options for setting preselected values as input parameters. You can either pass in a comma-separated string value to the “Selected Items (Comma-Separated String)” field or pass in a Text variable that accepts multiple items (a collection variable) to the “Selected Items (String Collection)” field

Heath Parks
Heath Parks
29 days ago

The selected items is for when you want the values to stay in the screen if you hit next and then hit previous (I believe) I don’t this there is a way to set a default value, if there is, no one has said anything.

Alex Edelstein
Admin
29 days ago
Reply to  Heath Parks

You can set the default on dual list box by passing in a value for one of the Selected Items inputs

SHawna Richardson
SHawna Richardson
29 days ago
Reply to  Alex Edelstein

Based on the article, you cannot pass the values selected into a multi select field, is that accurate? But you could pass them into a text field

Alex Edelstein
Admin
11 days ago

This component doesn’t interact at all with multi-select fields right now, but that would be an excellent enhancement for someone to add.

trackback

[…] Check it out here. […]

trackback

[…] you can pass the entire collection of FieldDescriptors to a component that expects it, such as the Dual List Box component, which has the ability to take as an input datasource the FieldDescriptor. Here’s how that […]

Josh Dayment
Josh Dayment
10 days ago

I just installed version 1.6 but am not able to get any output variable to store it keeps giving me a null value.

I have allOptionsStringCollection set with a text collection variable, allOptionsStringFormat set to list, on my output I have slectedOptionsStringList set to a text collection variable. I tried using CSV but still not output and tried to uncheck Manually assign variables as well as a shot in the dark.

Alex Edelstein
Alex Edelstein
10 days ago
Reply to  Josh Dayment

I’ll take a look….

Leon
Leon
19 hours ago

This is an awesome component! Will it work in a Field Service Mobile flow? I know that generally, FSL Mobile flows lag behind and don’t play nicely with “custom” components.