Quick Choice – Improved Picklists and Radio Buttons for Flow

This Post was most recently updated on: 12/8/23
See below for notes on reactivity
Current Version: 2.42 (FlowScreenComponentsBasePack v3.3.0 or later)

12/8/23 – Eric Smith – Version 2.42

  • Clear the currently selected value if the options change on a reactive screen
  • Allow “Add a ‘None’ Choice” option for all valid picklist methods
  • Added clarification to an error message that could appear if the component has conditional visibility on a screen that can be revisited
  • Fixed the “Need a valid Input Mode. Didn’t get one.” error introduced in the prior release

Quick Choice is a flow screen component that provides some features that aren’t available in the current picklist and radio button implementation in Flow Builder.

Features that it provides:

  1. Accepts as an input a pair of string collections.
  2. Can accept a default value that’s dynamically determined by your Flow
  3. Can generate picklists from existing picklist fields with optional filtering based on record type
  4. Supports ‘None’ Value and Requiredness
  5. Choices can be formatted as Radio Buttons, Picklist, or Visual Cards
  6. Visual Cards can be displayed with or without Icons or Images
  7. Visual Cards can be displayed in single or dual columns
  8. Specify the width of the picklist.

Note: the rest of this post focuses on the Quick Choice component. If you are interested in learning more about the initial example shown in the above video, where different record forms are displayed based on Record Type, take a look at the posts about Record Detail, Get Layout Fields and Get Layout By Record Type and Profile, and Get Record Type by Object

Quick Choice supports both picklists and radio button groups, set by passing in a value for 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.

Creating Choices from String Collections

Use String Collections as your inputs by setting Input Mode to “Dual String Collections”. Pass in one collection for Labels and one for the underlying values (A typical use case for this is when you want your user to see a list of friendly labels, but you need to make sure that you can get the recordId of the selected label.)

Example: You want to take a collection of Account records and use their Name fields as labels and ID fields as values. Note that there’s a convenient utility action ‘Extract Strings from Collections’ that is available in the Collection Processors extension.

Example: You want your flow to let the user choose a record type from a picklist and then display the layout corresponding to that record type (This is demonstrated in the video above). The Quick Choice package includes several utility actions that make this easy. You first start out with the GetRecordTypeInfobyObject action, which returns separate collections of recordTypeNames and Ids. You then use those as inputs to a QuickChoice control. When the user makes their choice, you use a couple of additional utility actions to extract the Layout fields for the layout that corresponds to the combination of the selected RecordType and the running user’s profile. The layout fields are then passed to the new RecordDetail flow screen component.

Tip: If you are starting with a collection of SObjects instead of a collection of Strings, you can use the ExtractFieldFromCollection flow action (provided in the same package as SmartChoice) but you’ll need to modify its Apex, swapping the references to “Account” for your chosen SObject.

Tip: The ‘Get Layout ID’ action is found here. It is not packaged but you can install its Apex into your org directly.

Creating Filtered Choices from Picklist Fields

Many orgs take advantage of the ability to create record-type-specific sets of picklist values for picklist fields like Account.Type and Account.Rating. Flow already enables the easy creation of Picklist Choice Sets, which point at an existing picklist field. But you can’t filter a Picklist Choice Set on a specific Record Type. Quick Choice allows you to do that.

Start by setting the Input Mode to “Picklist Field”.

Pass in strings for Object Name and Field Name. (You can also use Object and Field picker)

Pass a record type ID in. If you don’t, the component uses the ID of the standard “Master” record type ID, which will result in no filtering. This package includes a useful utility function called GetRecordTypeInfoByObject that will return the record type Id’s and Labels for a given object type name. The video above shows how you can use QuickChoice first to let the user select a record type and then to show a set of filtered picklist fields. Learn more about using a Flow Action to retrieve the available record types so your user can pick the one they want.

Displaying Choices as Visual Cards

Set the Display Mode to “Card” and the Input Mode to “Visual Text Box” .

Pass in a collection of Strings in Choice Labels for the visual card headers, a collection of Strings in Choice Values for visual card descriptions and optionally a collection of icon and/or image references in Card Mode – Choice Icons for visual card icons.

If you are displaying icons, set the Card Mode – Include Icons in Display Box? parameter to True and set the Card Mode – Icon Size parameter.

The visual cards are displayed in a single column by default. Set the Card Mode – Number of Display Box Columns (1 or 2) parameter to 2 to display dual columns.

Visual Cards without Icons

Visual Cards with Icons

Dual Column Visual Cards


Single Column Visual Card sizes can be responsive.


Requiredness Support

You can set the Required field to $GlobalConstant.True. If you do, Flow will prevent screen transition if the user selects ‘None’ or makes no selection at all.

Controlling the ‘None’ Choice

By default, there will be no “None” Choice. To add one, set the input “Allow None To Be Chosen” to $GlobalConstant.True.

Multiple QuickChoices on the Same Screen

When including multiple Radio Button and/or Visual Card inputs on the same screen, you must provide a unique value for Master Label for each of the components.

Multiselect Picklists

Not supported directly with this component, but check out Dual List Box.

Reactivity

