Dynamic Select Filtering

Below is an example and subsequent guide on how to use and create a dynamic select filtering system where two external resources are called from within a form via the Select Component. If you are just looking to replicate the demo below, you can download a copy of the project schema here.

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.

Resources Portal View

Enter into the newly created Make Resource and add a Text Field Component into the construction area.

Resources Portal View

Under the Data tab in the component modal, add required validation and take note of the field’s API Property Name.

Resources Portal View

With the resource constructed, create a few entries.

Resources Portal View

Transition over to the Model Resource and add a Select Component and a Text Field Component.

Resources Portal View

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.

Resources Portal View

For the Text Field Component set the field validation to required and take note of the API Property Name.

Resources Portal View

With the second resource constructed, create a few resource entries.

Resources Portal View

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.

Resources Portal View

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 API Property Name which is set to make.

Resources Portal View

Similarly, the second Select Component will populate it’s value from the Modal Resource.

Resources Portal View

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.

Resources Portal View

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.

Resources Portal View

With these changes in place the form works as expected.

Resources Portal View