How to Dynamically Enable/Disable Dependent Comboboxes

Overview

This tutorial shows you how to keep a dropdown menu (combobox) disabled until a user makes a selection in another related combobox. This creates a more intuitive user experience by ensuring users complete fields in the correct order.

Example Scenario: We'll use car selection to illustrate this concept. First, a user chooses a car brand (like Ford or Toyota). The car model dropdown (like Mustang or Camry) remains disabled and grayed out until a brand is selected. Once the user picks a brand, the model dropdown becomes active and clickable.

Note: This car brand/model example is for illustration purposes only. You can apply this same technique to any pair of related fields in your flows, such as Country/State, Department/Team, Product Category/Product Type, or any custom fields where one depends on another.

What You'll Learn

By the end of this tutorial, you'll know how to:

• Create a formula that checks whether a combobox has a value selected

• Use that formula to dynamically enable or disable another combobox

• Provide a logical, step-by-step user experience that prevents errors

Prerequisites

Before starting this tutorial, you should have:

• The Avonni Components for Flows package installed.

• Two Avonni Combobox components already added to your flow screen

• A basic understanding of how to add components to a Salesforce flow

• Familiarity with the relationship between your controlling and dependent fields

If you haven't created your comboboxes yet, refer to the "Create Dynamic Dependent Picklists with Comboboxes" tutorial first.

Step-by-Step Instructions

1

Create a Formula to Check if the Controlling Field Has a Value

This formula will determine whether the first combobox (the controlling field) has been filled out. We'll create a formula that returns "True" if the field is empty and "False" if a value has been selected.

Why we need this: The formula acts as a smart checker that constantly monitors whether the user has made a selection in the first combobox.

• Create the Formula Resource

  • In Flow Builder, click the Manager tab (or look for the toolbox icon in the left panel)

  • Click New Resource

  • Fill in the following details:

    • Resource Type: Select "Formula"

    • API Name: Enter a descriptive name like "IsCarBrandEmpty" (or use your field names, like "IsCountryEmpty" or "IsCategoryEmpty")

    • Description (Optional): Add a note like "Checks if car brand combobox is empty"

    • Data Type: Select "Boolean"

    • Formula: We'll write this in the next step

• Write the Formula Enter the following formula in the formula editor:

   ISBLANK({!carMaker.value})

Important: Replace carMaker with the actual API name of your first combobox. To find this:

• Click on your first combobox component in the flow

• Look at the properties panel for the "API Name" field (e.g., it might be "combobox1", "carMaker", "countrySelector", etc.)

• Understanding the Formula Let's break down what this formula does:

  • {!carMaker.value}: This references the actual value selected in your first combobox. The {! } syntax tells Salesforce this is a dynamic reference to a flow resource. The .value part gets the currently selected value.

  • ISBLANK(): This function checks if something is empty (blank/null).

  • Result:

    • Returns True when the combobox is empty (no selection made yet)

    • Returns False when the combobox has a value (user made a selection)

• Save the Formula

  • Click Done to save your formula resource

What you've accomplished: You now have a smart formula that automatically tracks whether your first combobox has a value. This formula updates in real-time as users interact with your flow.

2

Connect the Formula to Disable the Dependent Combobox

Now we'll use the formula we just created to control whether the second combobox (the dependent field) is enabled or disabled.

• Select the Dependent Combobox

  • In your Flow Builder canvas, click on the second Avonni Combobox (in our example, the "Car Model" combobox)

  • The properties panel will appear on the right side

• Locate the Disabled Property

  • In the properties panel, scroll down to find the "Disabled" attribute

• Map the Formula to the Disabled Property

  • Look for a button with {x} or text that says "Mapped" - click it to switch from a fixed value to a formula reference

  • A dropdown or resource picker will appear

  • Select your formula resource (e.g., "IsCarBrandEmpty")

• Understanding What This Does Here's the logic you've just created:

  • When the formula is True (first combobox is empty):

    • The second combobox's "Disabled" property is set to True

    • The field appears grayed out and users cannot click it

  • When the formula is False (first combobox has a selection):

    • The second combobox's "Disabled" property is set to False

    • The field becomes active and users can make a selection

What you've accomplished: The second combobox now automatically enables when the first combobox has a value, and disables when the first combobox is cleared. This happens dynamically without any additional configuration.

3

Test Your Dynamic Behavior

• Save Your Flow

  • Click Save in the top right corner

  • If you haven't already, give your flow a descriptive name

• Run the Flow

  • Click Run to test your flow in action

• Test the Behavior

  • Initial State: When the flow loads, the second combobox (Car Model) should be grayed out and unclickable

  • Make a Selection: Select a value in the first combobox (Car Brand)

  • Observe: The second combobox should immediately become active and clickable

  • Clear the Selection: Remove your selection from the first combobox (if your combobox allows this)

  • Observe: The second combobox should become disabled again

• Verify Complete Flow

  • Test the entire selection process from start to finish

  • Ensure the disabled state doesn't interfere with your dependent picklist filtering

  • Try different combinations to ensure everything works smoothly

Troubleshooting

The second combobox is always enabled, even when the first is empty

• Verify you selected the correct formula in the Disabled property

• Check that you switched to "Mapped" mode rather than setting a fixed True/False value

• Ensure your formula references the correct combobox API name

The second combobox is always disabled, even after making a selection

• Double-check your formula syntax - it should use ISBLANK(), not NOT(ISBLANK())

• Verify the formula data type is set to "Boolean"

• Make sure you're referencing .value in your formula (e.g., {!carMaker.value})

The formula shows an error

• Confirm the API name of your first combobox matches exactly what's in the formula

• Check that you're using curly braces and exclamation mark: {!comboboxName.value}

• Ensure there are no typos or extra spaces

I can't find the Disabled property

• Make sure you've selected the Avonni Combobox component (not a standard Salesforce component)

• Scroll through the entire properties panel - it may be in a different section

• Verify you're using a compatible version of the Avonni components

Advanced Variations

Once you understand the basic concept, you can create more sophisticated logic:

Enable Only When Multiple Fields Are Complete:

AND(
  NOT(ISBLANK({!field1.value})),
  NOT(ISBLANK({!field2.value})),
  NOT(ISBLANK({!field3.value}))
)

Enable Based on Specific Values:

AND(
  NOT(ISBLANK({!carMaker.value})),
  {!carMaker.value} = "Toyota"
)

Chain Multiple Dependencies:

• Use multiple formulas to create a three-level or four-level dependency chain

• Each formula checks the previous field in the sequence

Key Takeaways

• Use formulas with ISBLANK() to check if a combobox has a value

• The formula should return True when you want the field disabled

• Map the formula to the "Disabled" property of the dependent combobox

• This technique works with any field types, not just the car example shown

• Test thoroughly to ensure the enable/disable behavior works smoothly

• Combine this with dependent picklist filtering for a complete user experience

Combining with Dependent Picklists

For the best user experience, use both techniques together:

1. Dependent Picklist Filtering (from the previous tutorial): Controls which options appear in the second combobox

2. Dynamic Enable/Disable (this tutorial): Controls when the second combobox becomes active

Together, these create an intuitive, error-free data entry process that guides users through related field selections in the correct order.

Need More Help?

If you have questions about implementing dynamic enable/disable behavior with your specific fields, or if you encounter any issues, don't hesitate to reach out. We're here to help you create better user experiences with Avonni components.