When providing a default value for a controlling picklist, assign it to a flow variable such as vDefaultValue and then use a reactive formula to reference the controlling value of the dependent picklist. This will use the default as the contolling value until a new value is selected in the controlling picklist.

BLANKVALUE( {!ControllingQC.value}, {!vDefaultValue} )

Currently, a default value is not supported for a controlled picklist.


Recent Improvements

7/23/23 – Eric Smith – Version 2.41

4/23/23 – Eric Smith – Version 2.40 (ScreenComponentsBasePack v3.2.0 or later)

  • Added an attribute for a Help Text hover to appear next to the Master Label for all input types

3/29/23 – Eric Smith – Version 2.39

  • Fixed dependent picklist bug (CB_TRUE not defined)

3/25/23 – Eric Smith – Version 2.38

  • Refactored to work with the Reactive Screen Beta for Dependent Picklists. It had previously worked with the Pilot but failed when switching over to the Beta.
  • Added a new option to allow the body of a Visual Card to be displayed as Rich Text, including pictures.

11/08/22 – Andy Haas – Versions 2.37

  • Updated the cardSize to allow the height of the card to contain the content

10/12/22 – Eric Smith – Version 2.36

  • Fixed backwards compatability bug from 2.34 when no controlling value attribute is provided for a controlled picklist field

6/2/22 – Eric Smith

  • Adjusted the bottom spacing to match that of all the standard flow screen input components
  • Fixed a bug that caused an error when using an empty Label collection with Visual Cards

3/29/22 – Eric Smith – New Controlling Value attribute for Picklist Fields. This can be used for dependent picklists by passing the output of one QuickChoice component to the input of another QuickChoice component in an org where the Reactive Screens pilot is enabled.


Demonstration Video of Dependent Picklists with QuickChoice


New! This tutorial video on using Quick Choice, courtesy of Helpful Salesforce Admin

QUICK CREATE RECORDS WITH QUICK CHOICE FROM USF
Allow your users to create records quickly, directly from the home page. (From SFDC Bailey, 9/19/23)

Reference

General Attributes

AttributeTypeNotes
Master LabelStringThe main label for the picklist or radio button group (Must be unique for each component on the same Flow screen)
Help TextStringOptional help text to appear as a hover next to the Master Label
Display ModeEnumEither “Visual”, “Picklist” or “Radio”, depending on which control you want
Input ModeEnum“Single String Collection”, “Dual String Collections”, “Picklist Field”, or ” Visual Text Box ” are currently supported
RequiredBooleanWill prevent transition if set to {!$GlobalConstant.True}
ValueStringThe selected value. This can be passed into QuickChoice, allowing you to set the default value dynamically.
Allow None To Be ChosenBooleanSet this to true to include a None choice. (For Input Mode “Picklist Field” only)
Set Width in PixelsIntegerSet the width of the component for Picklist & Radio Buttons (Default 320 pixels)
allValuesString[]The complete set of values provided to the user. (V1.3+)
allLabelsString[]The complete set of labels provided to the user (V1.3+)
selectedLabelStringThe selected Label (V1.3+)

Additional Attributes When Using Input Mode = “Single String Collection”

AttributeTypeNotes
Choice ValuesString CollectionThe values of your choices (The same collection will be used for Labels and Values)
The selected Label/Value will be returned by the component

Additional Attributes When Using Input Mode = “Dual String Collections”

AttributeTypeNotes
Choice LabelsString CollectionThe labels of your choices
Choice ValuesString CollectionThe values of your choices (should be unique)
The selected Value will be returned by the component

Additional Attributes When Using Input Mode = “Visual Text Box ”

AttributeTypeNotes
Choice Titles (Labels)String CollectionThe labels of your choices (should be unique)
The selected Label will be returned by the component
Choice Descriptions (Values)String CollectionThe values of your choices (This is provided as extra descriptive text in the visual card)
Card Mode – Choice Icons
(OPTIONAL)
String CollectionMix and Match either:
– Icon names formatted as icon_type:icon_name (Example “utility:attach”)
See complete selection at https://lightningdesignsystem.com/icons/
– Image names formatted as filename.ext (Example “astro.png”)
Referenced images must be included in a ZIP file referenced by a Static Resource* named Quickchoice_Images. Note that this Static Resource is created by the package and you can edit it and upload a new zip file.
Card Mode – Include Icons in Text Box?BooleanDisplay the provided icons in the visual card
Card Mode – Icon SizeStringOptions include x-small, small, medium, or large. This value defaults to medium.
Card Mode – Number of Textbox Columns (1 or 2) String1 or blank (default) for a single column or 2 for dual columns
Make Card Size ResponsiveBooleanThe default is False and the CPE will only display this selection when Visual Cards and Single Column are selected.
Use Rich Text for Descriptions?BooleanWhen checked, you can provide HTML formatted text to display as Rich Text in the body of the visual card. One use would be to use Text Template variables for each of the Choice Descriptions.

Additional Attributes When Using Input Mode = “Picklist Field”

