Combobox
Last updated
Was this helpful?
Last updated
Was this helpful?
In the Properties Panel, find the Data Source property and select one of the following:
After choosing your data source (Variable or Query), you need to tell the Combobox which fields from that data source should be used to display each option in the dropdown list. This is done through data mappings. You're essentially linking fields from your data to specific parts of the Combobox's appearance.
Label: Select the field that contains the text you want to display for each option in the dropdown (e.g., Contact.Name, Account.Name, or a formula to combine fields).
Description: Select the field that contains the subtext you want to display for each option in the dropdown.
Avatar Image Source: Map a field (usually a URL field) containing the image to display in the combobox option.
After setting up your data source and mappings, you can customize the Combobox's basic behavior and appearance using these general settings.
Label: (Text) Enter a label for the Combobox itself (e.g., "Select a Contact:"). This label is displayed above the dropdown.
Value: (Text/Collection)
This holds the currently selected value(s). It's essential to bind this to the proper field type.
For single-select, bind it to the value.
For Multiple select, bind it to a collection variable.
Placeholder: (Text) Placeholder text to display when no option is selected.
Variant: (Text) Select how the combobox is displayed: Standard, Label Inline, Label Stacked, Label Hidden
These settings control the behavior and appearance of the dropdown list itself (the part that appears when the user clicks on the Combobox):
Dropdown Alignment: Align the dropdown list (Left, Center, Right, Auto).
Dropdown Length: Visible dropdown height (5 or 7 options).
Multiselect: Allow multiple selections (yes/no).
Maximum Selected Options: (If Multiselect) Maximum selections allowed.
Minimum Selected Options: (If Multiselect) Minimum selections required.
Keep Open on Select: (If Multiselect) Keep dropdown open after selecting.
Show Search Input: Show a search box within the dropdown.
Required: Make a selection mandatory.
Disabled: Disable the entire Combobox.
Hide Clear Icon: Hide the "x" (clear) icon.
Hide Selected Options: Hide options already selected
The Combobox component supports interactions, allowing you to trigger actions when the user changes the selection. The most common event is On Change, which fires whenever the selected option (or options, in multi-select mode) changes.
Select the Combobox: Click on the Combobox component in the Component Builder canvas.
Go to the Interactions Panel: Find the "Interactions" panel (or the "Interactions" section within the Properties Panel).
Add a New Interaction: Click the button or link to add a new interaction.
Choose the Event: Select the On Change event.
Choose an Action: When the selection changes, select the action you want to perform. Examples include:
Navigate: Go to a different page or record.
Open Flow Dialog/Panel: Launch a Screen Flow.
Show Toast: Display a notification message.
Refresh Data Source: Refresh a data source (often used in conjunction with reactive filtering, as shown in the example below).
Set Variable Value: Set a variable value.
Configure the Action: Provide the necessary settings for the chosen action. This often involves referencing the Combobox's current value.
Manual
Enter data directly into the component configuration.
Variable
This is useful for data that changes based on user interactions or other component logic.
Query
This is the most common option for displaying Salesforce records.
Picklist
Retrieve data dynamically from a standard or custom picklist field within Salesforce.