Page Comparison

...

{
	"method": "get",
    "endpoint": "/makes",
    "query": "SELECT distinct make FROM [Vehicles];"
},
{
    "method": "get",
    "endpoint": "/makes/:make",
    "query": "SELECT model FROM [Vehicles] where make = '{{ params.make }}';"
}

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.

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. 

Make Component

1. Make sure the Data Source Type is set to URL.
2. Specify the location of the Make route.  The path should be found at http://<customerserver>:<customerport>/makes if the example above was followed.
3. Data Path should contain the value "rows".  "rows" represents where in the route's return data, the data of interest can be found.
   
   Image Added
   
   
4. Value Property represents the key of the values of interest.  In this example, only one key exists, but still needs to be provided.
5. The default Item Template value should be adjusted to reference item.make.  This ensures the data users will see is cleared of any JSON formatting.

Image Added