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
Enter into the newly created
MakeResource and add a
Text FieldComponent into the construction area.
Datatab in the component modal, add required validation and take note of the field’s
With the resource constructed, create a few entries.
Transition over to the
ModelResource and add a
SelectComponent and a
SelectComponent under the
Datatab, set the
Data SourceType to
MakeResource. 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.
Text FieldComponent set the field validation to required and take note of the
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
SelectComponents and a
SelectComponent will follow the exact same structure as the
MakeSelect Component used in the
ModelResource with the sole exception of the components
Property Namewhich is set to
Similarly, the second
SelectComponent 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
Modelfield isn’t filtering against the
Makefield at this point. Ensure ‘Refresh On’ field carries the
Makefield so the
Modelfield will reset when a new
Makefield is selected.
Head back to the
ModelSelect Component and let us address the
Filter Querywhich 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
With these changes in place the form works as expected.