# Implement Dependent Picklists in Comboboxes ## Overview This tutorial shows you how to create connected dropdown lists in Salesforce flows, where the options in one dropdown automatically change based on what's selected in another. We'll use the [**Avonni Combobox**](/flow/flow-components/combobox.md) component to build a practical example: selecting a car manufacturer (such as "Toyota" or "Ford") will automatically display only the car models made by that manufacturer. {% hint style="warning" %} ## Note The car maker and car model example below is used for illustration purposes only. You can apply this same technique to any dependent picklist fields in your Salesforce org, such as Country/State, Product Category/Product Type, or any custom dependent picklists you've created. {% endhint %} ### What You'll Learn By the end of this tutorial, you'll know how to: * Add [**Avonni Combobox**](/flow/flow-components/combobox.md) components to your Salesforce flow * Connect two comboboxes so one controls what appears in the other * Use Salesforce's dependent picklist feature to filter options dynamically *** ## Before You Start **⚠ Important prerequisite****:** You must first set up dependent picklists in Salesforce. This means you've already defined the relationship between your controlling field (in our example, car maker) and dependent field (car model) in your Salesforce object setup. If you haven't done this yet, search for "Salesforce dependent picklists" in Salesforce Help to learn how to configure this relationship first. Once your dependent picklists are configured in Salesforce, you're ready to display them in a flow using Avonni Comboboxes. *** ## What You'll Build In this example scenario, you'll create two dropdown lists: 1. **First dropdown (Car Maker)**: Users select a car manufacturer 2. **Second dropdown (Car Model)**: Automatically shows only models from the selected manufacturer This demonstration is designed to help you understand the concept. Replace "Car Maker" and "Car Model" with your actual Salesforce objects and fields.
## Video Tutorial {% embed url="" %} *** ## Step-by-Step Guide {% stepper %} {% step %} #### Create Your Flow 1. In Salesforce Setup, search for "Flows" and click **Flows** 2. Click **New Flow** 3. Select **Screen Flow** and click **Create** 4. Click the **+** icon to add a new screen element 5. Give your screen a name (e.g., "Car Selection") and click **Done** You now have a blank screen where you'll add your comboboxes. {% endstep %} {% step %} #### Add the First Combobox (Controlling Field) This combobox will display the controlling picklist values. In our example, this is the list of car manufacturers, but for your implementation, this would be your controlling field (e.g., Country, Product Category, Department, etc.). * **Add the Component** * From the component palette on the left, find **Avonni Combobox** * Drag it onto your screen * **Configure Basic Settings** * **Label**: Enter "Car Maker" (or your controlling field name, like "Country" or "Product Category") * **API Name**: The system auto-generates this (e.g., "combobox1"). Remember this name - you'll need it later * **Configure Data Source** * In the properties panel on the right, find the **Data Source** section * **Source Type**: Select "Picklist" * **Object**: Select your Salesforce object (e.g., "Car\_\_c", "Account", "Opportunity", or your custom object) * **Field**: Select the controlling picklist field as a picklist field (e.g., "Maker\_\_c", "Country\_\_c", "Product\_Category\_\_c")
* **Optional Settings** (adjust based on your needs) * **Record Type**: Leave blank unless you need to filter by a specific record type * **Sort Order**: Choose "Ascending" to show options A-Z * **Required**: Check this box if users must make a selection * **Show Search**: Enable this if you have many options and want users to search
**What you've accomplished:** You now have a working dropdown that displays all available values from your controlling picklist field {% endstep %} {% step %} #### Add the Second Combobox (Dependent Field) This combobox will show the dependent picklist values. In our example, these are car models, but for your implementation, this would be your dependent field (e.g., State, Product Type, Job Role, etc.) that depends on the selection in the first combobox. * **Add the Component** * Drag another **Avonni Combobox** onto your screen, below the first one * **Configure Basic Settings** * **Label**: Enter "Car Model" (or your dependent field name, like "State" or "Product Type") * **API Name**: The system auto-generates this (e.g., "combobox2") * **Configure Data Source** * **Source Type**: Select "Picklist" * **Object**: Select the same Salesforce object you used in Step 2 (e.g., "Car\_\_c", "Account", "Opportunity") * **Field**: Select the dependent picklist field as the picklist field (e.g., "Model\_\_c", "State\_\_c", "Product\_Type\_\_c")
* **Create the Dependency** (This is the crucial step!) * Look for the **Controlling Value** field in the properties panel * Look for a toggle or button that says **"Mapped"** or shows **{x}** - click it to switch from manual entry to mapped values * You'll see a dropdown appear. Select the API name of your first combobox (e.g., "combobox1") * A second dropdown appears. Select **"value"** from this dropdown **What this does:** You're telling the dependent combobox (Car Model) to look at whatever is selected in the controlling combobox (Car Maker) and filter its options accordingly. This creates the dynamic relationship between the two fields.
* **Optional Settings** * Configure the same optional settings as the first combobox (Required, Show Search, etc.) **What you've accomplished:** The second combobox is now connected to the first. When users select a value in the controlling field, only the appropriate dependent values will appear in the second dropdown. {% endstep %} {% step %} #### Test Your Flow 1. **Save Your Flow** * Click **Save** in the top right * Give your flow a name (e.g., "Car Selection Flow" or something relevant to your use case) * Click **Save** again 2. **Activate Your Flow** * Click **Activate** in the top right 3. **Test It** * Click **Run** to test your flow * Select a value from the first dropdown (e.g., a car maker) * Watch the second dropdown automatically populate with only the appropriate dependent values (e.g., models from that maker) * Try selecting different values in the first dropdown to verify the second dropdown updates correctly {% endstep %} {% endstepper %} *** ## Troubleshooting ### **The dependent dropdown doesn't show any options:** * Verify your dependent picklist relationship is correctly set up in Salesforce Setup * Check that you selected "value" (not "label") in the Controlling Value mapping * Ensure the API names match exactly * Confirm that your dependent picklist field has values assigned to the selected controlling value ### **I can't find the Controlling Value field:** * This field only appears when you select "Picklist" as the data source type * Make sure you've completed the Data Source configuration first * Verify that your picklist field is actually configured as a dependent picklist in Salesforce ### **The second dropdown shows all values, not just the filtered ones:** * Double-check that you've mapped the Controlling Value field to the first combobox's value * Verify you clicked the toggle to switch to "Mapped" mode rather than entering text manually * Ensure your Salesforce dependent picklist relationship is configured correctly ### **The options disappear when I change the first selection:** * This is expected behavior - the dependent field resets when the controlling field changes * You may want to add help text to inform users of this behavior *** ## Real-World Use Cases Beyond our car maker/model example, you can use this technique for many business scenarios: **Geographic Dependencies:** * Country → State/Province → City * Region → Territory → Account **Product Hierarchies:** * Product Line → Product Family → Product Type * Category → Subcategory → Item **Organizational Structures:** * Department → Team → Role * Division → Office → Department **Industry-Specific:** * Industry → Sub-Industry → Specialization * Service Type → Service Category → Specific Service The fundamental principle remains the same regardless of your use case: establish the dependent picklist relationship in Salesforce Setup, then use the **Controlling Value** field to connect your Avonni Comboboxes in your flow. *** ## Key Takeaways * The car maker/model example is just an illustration - apply this to your own dependent picklist fields * Always set up the dependent picklist relationship in Salesforce Setup before building your flow * The **Controlling Value** field is what creates the dynamic connection between comboboxes * Always map to the controlling combobox's **"value"** attribute, not its label * Test thoroughly with different selections to ensure the dependency works as expected *** ## Need More Help? If you have questions or run into issues while implementing dependent picklists with your specific fields, don't [hesitate to reach out](/flow/help/support-and-troubleshooting.md). We're here to help you succeed with Avonni components --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/flow/tutorials/components/combobox/implement-dependent-picklists-in-comboboxes.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.