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:

  • 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’.
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.6 Unlocked 8-7.20 packaging issue

Older Versions

Version 2.1.5 Unlocked 8-6-20 bug fix

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

Source Code

Source

Archives

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

Subscribe
Notify of
guest
58 Comments
Inline Feedbacks
View all comments
Sujay

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

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

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

jhetland

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

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

Heiko

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

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

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

Andrey Shestakov

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

Alex Edelstein

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

Heath Parks

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

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

Heath Parks

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

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

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

SHawna Richardson

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

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

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

SHawna Richardson

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

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

Andrey Shestakov

What I did to save selected values into field:

  1. Converted Selected String to CSV using Convert String Collection to Comma-separated-values
  2. Result is a text variable with values delimited by commas
  3. Used formula to Substitute commas with semicolons Substitute (text_var_with_commas, “,”, “;”)
  4. Now I have text variable with values delimited by semicolons
  5. Assigned the text variable to my field.
Dani Finkelshtein

Andry, thank you for the advice!

[…] Check it out here. […]

[…] 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

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

I’ll take a look….

anthony

I’m having the same issue with 1.5. I can set selected values but when trying to get values to output using either a string variable or collection results in a null value.

Jonatan

I have the same issue. Any solution for this?

Alex Edelstein

I can’t reproduce this on the latest version 2.1.2. Here’s my output to variables via the CSV and via the string list.

Try the Demo_Flow_Dual_List_Box that is included in the latest package.

Screen Shot 2020-07-22 at 8.39.00 PM.png
Leon

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.

Cole

Version 1.5 – I’m having some trouble with the format of the output provided by the dual list box component. My use case is to allow a user to select one (or more) options in a multi-select on a flow screen, then pass the selected option(s) as output to a given field in a record create node and create the associated record. Everything works fine when the user selects a single option. When selecting more than one (i.e. output is provided as a comma separated list of strings), my flow throws an error because the multi-select picklist is expecting a… Read more »

Wayne Chung

Hi, thanks for creating this, but there’s an issue for me when i installed Unmanaged 1.5 (since even i have summer’20 sandbox but my production still before summer’20 so i can’t use latest version), the screen to show my collection variable in “allOptionsStringCollection” is working perfect, multi-select plus self-define collection option is great! But when i select the options on the screen, the Output Values seems not store into my Select Variables set in”selectedOptionsStringList”, do you know why? Thanks. 

Jake Backues

I’m using this and for some reason even if there is a selection I’m getting a blank list when I assign the output to a collection variable. Any reason this might happen? I have unmanaged 1.5 installed

Andrey Shestakov

Can anybody suggest how to activate inactive values of a picklist in flow?
I have picklists (both single and multiselect) and also provide text fields to add extra values if needed. I was able to add the extra values to the related fields, save them. However, those extra values are not active and can selected values are not seen using QuickChoice and DualList Box.
What did I miss?

Darren Henry

I must be missing something but setting Required to true in either 1.5 or 2.0.1 doesn’t seem to have any effect, there is no required asterisk on the component and if no selection is made, the user is able to click through to the next page without being prevented from proceeding.

Alex Edelstein

fixed in the new 2.1.1 version. Note that it now requires the installation of a support package called FlowBaseComponents.

Dani Finkelshtein

Hi Alex,
i work with version 2.1.4 and face the same issue here

ANDREW MONTEMAYOR

When I tried to install the current package (2.0.1) into my sandbox, I got the following error:
User: Andrew Montemayor (00550000007sJeL)
Package: dualListBox (04tB0000000KxaS)
Error Number: 926610397-5378 (1167331210)
Problem:

1.  Cannot add component of type:LightningComponentBundle named:flowCombobox subjectId:0Rb2F0000002Jb9 to another package because it is an installed component.
package.xml: Cannot add component of type:LightningComponentBundle named:flowCombobox subjectId:0Rb2F0000002Jb9 to another package because it is an installed component.

Any thoughts on what the problem is here?

Alex Edelstein

fixed in the new 2.1.1 version. Note that it now requires the installation of a support package called FlowBaseComponents.

