Develop Custom Property Editors Quickly with Flow Combobox

Updated: 11/27/20

New Attributes by Eric Smith
disabled (optional) – set this attribute to true when you want to show the combobox as disabled in the CPE

New Attributes by egolden-tc
autocomplete (optional) – this maps to the standard autocomplete field on lightning-input. By default it is set to “off”. This ensures browser autocomplete dropdown doesn’t cover or conflict with the combobox options. It can be changed to “on” to revert to the original behavior.

field-level-help (optional) – this maps to the standard field-level-help on the lightning-input. If a value is provided it will show as help text on the combobox to give users context on what they are selecting and/or why.

The only default behavior change is the disabling of the autocomplete. This is probably desirable but the behavior can be reverted to the previous default per the above options.


Flow Combobox is a combobox that’s intended for use by developers who are building custom property editors. It’s not something you’d drop onto a flow screen.

What it does is provide a ready-to-use combobox that’s smart enough to extract from the information provided by Flow Builder all of the available mergefields. You can use this as a CPE developer to enable admins configuring your extension to apply references that will be dynamically resolved when the flow is run.

In doing this, Flow Combobox is simply emulating, as best as possible, the functionality provided in Flow’s native property editors .

Here’s the native Flow version:

and here’s the Flow Combobox:

Using Flow Combobox
The flow designer can enter a literal value, or choose a mergefield from the list. Literals are always reported back to Flow Builder in dispatched events as having type = String. values chosen from the list will always be reported back to Flow Builder as references (mergefields).
All reference variables are surrounded by {!variableName} in edit mode, if user removes {! }, value will be converted in a literal automatically. If user types in a value that is surrounded by {! }, component will perform an attempt to find this variable in builderContext, and in case of failure will render an error and return false via reportValidity .
If selected parameter is valid builderContext variable it will be rendered as a pill with no errors.

Attributes

name (required) – unique String, that represents name of the component, used as a key in “valuechange” events.

label (required) – String used to display a label above the combobox

builderContext (required) – this attribute gets populated with information about the underlying Flow, including its input attributes, current values previously provided by the user, and more.

The value and valueType attributes represent the selected current value. Inspect the underlying input attribute in the passed in builderContext when initializing to determine whether there’s an existing value that needs to be loaded into the combobox.

  • value (optional) – String, determines the value the component will be initialized with. Must be a valid value from builderContext. This value can be a reference to an SObject or a literal value. Whenever this is set to an SObject reference, flowCombobox will enable traversal of the object’s fields
  • valueType (optional) – String(valid values are ‘reference’ or ‘String’). This instructs Flow Builder whether to treat the value as a literal string or a reference to an SObject. Default is “String”

builderContextFilterType (optional) – String. Use this to filter the contents of the combobox to show only a specified type of object. Note that this is different from the type in valueType.

builderContextFilterCollectionBoolean (optional) – Boolean, if true, flowCombobox will show only collection variables from the builderContext

Methods

reportValidity – returns false in case if component has any validation errors

Search behavior

Typing into the combobox input field will search on the apiNames of available mergefields. This search will respect filters put in place by the search string,flowContextFilterType, and flowContextFilterCollectionBoolean. If the type is “String”, however, it will also shows SObject records with a traversable “>” to allow users to traverse to fields of the SObject.

Install

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

View Source

https://github.com/alexed1/LightningFlowComponents/tree/master/flow_screen_components/FlowScreenComponentsBasePack/force-app/main/default/lwc/fsc_flowCombobox