Implement Dependent Picklists in Comboboxes
Last updated
Last updated
This tutorial guides you through creating interactive comboboxes (drop-down lists) in Salesforce using the Avonni Combobox component. We'll focus on building dependent fields – where the options in one combobox dynamically change based on the selection made in another. To illustrate this, we'll create a "car model" combobox whose options depend on the "car maker" selected.
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 combo box to link it to the value selected in the first combo box. This will dynamically filter the options, giving you the core functionality of controlling combobox visibility with dependent picklists.
Create a new screen flow in Salesforce.
Drag and drop the Avonni Combobox component onto your screen flow canvas.
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").
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.
Add the Combobox: Drag and drop another Avonni Combobox component onto your screen flow.
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").
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.
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!