Dani Finkelshtein

getting an error when i try to install version 2.0.1

User: Dani Finkelshtein (0050y00000E2gqO)
Package: dualListBox (04tB0000000P24c)
Error Number: 530034422-66678 (1143433030)
Problem:

1. lwc/flowCombobox/flowCombobox.js-meta.xml: You can’t remove the following public properties: flowContextFilterType,flowContextFilterCollectionBoolean,mode,disabled,flowContext,objectType, because the component is part of a managed package.
flowCombobox: lwc/flowCombobox/flowCombobox.js-meta.xml: You can’t remove the following public properties: flowContextFilterType,flowContextFilterCollectionBoolean,mode,disabled,flowContext,objectType, because the component is part of a managed package.

Alex Edelstein

Hi. Try the new 2.1.1 version. Note that it now requires a support package called FlowBaseComponents.

Dani Finkelshtein

Thank You Alex!
it worked

ANDREW MONTEMAYOR

Hi Alex: Thanks for the updated package. I am now able to install DLB after I installed the flow base components. New problem though… I did a very basic test to verify that the component was functioning as expected and although the component renders nicely and I can make selections, the ‘Next’ button won’t take me to the next screen. It shows an error that says: This page has an error. You might just need to refresh it. Error in $A.getCallback() [this._optionsOriginal.filter is not a function] Failing descriptor: {markup://c:extendedBaseDualListBox} I’ve attached a screenshot of my config. I’m using a text… Read more »

Screen Shot 2020-07-23 at 9.00.29 AM.JPG
Ryan

Upon further investigation, the component works great unless conditional visibility is turned on. When visibility is conditional and the conditions are met, which reveals the component, it shows up but All Options values are blank (using with One String Collection)

Ryan

Thanks so much for all the work put into these free components! I was testing the dual list box this week and it was working great. But today it’s no longer working. I just installed the Install Flow Base components to see if that fixed it, but no luck. The dual list box shows up in the flow but the list of string values is now blank.

Last edited 2 months ago by Ryan

[…] the Admin to be able to select a group of fields from a list of all of the fields on an Object. The Dual List Box Flow Screen Component is perfect for this because it can be combined with the Get Field Definitions component that is […]

Can the Picklist values have spaces, -, or / in them? The component works fine when the values are one word, but I’m having issues when they have special characters. For example, when I select 1, nothing appears on in the selected list. When I pick 2, only 1 of them appears.

Ian Carswell

I having trouble getting this component to work. Trying the simplest possible use case with a simple CSV input. When I run or debug the list is rendered and I can select the option however when I click on Next nothing happens When I run it does display an error “This page has an error. You might just need to refresh it. Error in $A.getCallback() [Cannot read property ‘Construction’ of undefined] Failing descriptor: {markup://c:extendedBaseDualListBox}. ” Construction is the first selected value.

Josh Dayment

If I have a space in my first value in a csv it will remove the first space for example I have a csv that contains Arizona State University, Ball State University in the flow it will show the values like this

ArizonaState University
Ball State University

I am on version 2.1.6

Sergey Volynets

Hi, Alex.
Thanks for great work – it really helps in Screen Flows tasks.

When i’m trying to use the duallistbox in dual list mode (my Flow Screenshot: https://prnt.sc/uav1m5 )
I am getting the error when i select any of options and hit ‘Next’ screen.
Could not resolve ‘Recipients2.selectedOptionsFieldDescriptorList.’ You can say myField, myField.myChoice.selected, or myField.myChoice.input.

Do you have an idea, of how to solve/debug it ?

Best regards.

Stephen

Ok I going to be thick I think, but how do I like this to a global picklist? The only option I can see it creating an Apex action that goes and gets this data. Also having tested the CSV pick list there is a max field length that then causes the picklist not to allow more values to be added to the selected(right) list. What is this max Length as I have picklist fields with long text.
Kind Regards Stephen

Lean

Hi, can this component render as normal picklist with multi selection capability like the ootb multi-select picklist instead of dual list?

[…] Learn more here. […]