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:

14 replies
  1. Sujay
    Sujay says:

    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,

    Reply
  2. jhetland
    jhetland says:

    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?

    Reply
  3. Anthony Foster
    Anthony Foster says:

    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?

    Reply
  4. Heiko
    Heiko says:

    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

    Reply
    • Evan Ponter
      Evan Ponter says:

      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

      Reply

Trackbacks & Pingbacks

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

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply