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 Modal 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

Copy link