Dynamic Select Filtering

Many users utilize the Select component within their form to reference resource data stored within their project. This has several benefits which we have covered in previous documentation. In addition to data reference, users may also need the ability to dynamically filter a Select dropdown based on the selection of another Select dropdown.

For this demonstration, we will be creating a Vehicle Registration system. It will take into account a vehicle’s year, make, and model where the model field is dynamically updated based on the make vehicle value selection.

Vehicle Make Resource

1. Within a project, create your first Resource calledVehicle Make. This will be the initial resource that will trigger the filtering.

2. Drag and drop a Text Field component called Make Resource. Within the component settings, click the API tab and take note of the Property Name makeResource.

Establish the Vehicle Make Database

1. Click the Use tab of the Resource and create a database by submitting two entries: Ford, Chevy.

2. After making the submissions, click on the Data tab and ensure you see the submissions within the data table.

Vehicle Model Resource

1. Next, create a new Resource called Vehicle Model.

2. Add a Select component called Make Reference and a Text Field component called Model Resource.

Make Resource Reference

Next, we are going to configure the Select component to reference the Make Resource data we generated in the previous step.

1. Open the Select Component settings and click the Data tab. Set the Data Source Type to Resource

2. Set the Resource dropdown to Make Resource.

3. Set the Value Property field to Make Resource.

This will ensure the Select component references the Make Resource field data from the Vehicle Make resource.

Establish the Model Database

With our Make reference in place, we can now tie together the Models with their respective Make.

1. Click the Use tab for the Vehicle Model Resource.

2. Click the Make dropdown to select Chevy, and input a Chevy model in the Model Text Field.

3. Make 3 submissions using the Chevy make. e.g.:

Chevy Camaro, Chevy Equinox, Chevy Silverado

1. Make 3 submissions using the Ford make e.g.:

Ford Mustang, Ford Escape, Ford F-150

Create a Vehicle Registration Form

Now that we have our database and references established we need a Form to register our vehicles.

1 Click the Forms tab and create a new Form called Vehicle Registration.

2 Add two Select Components called Make and Model and a Text Field Component called Year.

Make and Model Reference

1. Open the Make component settings and set the Data Source Type to Resource

2. Set the Resource field to Vehicle Make

3. Set the Value Property to Make Resource.

This is the same workflow as the Make Select Component that we set up in the Model Resource.

1. Open the Model component settings. Similarly, set the Data Source Type to Resource

2. Set the Resource field to Vehicle Model

3. Set the Value Property to Model Resource.

If we click Use for the form in this state, both select dropdowns populate with their respective values. However, the Model field isn’t filtering against the Make field, which doesn't help us with the filtering we are trying to achieve.

Adding Filter Query and Setting Refresh Options

To fix this, we need to make some configurations to the Model component.

1. Open the settings for the Model Select Component. Within the Data tab, scroll down to the Filter Query field which will handle the logic to remove certain Model values when a Make is selected. Add the following query below which equates the value of the Model Resource Make Reference component against the value of the forms Make Select Component:

data.makeReference={{data.make}}

1. Within the Data settings tab, scroll down to the Refresh Options On field and select the Make field. This will ensure the Model values update anytime a change is made to the Make field.

2. Finally, check the Clear Value On Refresh Options to ensure any set value on the Model field is cleared when a new Make value is selected.

Testing The Form

With these changes in place, Use the Vehicle Registration form and select a Make value. The values within the Model field should reflect Models associated with that Make. Changing the Make field should clear the selected Model value and refresh the options to the new Make Models.