Cascading Select Dropdowns
Often times users seek to inject a resource into a form via the Select Component. Additionally, the need to filter values populated from the resource is often a project requirement. An in-depth guide on how to implementing this functionally is below:
For the purposes of this demonstration, we will be creating a Vehicle Registration system. It will take into account a vehicle’s year, model, and make where the model field is dependent of the make of the vehicle. Start by creating or entering an existing project and creating two blank resources called
Make
Resource and Model
Resource.Enter into the newly created
Make
Resource and add a Text Field
Component into the construction area.
Under the
Data
tab in the component modal, add required validation and take note of the field’s Property Name
.
With the resource constructed, create a few entries.

Transition over to the
Model
Resource and add a Select
Component and a Text Field
Component.
In the
Select
Component under the Data
tab, set the Data Source
Type to Resource
, the Resource
dropdown to Make
Resource and Value
to Make
Resource. This name was derived from the text-field label placed on the make resource’s text field component. Lastly set the component validation to required.
For the
Text Field
Component set the field validation to required and take note of the Property Name
.
With the second resource constructed, create a few resource entries.

Transition over and create a new form or feel free to do this within another resource as it is not a requirement to use a form. Add two
Select
Components and a Text Field
Component.
The first
Select
Component will follow the exact same structure as the Make
Select Component used in the Model
Resource with the sole exception of the components Property Name
which is set to make
.
Similarly, the second
Select
Component will populate its value from the Model Resource.
If we take a look at the form in this state, both select dropdowns populate with their respective values. However, the
Model
field isn’t filtering against the Make
field at this point. Ensure ‘Refresh On’ field carries the Make
field so the Model
field will reset when a new Make
field is selected.
Head back to the
Model
Select Component and let us address the Filter Query
which will handle the logic to remove Chevy models when viewing Audi makes. The format of the query equates the value of the Model’s Make Reference against the value of the current forms Make
Select Component.
With these changes in place the form works as expected.

Last modified 9mo ago