Often times it can be useful to filter lists of data based on other data elements. This is commonplace in various accounting and human resources scenarios, but the most understandable example to all users might be a list of vehicle listsmakes and models. In this scenario, two lists are used. The first represents the makes (or brands) of vehicles. The second list should dynamically populate based on the user's selection in the first list. For example, if a user were to select "Aston Martin" from a list of vehicle makers, they might expect to see only Aston Martin vehicles in the Model list. The resulting data grid might look like this:
...
To implement this example, a database will be required containing the vehicle information. A simple table with a Make and Model column columns is all that is required:
Using the table setup described here, additional Routes can be added to the GlobalForms configuration to expose the data to any forms that might need it. Refer here for more information on setup of Routes for GlobalForms. Note that any changes will require a restart of the GlobalForms server service.
...
The first route returns a unique list of vehicles, and is leveraged by the Make list in the form example. The second route returns a list of vehicle models of a particular make and is used by the Model list. When the model list requests the data, it is expected to pass the desired make along in the request to return only the models of interest. Be sure to test the routes directly, outside of a form to ensure they are working as expected. It's much easy to troubleshoot route issues in this way.
| Warning | ||
|---|---|---|
| ||
If your lists contain large data sets with hundreds or thousands of entries, this approach may not be viable. Large dynamic lists may require more complex handling that what is described in this example. |
Form Setup
The form in this example is a very basic. Add a Data Grid Component, and add two Select components to it. All necessary configuration of the Select components is done from the Data tab in the Components Settings.
...