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:

Dual Listbox expects two key pieces of data:

  1. The full set of all of the items that could be selected.
  2. The current set of items that are selected.

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.

Update: July 2019

New attributes have been added to this component. You can now:

  • 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. If you have previously installed this component as an unmanaged package, you will need to reinstall the package. For any existing implementations, you can edit the component in order to supply values for the new attributes. If you’ve never installed the package, you can get it using the links below:

18
Leave a Reply

avatar
9 Comment threads
5 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
John DuffyEvan PonterHeikoAnthony FosterAlex Edelstein Recent comment authors
  Subscribe  
Notify of
Evan Ponter
Guest
Evan Ponter

The code linked here is up to date, but the install link is using an older version. Also this component is not listed on the Screen Components page https://unofficialsf.com/flow-screen-components/

Keep up the good work!!

trackback

[…] through the values but one of the most useful things to do with this is to pass them into the new multiselect dual listbox screen component to let the user pick from among […]

Sujay
Guest
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,

Jeff
Guest

Can you provide the must current install link?

Anthony Foster
Guest
Anthony Foster

Plus 1 for getting the latest version. My client wants to include help text on the component but I can’t see how to do this.

jhetland
Guest

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?

Jeff
Guest

PLEASE PLEASE, Link to the updated version!

Anthony Foster
Guest
Anthony Foster

Hi Alex, I’m trying to add the required field logic from the source code on github and I’m getting an error when adding the required field JS in to the Helper:

Failed to save dualListBoxFSCHelper.js: c.dualListBoxFSC: org.auraframework.util.json.JsonStreamReader$JsonStreamParseException: Expected ‘,’ or ‘}’ [80, 5]: ‘setValidation’: Source

Any ideas on how to resolve this?

Heiko
Guest
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
Guest
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
Guest

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

trackback

[…] SmartChoice supports both picklists and radio button groups, set by passing in an Display Mode. For this document, we’ll always use “Picklist”. There’s no support for multiple select. If you need that, consider the Dual List Box flow screen component. […]

Heath Parks
Guest
Heath Parks

The Install links all point to version 1.0, how do I get the newest version with the updates?

Alex Edelstein
Admin

Not sure what’s going on there, but I created a new version 1.5 with the latest code and updated the link above. Let me know how it works.

Andrey Shestakov
Guest
Andrey Shestakov

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