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