Dependent Dropdown Implementation in UI Builder

[developer88]

Hi

I have implemented two dropdown fields in UI Builder where the second dropdown is dependent on the first. Based on the value selected in the first dropdown, the related values are dynamically displayed in the second dropdown. If the first dropdown value changes, the dependent dropdown is reset and refreshed accordingly. Any insights or suggestions on how to implement this would be greatly appreciated.

I have created 2 client state parameters for this. 

[Matthew_13 · Accepted solution]

Great follow-up my friend— this is usually the confusing part when you’re new to UI Builder. 🙂

When I say “bind dropdown #2 options to a data resource that takes cs_parent as input”, here’s what that means step-by-step in practical terms:

1. Create or use a Data Resource

• In UI Builder, add a Data Resource (for example: Table, Record, or Scripted REST depending on where your data comes from).

• This data resource should return the list of values you want to show in dropdown #2.

1. Pass the parent value into the Data Resource

• In the data resource configuration, you’ll see Input Parameters.

• Bind one of those inputs to your client state parameter cs_parent.

  • Example:

    • Input parameter = parent_value

    • Value = {{clientState.cs_parent}}

This tells UI Builder: “Every time cs_parent changes, re-run this data resource using the new value.”

1. Filter based on the parent

• Inside the data resource:

  • If it’s a Table resource → add a condition like
    field = parent_value

  • If it’s a Scripted REST → use the input parameter to filter your query

So the returned records are only the ones related to the selected parent value.

1. Bind dropdown #2 to the Data Resource

• Select dropdown #2

• Set Options to the output of the data resource

• Map:

  • Label → display field

  • Value → value field

1. Why this works for me

• User changes dropdown #1

• cs_parent updates

• Data resource automatically re-runs

• Dropdown #2 options refresh

• cs_child was already cleared, so no stale selection remains

That’s it! - no custom scripting required.

If you tell me whether your data source is:

• a table

• a reference field

• or a scripted REST API

I can walk you through the exact clicks and bindings for that case if needed!

@developer88  - Please mark Accepted Solution and Thumbs Up if you find Helpful!!

[Matthew_13 · Accepted solution]

Got you.

For what you saying above, you don’t need a “data source” at all.

Since your Category → Subcategory list is small and you already have the values in JSON, the easiest setup is:

• Category dropdown sets cs_category

• When cs_category changes, you update a 3rd client state called something like cs_subcategoryOptions

• Subcategory dropdown uses cs_subcategoryOptions as its options

What to do

1. Create one more client state

• cs_subcategoryOptions = [] (empty array)

2. When Category changes
Add an onChange handler on the Category dropdown that:

• clears cs_subcategory so it doesn’t keep the old selection

• sets cs_subcategoryOptions based on the selected category

Example logic:

• If Hardware → options = List1, List2, List3

• If Software → options = List4, List5, List6

3. Bind Subcategory dropdown

• Value → cs_subcategory

• Options → cs_subcategoryOptions

• Disabled → when cs_category is empty

That’s it. Now subcategory will always refresh based on category.

If you tell me what UI Builder dropdown component you’re using the standard Select / Choice / Typeahead, I’ll format the exact options JSON it expects ({label, value} vs another shape) so you can paste it in and be done.

@developer88  - Please mark Accepted Solution and Thumbs Up if you find Helpful!!

[Matthew_13 · Accepted solution]

Got you.

For what you saying above, you don’t need a “data source” at all.

Since your Category → Subcategory list is small and you already have the values in JSON, the easiest setup is:

• Category dropdown sets cs_category

• When cs_category changes, you update a 3rd client state called something like cs_subcategoryOptions

• Subcategory dropdown uses cs_subcategoryOptions as its options

What to do

1. Create one more client state

• cs_subcategoryOptions = [] (empty array)

2. When Category changes
Add an onChange handler on the Category dropdown that:

• clears cs_subcategory so it doesn’t keep the old selection

• sets cs_subcategoryOptions based on the selected category

Example logic:

• If Hardware → options = List1, List2, List3

• If Software → options = List4, List5, List6

3. Bind Subcategory dropdown

• Value → cs_subcategory

• Options → cs_subcategoryOptions

• Disabled → when cs_category is empty

That’s it. Now subcategory will always refresh based on category.

If you tell me what UI Builder dropdown component you’re using the standard Select / Choice / Typeahead, I’ll format the exact options JSON it expects ({label, value} vs another shape) so you can paste it in and be done.

@developer88  - Please mark Accepted Solution and Thumbs Up if you find Helpful!!

[developer88]

Hi @Matthew_13 
I am using select component for the 2 fields

[Matthew_13 · Accepted solution]

Perfect— the Select component is exactly what you want here.

For Select, the trick is: subcategory options can’t stay “static.” You put them into a 3rd client state array, and update that array whenever the category changes.

What you need

Client state:

• cs_category (string)

• cs_subcategory (string)

• cs_subcategoryOptions (array) → default []

Category Select setup

• Value → cs_category

• Options (static) should look like:

[
  { "label": "Hardware", "value": "Hardware" },
  { "label": "Software", "value": "Software" }
]

Category Select onChange (the important part)

Add an On change event → Run script and paste:

var subMap = {
  Hardware: [
    { label: "List1", value: "List1" },
    { label: "List2", value: "List2" },
    { label: "List3", value: "List3" }
  ],
  Software: [
    { label: "List4", value: "List4" },
    { label: "List5", value: "List5" },
    { label: "List6", value: "List6" }
  ]
};

// clear old selection
api.setState("cs_subcategory", "");

// load the right options
api.setState("cs_subcategoryOptions", subMap[api.state.cs_category] || []);

Subcategory Select setup

• Value → cs_subcategory

• Options → cs_subcategoryOptions

• Disabled → when cs_category is empty

That’s it. Pick Hardware → you’ll only see List1–List3. Pick Software → you’ll only see List4–List6.

If your Select isn’t accepting the options, it’s almost always because the options aren’t in  "label": "...", "value": "..." } format—check that first.

@developer88  - Please mark Accepted Solution and Thumbs Up if you find Helpful!!

[developer88]

Thankyou so much @Matthew_13  It is working now

.