Creating Interactive Comboboxes with Dependent Picklists

Overview

This tutorial will show you how to create interactive comboboxes (drop-down lists) in Salesforce using the Avonni Combobox. We'll focus on a "dependent field" scenario, where the options in one combobox (the "car model" list) change based on what's selected in another combobox (the "car maker" list).

We assume you've already established the relationship between car makers and car models using Salesforce's dependent picklist feature. This means you've defined which car models are associated with each car maker within Salesforce.

Feel free to adapt the steps to your specific objects and fields, but remember: the key concept is using the "Controlling Value" field in the second combobox to link it to the value selected in the first combobox. This will dynamically filter the options, giving you the core functionality of controlling combobox visibility with dependent picklists.

By the end of this tutorial, you'll be able to build a user interface where:

  • The user first selects a car maker from a combobox.

  • The available options in the car model combobox automatically update to show only the models of the chosen car maker.

This creates a more streamlined and user-friendly experience for selecting car information

Step-by-Step Guide

Step 1: Set Up the Car Maker Combobox

Create a Screen Flow

Create a new screen flow in Salesforce.

Add the Combobox

Drag and drop the Avonni Combobox component onto your screen flow canvas.

Configure Data Source

  • Choose "Picklist" as the data source type.

  • Select the object containing your car makers' picklist values (e.g., "Car__c").

  • Choose the picklist field that stores the car maker names (e.g., "Maker__c").

Optional Settings

  • Record Type: If applicable, specify a record type to filter the picklist values.

  • Sort Order: Choose how the values should be ordered in the dropdown list (ascending or descending).

  • Label: Enter a label to display above the combobox (e.g., "Car Maker").

  • Is Multi Select: Enable this if you want users to be able to select multiple car makers.

  • Show Search: Enable this to allow users to search within the list of car makers.

  • Required: Check this box if the user must select a car maker before proceeding.

With these steps, you've created the first combobox to display your car makers. The next step will be to set up the dependent combobox for car models.

Step 2: Set Up the Car Model Combobox

  1. Add the Combobox: Drag and drop another Avonni Combobox component onto your screen flow.

  2. Configure Data Source:

    • Choose "Picklist" as the data source type.

    • Select the object containing your car models' picklist values (e.g., "Car_Model__c").

    • Choose the picklist field that stores the car model names (e.g., "Model_Name__c").

  3. Link to the Car Maker:

    • A "Controlling Value" field will appear. This is where you establish the dependency.

    • Switch to the "Mapped" view within this field.

    • From the list, select the API name of the first combobox (the one displaying car makers).

    • Then, choose the "Value" attribute from the second dropdown.

This step instructs the car model combobox to filter its options based on the car maker selected in the first combobox. When a user chooses a car maker, the car model combobox will automatically update to show only the relevant models.

Step 3: Test Your interactive comboboxes!

  • Save your work: Make sure to save all your changes within the Flow Builder.

Dive Deeper

Need more help? Don't hesitate to ask if you have any questions or run into issues. We're here to support you!

Last updated