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]

Indeed my Friend — you’re on the right track with the two client state params.

Here’s the simplest, “works for me every time” way to do it in UI Builder:

1. Dropdown #1 (parent)

• Bind its Value to cs_parent

• Add an on change event handler:

  • Set cs_child = "" clear the dependent selection

  • Refresh / re-run whatever is feeding dropdown #2 data resource

2. Dropdown #2 (child)

• Bind its Value to cs_child

• Bind its Options to a data resource that takes cs_parent as an input

  • So when cs_parent changes, the data resource re-runs and the option list updates automatically

• Disable dropdown #2 when cs_parent is empty (prevents empty clicking)

That’s basically the whole pattern: parent drives the query, query drives child options, parent change clears child selection.

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

[developer88]

Thankyou @Matthew_13 

I am new to UI Builder. Could you please explain step 2 in more detail? That would be very helpful for me.

[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!!

[developer88]

Hi @Matthew_13 
Thankyou so much for the reply.

I am little confused which data sourse i need to create. can you please help.

My requirement.

I have created 2 dropdown fields(category, subcategory) for this i have created 2 client state parameters added below values in json. and binded the value in the list item of both the fields. Both the choice options are visible.
Now based on category subcategory value should populate. Can you please guide me here how to do

category	Subcategory
Hardware	List1
	List2
	List3
Software	List4
	List5
	List6