AttributeTypeNotes
Object Name (for Picklist Field)StringExample: “Account” (this component no longer uses the combined “Account.Type” as an input)
Field Name (for Picklist Field)StringExample: “Type” (this component no longer uses the combined “Account.Type” as an input)
Record Type IdStringThis will default to the id of the Master record type
Is this a Dependent Picklist?BooleanCheck this box if this is a dependent picklist and you will be defining a controlling value.  The controlling value can either be a picklist field value or a checkbox field value. That value can come from another component on the same flow screen when the Reactive Screen functionality is enabled.
Controlling Value (Picklist Field)StringIf the contolling field is a Picklist, reference it here. Provide a value for Controlling Value Picklist or Controlling Value Checkbox but not both.
Controlling Value (Checkbox Field)BooleanIf the contolling field is a Checkbox, reference it here. Provide a value for Controlling Value Picklist or Controlling Value Checkbox but not both.

*NOTE: Static Resource
The package includes a Static Resource named Quickchoice_Images. To access your own images, create a ZIP file containing all of the images you want to reference and then, in Setup, Edit the Quickchoice_Images Static Resource and reference your ZIP file with the “Choose File” option. To learn more about Static Resources and creating ZIP files, see the Instructions for my ersQuickSwitchApp component.

Install

Current Version

This component is part of the Flow Base Packs package libraries.

View Source

Source

Release Notes:

12/8/23 – Eric Smith – Version 2.42 (ScreenComponentsBasePack v3.3.0 or later)

  • Clear the currently selected value if the options change on a reactive screen
  • Allow “Add a ‘None’ Choice” option for all valid picklist methods
  • Added clarification to an error message that could appear if the component has conditional visibility on a screen that can be revisited
  • Fixed the “Need a valid Input Mode. Didn’t get one.” error introduced in the prior release

7/23/23 – Eric Smith – Version 2.41 (ScreenComponentsBasePack v3.2.5 or later)

  • Fixed default value being passed as output for reactivity
  • Added reactivity for choiceLabels, choiceValues & choiceIcons input attributes (updates require a change to choiceValues)

4/23/23 – Eric Smith – Version 2.40 (ScreenComponentsBasePack v3.2.0 or later)

  • Added an attribute for a Help Text hover to appear next to the Master Label for all input types

3/29/23 – Eric Smith – Version 2.39

  • Fixed dependent picklist bug (CB_TRUE not defined)

3/25/23 – Eric Smith – Version 2.38

  • Refactored to work with the Reactive Screen Beta for Dependent Picklists. It had previously worked with the Pilot but failed when switching over to the Beta.
  • Added a new option to allow the body of a Visual Card to be displayed as Rich Text, including pictures.

11/08/22 – Andy Haas – Versions 2.37

  • Updated the cardSize to allow the height of the card to contain the content

10/12/22 – Eric Smith – Version 2.36

  • Fixed backwards compatability bug from 2.34 when no controlling value attribute is provided for a controlled picklist field

Version 2.35 – 6/2/22 – Eric Smith

  • Adjusted the bottom spacing to match that of all the standard flow screen input components
  • Fixed a bug that caused an error when using an empty Label collection with Visual Cards

Version 2.34 – 3/29/22 – Eric Smith – New Controlling Value attribute for Picklist Fields. This can be used for dependent picklists by passing the output of one QuickChoice component to the input of another QuickChoice component in an org where the

Version 2.33 – 7/3/21 – Eric Smith
Added an * next to the Label for Visual Cards when the Required attribute is set to True

Version 2.32 – 1/28/21 – clifford-fra
Added support for responsive sizing for single column Visual Cards

Old Versions (not recommended)

Version 2.31 Unlocked – 9/14/20 – Eric Smith
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.2 Unlocked – 9/2/20 – Eric Smith

version 2.1 Unlocked

Version 2.0 Unlocked 

Version 1.4 Managed 6/5/20

Version 1.4 – 4/19/20 – Eric Smith

Version 1.3

3/2/20 Eric Smith
v1.27 Added ability to display both images & icons on visual cards (Thanks again to clifford-fra for the update)

Unmanaged v1.27 (Production/Developer)
Unmanaged v1.27 (Sandbox)

2/6/20 – v1.26 Display a Visual Card as preselected when passing in a default value (Thanks to clifford-fra for the fix)

Unmanaged v1.26 (Production/Developer)
Unmanaged v1.26 (Sandbox)

Unmanaged V1.24

See Release Notes

1/16/20Eric Smith
v1.23 – Added an option to display the visual cards in a single or dual columns

Managed V1.23 (Production/Developer)
Managed V1.23 (Sandbox)

1/3/20 -alexed
v1.20 – changed actions to global from public to make them visible in flow builder.

12/31/19Eric Smith Enhancements
v1.17: Added visual text box selection with or without icons. Fixed error handling when Required is set to True

12/29/19
v1.13: Fixed bug with defaults on picklist control. Added flag to allow or disallow a ‘None’ choice

Release Notes

Version 2.3 – Eric Smith – 9/14/20
Fixed Visual Card selection bug when no Master Label is provided

Version 2.2 – Eric Smith – 9/2/20
Includes a new option to sort the values in the Picklist

Version 2.1 – Now includes a CPE (Custom Property Editor)