Combobox
A drop-down list that also enables the user to select items in the drop-down list.
Overview
The Combobox user-friendly component combines a dropdown list with a text input field. Users can pick from a list of options or type their value. Once selected or typed, the choice appears in the Combobox. Users can also search within the list, select multiple items, add new options, and customize the look of the Combobox.
Changing the Properties
Enabling Multiselect
The options from your Combobox can be multi-selected by enabling the toggle multiselect
.
Setting the Data Source
The Data Source is where you'll set up the options in your combobox dropdown menu. You have three ways to do this:
Manual
: This option lets you manually enter each choice for your combobox, independent of any Salesforce data.Variable
: With this option, you can dynamically generate combobox options by connecting it to a data collection in your workflow. You'll also be able to map specific attributes for each option.Picklist values
: Choose this if you want to populate your combobox with existing picklist values from your Salesforce records.Query
: Ideal for complex data retrieval or when sourcing. Using a 'Get Records' collection with this data source is unnecessary, as the query itself is powerful enough to simplify your flow. Learn more.
Controlling Values Feature
This feature becomes particularly effective when utilizing picklist data sources. It introduces dynamic data filtering within your screen flows, providing a streamlined and intuitive experience for users. This integration ensures that the Avonni Combobox not only enhances interactivity but also maintains data relevance with its context-aware selections.
Key Feature:
Controlling Values Functionality: At its core, the Avonni Combobox supports controlling values, a vital feature for creating responsive and data-driven interfaces in Salesforce Screen Flows.
How it Works:
Picklist Data Sources: The Avonni Combobox utilizes picklist data sources, allowing users to choose from a predefined list of options. This ensures consistency and accuracy in data entry.
Selection of a Controlling Field: Users can select a field within their Salesforce org that holds controlling values. This field acts as a primary filter for the data presented in the Combobox.
Dynamic Display of Controlling Values: Once a controlling field is selected, the Avonni Combobox dynamically adjusts to display only the relevant options based on the chosen controlling value. This leads to a more streamlined and context-specific user experience.
Benefits:
Enhanced Data Relevance: By filtering options based on controlling values, the Avonni Combobox ensures that users see only pertinent data, reducing clutter and enhancing decision-making.
Improved User Experience: The dynamic adjustment of available options based on selected controlling values makes for a user-friendly interface, simplifying the data entry process.
Increased Efficiency: This feature significantly cuts down the time users spend searching for the right option, as irrelevant choices are filtered out.
Use Cases:
Ideal for scenarios where data selection needs to be precise and contextually relevant, such as filtering cities based on a selected country or displaying product models based on a selected brand.
Adding Interactions
From the interactions panel, you can define interactions when users select an option or multiple ones (when multi-select is enabled).
Here is a complete list of actions you can add to the Combobox.
Styling the Combobox
The label and the border are stylable with access to Color
, Font Size
, Font Weight
and radius
attributes
Tutorials
Name | Description | Illustration |
---|---|---|
How to enable the Avonni ComboBox in Salesforce Flows only when dependent picklist values are set. |
Setting | Value |
---|---|
isMultiselect | Enabled |
Variant | Standard |
Dropdown Alignment | Left |
Data Source | Variable |
Data Mappings / Label | Full Name |
Secondary Text | |
Value | ContactID |
Specifications
Attributes
Name | Type | Description |
---|---|---|
allowSearch | Boolean | If present, the combobox options are searchable |
disabled | Boolean | If present, the combobox is disabled and users cannot interact with it. |
dropdownAlignment | String | Specifies where the drop-down list is aligned with or anchored to the selection field |
dropdownLength | Integer | Maximum length of the dropdown menu. Valid values include 5-items, 7-items and 10-items |
fieldLevelHelp | String | Help text detailing the purpose and function of the combobox |
hideClearIcon | Boolean | If present, it is not possible to clear a selected option using the input clear icon |
hideSelectedOptions | Boolean | If present, the selected options pills will be hidden |
isMultiSelect | Boolean | If present, multiple options can be selected |
label | String | Text label for the combobox |
placeholder | String | Text that is displayed before an option is selected, to prompt the user to select an option |
required | Boolean | If present, a value must be selected before the form can be submitted |
value | String | Array of selected options value, or unique string value. If is-multi-select is false and several values are passed, only the first one will be taken into account |
valueCollection | String[] | |
variant | String | The variant changes the appearance of the combobox |
options | ComboboxOption[] | Array of option objects |
picklistFieldApiName | String | |
picklistSortOrder | String |
Events
Name | Description |
---|---|
change | The event fired when the combobox value changes. |
Styling Hooks
Name | Description |
---|---|
Text Color | Define a text. |
Font Size | Define a font size for the label. |
Font Style | Define a font style for the label. |
Font Weight | Define a font weight for the label. |
Border Radius | Define the radius of the combobox's corners. |
Border Color | Define a border color of the combobox. |
Border Size | Define a border size of the combobox. |
Border Style | Define a border style of the combobox. |
Last updated