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.