Screen cast: Creating cascading drop downs with AppGini

Cascading drop-downs link two listings to each other so that selecting a value from the first list, automatically filters the data in the second one.

Video transcript

00:08“Cascading drop-downs” means linking two drop-downs to each other, so that if you choose a certain value from the first list, the second one will automatically be filtered to show only the data related to your choice.

00:21 This tutorial shows how cascading drop-downs work.

00:26 Let’s have a quick tour around our “car dealer” web application. These are our three tables “makes”, “models” and “listings”.

00:34 “Makes” drop-down contains some car makes like Honda, Mercedes, Audi,.. etc.

00:43 The “model” drop-down contains different models for each make.

00:51 The “listings” table shows only the models of each make. For example “Audi” and its models listed in the drop-down list and “Toyota” as well.

01:09 How can we filter the “models” drop-down to match its make, as we've just seen?

01:15 Let’s jump to the “models” table, add a new record and see how to filter the models according to the makes. For “model” we’ll add “Z4” and for “make” we’ll choose “BMW”. After we save, we'll get back to our table and here is the “Z4” model.

01:35 Now, we’ll jump to the “listings” table we'll add a new record as well. When we choose “BMW”, here we find “Z4” listed in the drop down list, while it’s not mentioned under any other “make”. We could add the listings description.

02:21 Let’s go to AppGini to see how to set these cascading drop-downs. We’ll open our project, here we can see our three tables “makes”, “models” and “listings”. Each table contains its “ID” field and the related fields.

02:35 We’ll set the “listings” table fields as “look-up” fields. For the “make” field we’ll choose “makes” as the “parent table” and “make” as the “parent caption field”. Again, for the “model” field we’ll choose “models” as the “parent table” and “model” as the “parent caption field”.

02:53 What we need to do now is to filter the “model” drop-down automatically upon selecting a “make”. Our “models” table does contain all models of all car makes, but when we choose a certain car make it will only show the models related to it.

03:08 To enable this option we’ll add a new field to the “models” table, naming it “make” and setting it as a look-up field, pointing to the “makes” table. This way AppGini identifies that the “model” is linked to the “make”.

03:29 Now if we get back to the “listings” table, you’ll notice that a new “filter by” option has appeared, displaying a checkbox for “make”.

03:39 Once we check it, we'll generate and switch back to our web application. So this way we have our Listings, specifying the make, its model and related description.

04:24 To get to know more about AppGini, please visit our homepage for more video tours.