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.

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").

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

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.

• How It Works by Data Source:

  • Manual: Enter values manually for each option (e.g., Label: "Option 1", Secondary Text: "Details").

  • Variable: Map fields from your Collection Variable (e.g., Label to Subject, Secondary Text to Description).

  • Picklist: Map the Picklist field value to Label (e.g., StageName), with Secondary Text or Avatar optional.

  • 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

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

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 for Screen Flows.

Available Interactions

Configure these in the Interactions Tab of the Properties Panel.

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.

Tutorials

Creating comboboxes with dependant picklists

Dynamically enable/disable dependant picklists

Combobox: Dependent Picklists &

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.

1

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

2

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.

3

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}

4

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

5

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

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