Dynamic Dependent Drop-downs Introduction When building an app that searches a large database, you will need to utilize parameters to narrow your search. When an app has parameters, it s a good idea to turn those inputs into drop-downs. Webalo provides many ways to create drop-downs for your applications. Dropdowns can be hand-built via data formats, or they can be assembled dynamically. In order to build dependent drop-downs, we will need to utilize the dynamic drop-down feature. These drop-downs pull data from a field in a database dynamically when an application is run. When we create these as dependent drop-downs the child drop-downs will update as we select values for the parent drop-downs. In the following example, we are going to use a table of median home process from across the country and build an app that searches this database with dependent drop-downs. As you can imagine, this table has many thousands of records and an unfiltered search of this database would quickly overwhelm a mobile device. To avoid this, we are going to build a query with three parameters and then provide those parameters via dynamic, dependent drop-downs. This application will consist of four database queries: the base query and the three separate queries that make up the drop-downs. Note that your application may only have two dropdowns with one being dependent. Simply follow the instructions below and stop when we configure the second input. They are as follows (where DD stands for drop-down): Base query: select * from house_price_table where state ='DD1' and CountyName ='DD2' and City ='DD3'; DD1: select distinct State from house_price_table order by State ASC; DD2: select distinct CountyName from home_price_table where State =?; DD3: select distinct City from home_price_table where State =? and CountyName =?
Queries for drop-down 2 and 3 have input parameters that will be supplied by other drop-down queries. This is the basis for the dependency. DD 2 will get State from drop-down 1 and drop-down 3 will get State and CountyName from drop-down 2. This training assumes you understand how to build database query applications and so this exercise will work with apps that have already been configured in Webalo and will focus on building the dependent drop-downs from those pre-built queries. Adding dependent drop-downs 1. Edit the base application to add the first drop-down for the parent input (State). From the TLAIS choose Edit Applications and Data > Databases > Highlight the base application (Median Home Prices US) and press Edit. 2. Configure Database Query on this step we will highlight the input parameter for State and press Customize Input Field:
3. Edit Display Rules for Field On this pop-up we can customize inputs to apps in many ways. For this exercise, we want to assign the State drop-down query to the State input parameter. In the Field Value section of the pop-up, click the second checkbox. This box tells the system to run a task to supply the values for this input. Now you will have to choose the task you wish to use to supply the values. Hit the Select Task button and choose State DD. Then hit Next and Finish. You should now see the State DD task name appear in the Task providing values line. Seen here: Click Finish. 4. We will now deploy this application and see how our first drop-down appears on the mobile device. Click Finish > Close > Deploy Changes. Below you can see the app with the one dropdown for State.
Let s continue and add dependent drop-downs for the other inputs. The process is for adding the last two inputs is basically the same as it was for the first one, however, we will be assigning values to inputs for the last two. 5. Start by editing the base app once again and opening the Configure database query step as we did above. This time highlight the second input and then press the Customize Input Field button. Seen here:
6. Edit Filed Display Rules as with the first parameter (State) we are going to assign a task to provide the value for CountyName. Put a check mark in the box for Field has only certain values. Then press the Select Task button. Now we ll highlight the task names County D-DD and click Next. 7. Configure Inputs To Task Since the query to provide the values for county name requires an input, this step is not complete and we must supply the values for the State input. Steps follow. a. Click on the section Provided by and hit Specify Source of Data.
b. On the Source of task input pop-up, choose State in the section Use a value from the inputs of task being attached to section and click OK. Seen below.
8. Finish and Deploy the changes. 9. Review on the mobile device. Here is the app when first launched with the two input fields being provided by dependent drop-downs: When we choose a state, the countyname drop-down will populate with counties from that state:
Let s now continue and add the third drop-down that will require two inputs from the parent dropdown app. 10. I ll now repeat steps 1-3 above highlighting City this time and select City D-DD as the source task. 11. On the Configure Inputs To Task step you will now see two input parameters that need their sources supplied. Seen here: Start by highlighting State and then pressing the Specify Source of Data button. Choose State from the list of available sources; click OK. Then we ll highlight County and repeat the steps above choosing Countyname as the source of data. Once complete, the task inputs should look as such: 12. Finish and deploy the changes. 13. Review the new app with two dependent drop-downs on the mobile device. Before choosing any values:
After choosing all three values: