Quick Choice – Improved Picklists and Radio Buttons for Flow

(Note: Running Summer ’20? If so, check out Quick Choice 2.0 with Custom Property Editor)

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

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 LabelsString CollectionThe labels of your choices (should be unique)
The selected Label will be returned by the component
Choice ValuesString 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
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

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 versions 1.27+ 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 Package

Version 1.4 Managed 6/5/20

Version 1.4 – 4/19/20 – Eric Smith

Version History

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

View Source

Source

Subscribe
Notify of
guest
178 Comments
Inline Feedbacks
View all comments
Ed Santandrea

5/14/20 – It seems I am getting an error when installing directly into my sandbox (using the Sandbox link).

I tried installing for Admin as well as All Users. Also tried changing “What if existing component names confflic….” set to Do Not Install as well as Rename conflicting…

“This app can’t be installed.
There are problems that prevent this package from being installed.
Invalid reference
c..NotSupportedMessage recordDetailFSC: Invalid referencec.NotSupportedMessage of type label in file
of type label in file recordDetailFSC.js
reordDetailFSC.js”

Scott Fenech

I’m getting the same error.

Alex Edelstein

I think this error has been fixed in the current version. Are you trying to install version 1.4?

Cris Zuniga

Hello, I am also getting an error when downloading v1.27 to a sandbox. I checked the “Rename conflicting…” and am getting this error: “The name “MockHttpResponseGenerator” is already used on component type: Apex Class. Please rename existing component.”

Alex Edelstein

That problem has been fixed in more recent versions, Cris. Is there a reason you’re installing an old version?

Wolf

Hi, sorry for such stupid questions – but… I did previously install the unmanaged package (1.27 Sandbox). Then played around developing some flows. Now I’m coming across an issue: one screen, three QC components for three fields (custom object) only one component is displayed shuffling the order hides all three whereas another screen with three QC components has no issues (Account object) So I thought I’d “upgrade” first… Now – how do I “upgrade”? If I want to install I get: This app can’t be installed. There are problems that prevent this package from being installed. Duplicate NameThe name “quickChoiceFSC”… Read more »

Alex Edelstein

Salesforce generally prevents you from overwriting existing stuff. Because the new versions have changed enough to be considered different, you need to either delete your existing version before installing the new version or wait for us to create a managed package that can be installed side by side because it has a separate namespace.

Wolf

Thanks for the quick reply! Just to be sure – do I understand it correctly – if I want to replace the actual version with a new one, as I did use the component in a flow, I have to delete the screens / remove the QC component from it?
 
Thanks
Wolf

Wolf

And to add to this – arrrgh – I just spent 1.5 days finding out a typo in input type field caused the initial error – so no immediate need to upgrade anymore – nevertheless would be helpful to understand whether I would have to delete something before upgrading… And maybe an idea, if feasible, to somehow make the setting field (display mode, input mode) fool proof – a drop-down? Or some input validation… For stupid people like me…

Alex Edelstein

Just posted a new Managed package version of 1.4. It should install and avoid collisions. Give it a try if you’re having trouble installing 1.4

M Hamza

Exactly getting the same issues. Can’t install 1.4 version on sandbox, did try both methods. I hope eric can see this comment.
Although there is another update but only for Summer’20 orgs.

Alex Edelstein

Just posted a new Managed package version of 1.4. It should install and avoid collisions. Give it a try if you’re having trouble installing 1.4

M Hamza

Thanks. Can I install it over unmanaged one?
 

Last edited 25 days ago by M Hamza
M Hamza

The AppExchange Application or component you have selected is not yet available on your instance of salesforce.com. Please check back in a few days to retry the installation. Press the back button of your browser now and bookmark the AppExchange Directory page so that you can find it later.

Done

 

Marc

Is there any sort of instruction or explanation for this anywhere? Can’t seem to find info on what each field does. I am trying to just set a picklist to a default value from a variable.

Nick Sauer

overrideNext boolean input would be a nice feature, and then on handlechange if that is set true via flow config, you set handleNext navigation and fire that event. I just used this in org, and this was a common request for the visual cards specifically as an expected action. so i just added for our implementation and expect it will be employed frequently.
 
Thanks for all your work on these things — really learned a ton from them and so many useful bits!
 

Last edited 21 days ago by Nick Sauer
Shahin M

Hey, is there an easy way to deselect a visual tile once selected? I’m using the visual tiles/cards (fantastic btw), but once I select one, the tile has a blue outline, and when I select another tile then that also receives a blue outline? There’s no way to deselect an outlined box without exiting the flow it seems. Also for others that may be running into a snag when trying to use the Set Component Visibility – I used an AND condition to evaluate the QuickChoice.Value field in order to have subsequent components show/hide. Hope it helps! This is a… Read more »

Last edited 16 days ago by Shahin M
Fosternow

I’m looking for the ability to enforce that a user only select one card (value). Selecting another value should remove the other value.

Chase Kaiser

See parent reply

Chase Kaiser

Do you have a value in the Master Label field? The bug you are describing happens when that field is left null. If you don’t want a title, just hit the spacebar once in that field.

Bridget

Will the Picklist option work with fields that utilize a Picklist Value Set (Global picklist)?

Bridget

…update…this does work with Picklist Value sets…

Theo Blagg

Hi All! Great app but I could use some help with a bug I’m seeing. I’m getting the following error when I attempt to assign an output variable (either manually or automatically assigning) to the Quick Choice FSC v1.4 component. Error Message: class java.lang.String cannot be cast to class moduleapi.interaction.FlowPicklistValue (java.lang.String is in module java.base of loader ‘bootstrap’; moduleapi.interaction.FlowPicklistValue is in unnamed module of loader org.eclipse.osgi.internal.loader.EquinoxClassLoader @1efdcd5) My settings: Display Mode: Picklist Field Name: CurrencyIsoCode Input Mode: Picklist Field Object Name: Opportunity Master Label: Opportunity Currency Value: {!User.DefaultCurrencyIsoCode} Error occurs when I attempt to move to the next screen in… Read more »

Theo Blagg

Little update on this… It looks like it has less to do with the variable output assignment then I originally thought. I’m able to assign an output variable as long as I do not default the input value in the component. I’m currently using  {!User.DefaultCurrencyIsoCode} but have tried other variables and I’m seeing the same issue.

M Hamza

If anybody don’t wanna use MANAGED one and want to deploy unmanaged, you can use the DEPLOYTOSF button from here
https://github.com/mhamzas/quickChoiceFSCproject
PLUS, Fixed for FSC Mortgage Picklist Values.

Last edited 13 days ago by M Hamza
Frank

When “Allow ‘None’ to be Chosen” is set to true and None is selected the value ‘None’ is updated to the defined field instead of a ‘Null’ value (See screenshot). Is this a bug or a missing setting? 😉



2020-06-22_11-55-42.png
Fosternow

Can visual card mode allow only once value to be selected? I’m using card mode for navigation in a flow and the use should only be allowed to select one value.

Andrew Mishler

Awesome component. One question – where do I go to see the icons available in Setup? If I want to add more icons for the visual cards, how do I do that?

Andrew Mishler

Nevermind, I’m seeing now with the Icon page you linked to it’s just built into the API.

Peggy

Is there a way to add more space around the component? I’m using picklist for the input mode and the field underneath is crowded just under the quick choice field.

[…] For this reason, we turn to an Unmanaged Package called quickChoiceFSC.  […]