# Combobox
*** The Avonni Combobox component provides a dropdown input field for selecting single or multiple records from a specified data source. It offers customizable labels, variants, and options like search, actions, and data mappings, making it ideal for dynamic form inputs or record selection in guided processes. Key features include: * **Flexible Selection:** Supports single or multi-select with searchable dropdowns. * **Customizable UI:** Adjust labels, variants, placeholders, and dropdown alignment. * **Data Sources:** Manual, Variable, Picklist, or Query for dynamic options. * **Actions:** Add custom actions within the dropdown for enhanced interactivity. * **Output Support:** Captures selected values for Flow logic or multi-select picklist fields. * **Styling Options:** Control dropdown length and visibility of clear/selected options. ***Audience**:* Flow builders, business analysts, or admins creating interactive forms or record pickers in Screen Flows. ***Tip**:* Use multi-select for fields like contact roles; bind Value to Flow variables for real-time updates. #### Use Cases * **Case Form:** Select a single Contact or multiple Categories for case classification. * **Opportunity Page:** Pick a Campaign or multiple Products for an Opportunity. * **Project Form:** Choose a single Project Manager or multiple Team Members. * **Survey Flow:** Allow multi-select of interest areas from a Picklist. * **Approval Workflow:** Select a single Approver or multiple Reviewers. * **Dynamic Lookup:** Query Accounts for a searchable dropdown in a custom process. *** ## Configuration Add the Combobox to a Screen element in a Salesforce Flow and configure via the Properties Panel. ### **Basic Properties** These control core functionality and appearance. | Property | Type | Description | Example | | --------------------- | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | | API Name | Text | Unique identifier for the instance, used to reference the component in bindings and interactions. | `ContactPicker` | | Label | Text | Label displayed above or alongside the input field to identify its purpose. | "Select Contact" | | Value | Binding | Pre-fills the Combobox with a single value from a Flow resource (e.g., a Text Variable) when the component loads; accessible via `$Component.ContactPicker.Value` after user selection. | Bind to `{!selectedContactId}` | | Value Collection | Binding (Visible if `Is Multi Select` is On) | Pre-fills the Combobox with multiple values from a Flow resource (e.g., a Text Collection Variable) when the component loads; accessible via `$Component.ContactPicker.Value` as a collection after user selections. | Bind to `{!selectedCategories}` | | Field Level Help | Text (Optional) | Help text displayed next to the label to provide guidance or context for users. | "Search for a contact." | | Variant | Select | Label display style: `standard` (above), `label-hidden`, `label-inline` (beside), `label-stacked` (animates up on focus). | `standard` | | Placeholder | Text | Hint text shown when the field is empty, prompting users for input. | "Type to search..." | | Dropdown Alignment | Select | Position of the dropdown relative to the input: `auto`, `left`, `center`, `right`, `bottom-left`, `bottom-center`, `bottom-right`. | `auto` | | Dropdown Length | Select | Maximum number of visible items in the dropdown: `5 items`, `7 items`, `10 items`. | `7 items` | | Is Multi Select | Boolean | Enables multiple selections when On; displays Value Collection option when active. | Off | | Show Search | Boolean | Displays a search bar within the dropdown for filtering options (if On). | On | | Required | Boolean | Requires a selection before proceeding, useful with Flow validation (if On). | On | | Hide Clear Icon | Boolean | Hides the icon to clear the selection (if On). | Off | | Hide Selected Options | Boolean | Hides already selected options in the dropdown (if On). | Off | ***Best Practice**:* Use Value to pre-fill with a single ID from a Flow variable (e.g., {!selectedContactId}); enable Is Multi Select and bind Value Collection to a Text Collection Variable (e.g., {!selectedCategories}) for multiple pre-filled values. Test bindings in Flow Debug to ensure correct initialization and updates. ### **Actions Section** Add custom actions within the dropdown (use case: enhance user options, e.g., "Create New" or "View All"). | Property | Type | Description | Example | | ----------------- | ------- | ------------------------------------------------------------ | ------------- | | Label | Text | Text for the action button. | "Create New" | | Name | Text | Unique identifier for the action. | `createNew` | | Icon Name | Text | SLDS icon for the action. | `utility:new` | | Position | Select | Placement: `top` or `bottom`. | `top` | | Display on Search | Boolean | Shows action only during search (defaults to Off). | On | | Fixed | Boolean | Keeps action visible regardless of scroll (defaults to Off). | Off | | Disabled | Boolean | Disables the action (if On). | Off | ***Note**:* Actions add interactivity (e.g., trigger a Flow to create a record). Use case might be limited; consider for workflows needing inline creation or navigation. Test usability impact. ### **Data Source Section** This section determines where the Combobox gets its list of options (e.g., Contacts, Categories) to display in the dropdown. Configuring this is essential because the Combobox needs a source to populate its selectable items, ensuring users have relevant choices based on your Flow’s purpose. * **Purpose:** Defines the origin of the dropdown options, enabling the Combobox to show a dynamic or static list tailored to your needs. * **Why It’s Needed:** Without a data source, the dropdown would be empty, rendering the component unusable. This setup connects it to Salesforce data or manual entries, aligning with your specific use case. * **Options:** Choose from the following data sources based on your requirements | Data Source | Description | When to Use | | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | | [Manual](https://docs.avonnicomponents.com/flow/component-builder/data-sources/manual) | Enter options directly in the Flow for static lists. | For simple, predefined choices (e.g., "Yes/No"). | | [Variable](https://docs.avonnicomponents.com/flow/component-builder/data-sources/variable) | Use a Flow Collection Variable (e.g., from Get Records) for a dynamic list of records. | When options come from queried data (e.g., Contact records). | | [Picklist](https://docs.avonnicomponents.com/flow/component-builder/data-sources/picklist) | Pull options from a Picklist field on a Salesforce object. | For fixed values from a field (e.g., `StageName` on Opportunity). | | [Query](https://docs.avonnicomponents.com/flow/component-builder/data-sources/query) | Run a SOQL query to fetch records dynamically. | For custom, query-based lists | **Guidance**: Select Manual for static options, Variable for record-driven lists, Picklist for field-specific values, or Query for flexible data retrieval. Test your choice in Flow Debug to ensure the options load correctly. ### **Data Mappings** * **Purpose:** Assigns specific data fields to the Combobox’s display properties, controlling what users see (e.g., names) and how options function (e.g., enabling/disabling). * **Why It’s Needed:** Without mapping, the dropdown might show raw data (e.g., IDs) instead of user-friendly labels. It also allows customization like avatars or disabled states, improving usability. * **Options:** Map the following properties based on your data source This section allows you to determine which fields from your data source (Manual, Variable, Picklist, or Query) are displayed as options in the Combobox dropdown. Mapping these fields is crucial for defining how each option appears and behaves, ensuring the dropdown displays meaningful information to users. | Property | Type | Description | Example | | -------------- | ------- | ------------------------------------------------ | ----------------------------- | | Label | String | Main text displayed for each option. | `Name` (e.g., Contact Name) | | Secondary Text | String | Additional text below the label for context. | `Email` (e.g., Email Address) | | Disabled | Boolean | Marks an option as unselectable (On to disable). | `Off` | | Avatar | String | URL or binding for an image next to the option. | `https://avatar.png` | * **How It Works by Data Source:** * [**Manual**](https://docs.avonnicomponents.com/flow/component-builder/data-sources/manual)**:** Enter values manually for each option (e.g., Label: "Option 1", Secondary Text: "Details"). * [**Variable**](https://docs.avonnicomponents.com/flow/component-builder/data-sources/variable)**:** Map fields from your Collection Variable (e.g., Label to Subject, Secondary Text to Description). * [**Picklist**](https://docs.avonnicomponents.com/flow/component-builder/data-sources/picklist)**:** Map the Picklist field value to Label (e.g., StageName), with Secondary Text or Avatar optional. * [**Query**](https://docs.avonnicomponents.com/flow/component-builder/data-sources/query)**:** Map query result fields (e.g., Label to Name, Secondary Text to Email) from the SOQL output. ***Guidance**:* Use **Label** for the primary display (e.g., Name), **Secondary Text** for extra details (e.g., Email), and **Avatar** for visuals (e.g., profile images). Test mappings in Flow Debug to confirm options render as expected ### Controlling Values This feature enhances the Avonni Combobox in Screen Flows by dynamically filtering picklist options based on a controlling field, creating a more relevant and user-friendly experience. It’s useful when using picklist data sources, as it ensures the dropdown displays only context-appropriate choices. * **Purpose:** Allows the Combobox to adjust its options dynamically based on a selected controlling field, improving data relevance and simplifying selection. * **Why It’s Needed:** Without this, users might see irrelevant options in large picklists, leading to confusion. Controlling values streamlines the process by showing only valid choices tied to the Flow’s context. **Key Feature** | Feature | Description | | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | Controlling Values Functionality | Enables the Combobox to filter picklist options based on a controlling field’s value, making selections context-aware. | **How It Works** 1. **Picklist Data Source:** The Combobox uses a picklist field (e.g., StageName on Opportunity) as its data source, providing a predefined list of options. 2. **Select a Controlling Field:** Choose a field in your Salesforce org (e.g., Type on Opportunity) that controls which picklist values are shown. This field acts as a filter. 3. **Dynamic Option Display:** The Combobox updates its dropdown to display only the picklist values relevant to the selected controlling field value (e.g., showing "Closed Won" only for Type = 'New Business'), enhancing the user experience
**Benefits** | Benefit | Description | | ------------------------ | -------------------------------------------------------------------------------------- | | Enhanced Data Relevance | Filters out irrelevant options, showing only pertinent choices to reduce clutter. | | Improved User Experience | Makes the interface intuitive by adjusting options dynamically, simplifying decisions. | | Increased Efficiency | Saves time by eliminating the need to scroll through unrelated options. | **Guidance**: Use this feature with picklist data sources for fields like Status or Category. Test in Flow Debug to ensure the controlling field and picklist sync correctly with your data ### **Interactions Tab** The Avonni Combobox component supports interactions triggered on **Change** (when a value is selected or modified) and **Action Click** (when a custom action in the dropdown is clicked). Below are the available interaction types, informed by the rich set of [**Avonni interactions**](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel) for Screen Flows. **Available Interactions** Configure these in the Interactions Tab of the Properties Panel. | Property | Type | Description | Example Use Case | | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | | On Change | Settings | Triggers when a value is selected or changed in the Combobox. Use `$Component.ContactCombo.Value` to access the selected data (single ID or collection for multi-select). | Update a record with the selected value, show a Toast message, or navigate to a record page. | | On Action Click | Settings | Triggers when a custom action (e.g., "Create New") in the dropdown is clicked. Use `$Component.ContactCombo.Value` for context or action-specific data. | Launch a Flow Dialog to create a new record, open a Quick Action, or display a Confirm modal. | *** ## Output Variables The Combobox exposes several output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Combobox component, and pick the output variable you need. ### Selection When users select one or more options in the Combobox, these variables capture the selection. | Output variable | Type | What it returns | | ------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Selected Option** | Record (SObject) | The Salesforce record of the option the user selected. When single-select, this is the one selected option. | | **Selected Options** | Record Collection (SObject\[]) | All selected options as a collection of Salesforce records. Use this when **Is Multi Select** is enabled. | | **Value** | Text (String) | The value of the selected option. When single-select, this is the value of the one selected option. | | **Value Collection** | Text Collection (String\[]) | All selected values as a list of strings. Available when **Is Multi Select** is enabled. | | **Value Collection Serialized** | Text (String) | The selected values as a JSON string. | | **Value Comma Separated** | Text (String) | All selected values joined by commas into a single string (e.g., "Value1,Value2,Value3"). Useful for passing directly into formula fields or text-based filters. | > **Example:** A user selects multiple product categories from a multi-select Combobox. Use **Selected Options** to loop through and create related records, or use **Value Comma Separated** to store all selections in a single text field. {% hint style="info" %} #### **Which output should I use?** * Need the full record(s)? → **Selected Option** (single) or **Selected Options** (multiple) * Need the value as text? → **Value** (single) or **Value Collection** (multiple) * Need a flat comma-separated string? → **Value Comma Separated** * Passing to Apex? → **Value Collection Serialized** (JSON string) {% endhint %} ### Search | Output variable | Type | What it returns | | --------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Search Term** | Text (String) | The text the user typed into the search box. Use this to trigger dynamic filtering, log search analytics, or pass the search query to an Apex action for server-side lookup. | > **Example:** A user types "Acme" into a searchable Account combobox. Use **Search Term** in a subsequent screen or Apex action to refine results or track what users are searching for. ### Action Clicks When users click an action button in the Combobox dropdown, these variables identify which action was triggered. | Output variable | Type | What it returns | | ----------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Clicked Action Name** | Text (String) | The name of the action the user clicked (e.g., "New Record", "Refresh"). Use in a **Decision** element to route the flow based on which action was pressed. | > **Example:** A "Create New" action is added to the Combobox. When the user clicks it, **Clicked Action Name** returns "Create New" and a **Decision** element routes to a record creation screen. ### Component Metadata | Output variable | Type | What it returns | | ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | **Number of Items** | Integer | The total number of options currently loaded in the Combobox. Useful for displaying a count or making decisions when the dropdown has no options. | *** ## **Styling Options** This section lets you customize the visual appearance of the Avonni Combobox in your Screen Flow, including layout, colors, borders, and text styles. Styling enhances the component’s look and feel, ensuring it aligns with your Salesforce app’s design and thereby improving the user experience. * **Purpose:** Tailors the Combobox’s appearance (e.g., margins, colors) to match your Flow’s aesthetic and usability needs. * **Why It’s Needed:** Without styling, the Combobox uses default settings that might not fit your UI. Customization makes it visually consistent and user-friendly.
Styling Categories The styling options are grouped into areas like layout, labels, options, avatars, actions, and pills. Below are the details for each: **General Layout** | Property | Description | Example | | -------- | ---------------------------------------------------------------- | ------------------- | | Margin | Space outside the Combobox (top, right, bottom, left in pixels). | `10px 5px 10px 5px` | | Padding | Space inside the Combobox (top, right, bottom, left in pixels). | `5px 10px` | **Label Styling** | Property | Description | Example | | ----------- | ------------------------------------------------ | --------- | | Color | Text color of the label. | `#333333` | | Font Size | Size of the label text (in pixels or em). | `14px` | | Font Style | Style of the label text (e.g., normal, italic). | `normal` | | Font Weight | Boldness of the label text (e.g., normal, bold). | `bold` | **Border Styling** | Property | Description | Example | | -------- | ------------------------------------------- | --------- | | Color | Color of the border. | `#cccccc` | | Size | Thickness of the border (in pixels). | `1px` | | Style | Border style (e.g., solid, dashed). | `solid` | | Radius | Corner roundness of the border (in pixels). | `4px` | **Options Styling** | Property | Description | Example | | ------------------------- | ------------------------------- | --------- | | Background Color | Background color of options. | `#ffffff` | | Background Color Hover | Background color on hover. | `#f0f0f0` | | Background Color Disabled | Background color when disabled. | `#e0e0e0` | **Options Label Styling** | Property | Description | Example | | -------------- | ------------------------------ | --------- | | Color | Text color of option labels. | `#000000` | | Color Hover | Text color on hover. | `#0066cc` | | Color Disabled | Text color when disabled. | `#808080` | | Font Size | Size of option label text. | `12px` | | Font Style | Style of option label text. | `normal` | | Font Weight | Boldness of option label text. | `normal` | **Options Secondary Text Styling** | Property | Description | Example | | -------------- | ----------------------------- | --------- | | Color | Text color of secondary text. | `#666666` | | Color Hover | Text color on hover. | `#005566` | | Color Disabled | Text color when disabled. | `#a0a0a0` | | Font Size | Size of secondary text. | `10px` | | Font Style | Style of secondary text. | `italic` | | Font Weight | Boldness of secondary text. | `normal` | **Options Avatar Styling** | Property | Description | Example | | ------------------------------ | ------------------------------------ | --------- | | Border Color | Color of the avatar border. | `#dddddd` | | Border Size | Thickness of the avatar border. | `1px` | | Border Style | Style of the avatar border. | `solid` | | Border Radius | Roundness of the avatar border. | `50%` | | Icon Background Color | Background color of the avatar icon. | `#e0e0e0` | | Icon Foreground Color | Foreground color of the avatar icon. | `#000000` | | Icon Background Color Disabled | Background when disabled. | `#c0c0c0` | | Icon Foreground Color Disabled | Foreground when disabled. | `#808080` | | Image Object Fit | How the image fits (e.g., cover). | `cover` | | Initials Color | Color of initials text. | `#ffffff` | | Initials Color Hover | Color on hover. | `#0066cc` | | Initials Font Style | Style of initials text. | `normal` | | Initials Font Weight | Boldness of initials text. | `bold` | **Options Presence Avatar Styling** | Property | Description | Example | | ------------------------ | ------------------------------------ | --------- | | Border Color | Color of the presence avatar border. | `#cccccc` | | Border Radius | Roundness of the presence avatar. | `50%` | | Away Background Color | Background for "Away" status. | `#ffcc00` | | Blocked Background Color | Background for "Blocked" status. | `#ff3333` | | Busy Background Color | Background for "Busy" status. | `#ff9900` | | Focus Background Color | Background for "Focus" status. | `#66cc66` | | Offline Background Color | Background for "Offline" status. | `#999999` | | Online Background Color | Background for "Online" status. | `#00cc00` | **Actions Styling** | Property | Description | Example | | ------------------------- | ------------------------------- | --------- | | Background Color | Background color of actions. | `#ffffff` | | Background Color Hover | Background color on hover. | `#f0f0f0` | | Background Color Disabled | Background color when disabled. | `#e0e0e0` | **Actions Label Styling** | Property | Description | Example | | -------------- | ------------------------------ | --------- | | Color | Text color of action labels. | `#000000` | | Color Hover | Text color on hover. | `#0066cc` | | Color Disabled | Text color when disabled. | `#808080` | | Font Size | Size of action label text. | `12px` | | Font Style | Style of action label text. | `normal` | | Font Weight | Boldness of action label text. | `normal` | **Actions Icon Styling** | Property | Description | Example | | ------------------------- | --------------------------------- | --------- | | Background Color | Background color of action icons. | `#e0e0e0` | | Foreground Color | Foreground color of action icons. | `#000000` | | Background Color Hover | Background color on hover. | `#d0d0d0` | | Foreground Color Hover | Foreground color on hover. | `#0066cc` | | Background Color Disabled | Background when disabled. | `#c0c0c0` | | Foreground Color Disabled | Foreground when disabled. | `#808080` | | Radius | Corner roundness of action icons. | `4px` | **Pill Styling** | Property | Description | Example | | ---------------------- | ------------------------------ | --------- | | Background Color | Background color of pills. | `#e0e0e0` | | Background Color Hover | Background color on hover. | `#d0d0d0` | | Text Color | Text color of pills. | `#000000` | | Text Color Hover | Text color on hover. | `#0066cc` | | Border Color | Color of the pill border. | `#cccccc` | | Border Color Hover | Border color on hover. | `#999999` | | Border Size | Thickness of the pill border. | `1px` | | Border Style | Style of the pill border. | `solid` | | Border Radius | Roundness of the pill corners. | `4px` |
*** ## Tutorials
Creating comboboxes with dependant picklistsimage (8).gifimplement-dependent-picklists-in-comboboxes
Dynamically enable/disable dependant picklistsimage (9).gifhow-to-dynamically-enable-disable-dependent-comboboxes
Combobox: Dependent Picklists & image (19).avifhttps://youtu.be/bzZ7B1nHDYI
*** ## Examples ### **Example 1: Simple Contact Selection for Case** This example allows users to select a single Contact for a Case form in a Salesforce Screen Flow and navigate to a confirmation screen, displaying the selected Contact ID. {% stepper %} {% step %} #### **Create Flow Variables** In the **Toolbox** > **Resources** tab: * Click **New Resource** > **Variable**. * **API Name:** selectedContactId * **Data Type:** Text * **Allow multiple values (collection):** Leave unchecked. * **Default Value:** Leave blank. * **Availability Outside the Flow:** Optional (uncheck unless needed). * Click **Done**. * *Why this?* {!selectedContactId} stores the ID of the selected Contact (e.g., 003xxxxxxxxxxxx) for use in the Flow and display on Screen 2
{% endstep %} {% step %} #### **Create Flow Screens and Elements** * In Flow Builder, add the following elements: * **Screen 1 (Contact Selection):** Add a **Next** button to proceed after selection. * **Screen 2 (Confirmation):** Add a Text component with "Selected Contact ID: {!selectedContactId}" and a **Finish** button. * **Assignment Element (Assign Contact ID):** Add between Screen 1 and Screen 2 to capture the Combobox value. * **Label:** "Assign Selected Contact" * **Variable:** {!selectedContactId} * **Operator:** Equals * **Value:** $Component.ContactPicker.Value (the Combobox’s selected value) or if you want to display a specific value from the selected record, you can use `$Component.SelectedOption.FieldName` * Click **Done**.
* *Why this?* The screens guide users through the selection and confirmation process. The Assignment element ensures the Combobox’s selected Contact ID is stored in {!selectedContactId} for use on Screen 2 and beyond. {% endstep %} {% step %} #### **Configure Combobox on Screen 1** * Add the Avonni Combobox component to **Screen 1**. * In the Properties Panel, configure: * **API Name:** ContactPicker * **Label:** "Select Contact" * **Placeholder:** "Type contact name..." * **Show Search:** On * **Data Source:** query on the Contact object * **Data Mappings:** Label to Name. Secondary text to Email * *Why this?* The Combobox provides a searchable list of Contacts, which the Assignment step transfers to {!selectedContactId}
{% endstep %} {% step %} #### **Set Interactions on Screen 1** * In the Interactions Tab of the Combobox, configure: * **On Change:** * Add a **Show Toast** action: * Message: "Contact selected!" * Toast Type: Info * *Why this?* Provides feedback when a Contact is chosen, though the value isn’t fully assigned to the variable until the Assignment step. * For the "Next" button on **Screen 1**: * Use Flow Builder’s screen button to navigate to the **Assign Selected Contact** Assignment element, then to **Screen 2**. * *Why this?* The "Next" button advances the Flow, triggering the Assignment to capture the selected value before moving to the confirmation screen
{% endstep %} {% step %} #### **Set Interaction on Screen 2** For the "Finish" button on **Screen 2**: * Use Flow Builder’s screen button to end the Flow. * *Why this?* Concludes the process after the user confirms the selected Contact ID on Screen 2 {% endstep %} {% endstepper %} **Result:** Users select a Contact on Screen 1, see a toast, click Next to assign the value to {!selectedContactId} and view the ID on Screen 2, then finish the Flow
### **Example 2:** Outputting Multi-Select Values to a Picklist Field This example explains how to output multiple selections from the Avonni Combobox to a multi-select picklist field in a Salesforce Screen Flow using the component’s built-in output options. * **General Process:** To output multi-select values to a multi-select picklist field (e.g., Interests\_\_c on Contact), enable **Is Multi Select** on the Combobox and bind its **Value** to a Text Collection Variable (e.g., {!selectedInterests}). The Combobox provides built-in output options: valueCollectionSerialized (semicolon-separated string, e.g., Hiking;Reading) and valueCommaSeparated (comma-separated string, e.g., Hiking,Reading). In an **Update Records** element, select one of these outputs (e.g., valueCollectionSerialized) to save directly to the multi-select picklist field. This process works with any standard or custom multi-select picklist field that already exists on an object. * **Why This Is Needed:** Multi-select picklist fields allow storing multiple values (e.g., interests like "Hiking" and "Reading") in a single field, useful for tracking diverse preferences or associations. The Combobox’s outputs simplify this by automatically formatting selections, saving time and effort. * **Prerequisites:** The multi-select picklist field (e.g., Interests\_\_c on Contact) must exist on the target object. If it doesn’t, create it in Setup > Object Manager > \[Object Name] > Fields & Relationships > New > Multi-Select Picklist, using predefined values (e.g., "Hiking", "Reading", "Gaming") as required by Salesforce. * **Basic Setup:** Configure the Combobox with a picklist data source (e.g., Interests\_\_c on Contact), enable **Is Multi Select**, and bind **Value** to a Text Collection Variable. Use an **Update Records** element after a confirmation screen to save the selected output (e.g., valueCollectionSerialized) to the picklist field, triggered by a "Save" button. **Result:** Users select multiple interests (e.g., "Hiking" and "Reading"), and the Combobox’s output is saved to the Interests\_\_c multi-select picklist field, streamlining preference tracking.
*** ## Key Considerations * **Data Source Choice:** Use Query for dynamic records; Picklist for fixed options; map fields accurately. * **Multi-Select Output:** Bind Value to a Text Collection Variable for multi-select; convert to semicolon-separated string for picklist fields if needed. * **Actions Use Case:** Actions (e.g., "Create New") enhance workflows by adding inline options; use sparingly to avoid clutter. * **Performance:** Limit Dropdown Length and Query results for speed. * **Accessibility:** Ensure clear Labels/Placeholders; test keyboard navigation. *** ## **Troubleshooting Common Issues** * **No Options Shown:** Verify Data Source and mappings; check object permissions. * **Search Not Working:** Enable Show Search; ensure searchable fields are Text-based. * **Value Not Captured:** Bind Value to a variable; check interaction setup. * **Multi-Select Fail:** Use Text Collection Variable; test picklist field compatibility. * **UI Overlap:** Adjust Dropdown Alignment/Length; test on mobile. * **Actions Missing:** Add actions in the Actions section; verify Name uniqueness. *** ## Summary The Avonni Combobox component enhances Screen Flows with flexible record selection, supporting single or multi-select with dynamic data sources. It’s perfect for forms and picklists, with output handling for multi-select fields