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 values. 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.
Tutorials
Name | Description | Illustration |
---|---|---|
Build dynamic dropdowns in Salesforce flows using Avonni Combobox with dependent picklists | ||
Learn to disable a dropdown menu until a selection is made in another related dropdown, improving user experience. | ||
Learn to use Avonni Combobox for dependent picklists, dynamic filtering, and live data display. |
Changing the Properties
Enabling Multiselect
The options from your Combobox can be multi-selected by enabling the toggle multiselect
.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FIhYftyESypV3sSkObtCk%252F2022-10-10_20-46-01.png%3Falt%3Dmedia%26token%3D7b2b091c-b276-4c57-9d6d-7418b4a6cabc&width=768&dpr=4&quality=100&sign=f1d68aa2&sv=1)
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 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 user experience. This integration ensures the Avonni Combobox enhances interactivity and 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 with 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 adjusts to display only the relevant options based on the chosen controlling value. This leads to a more streamlined and context-specific user experience.
![](https://flow.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FrSIz1PgqZqBbD0rO4L4z%252F2024-01-07_21-48-15%2520%281%29.gif%3Falt%3Dmedia%26token%3D531806f8-9138-4301-9f1f-6fe52b458503&width=768&dpr=4&quality=100&sign=19be0e6a&sv=1)
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 reduces users' time 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
Last updated