QuickChoice – Improved Picklists and Radio Buttons for Flow

This Post was most recently updated on: 7/3/21
Current Version: 2.33 (FlowScreenComponentsBasePack v2.4.0)

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

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

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

New in Version 2.32 (1/28/21)
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.

Multiselect Picklists

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

Reference

General Attributes

AttributeTypeNotes
Master LabelStringThe main label for the picklist or radio button group
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.

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

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

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

View Source

Source

Old Versions (not recommended)

Release Notes:

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)