In this document and accompanying video we will continue our discussion on cascading lists in the UX Component.
We will now add a third list to our example that will show all of the companies associated with the selected city from the second list:
To start click on the Design tab, then select list_Cities. Then under Data Controls click on List:
The New Control window will open. We will call our new list list_company, then click OK:
Our new list, list_company, has been created. Now we want to make sure that list_Cities is going to populate an argument. So click on list_Cities, then List properties:
When the List Builder window opens, click on the smart field for Arguments:
We want to create an new argument, so when the Define Arguments window opens click on Insert New Argument. This will bring up the New Argument window where we can name our new argument whatcity, whose value will be set at run-time, then click OK:
Click on whatcity to set the value of that argument to whatever value is returned by list_Cities:
We will also click on Return field and select City from the Select Return Field window to set the return value:
Now that we have an argument called whatcity that will be correctly populated, let's focus on list_company. Click on list_company, then List properties:
Again we will choose a SQL query, then click on Connection string. We will select the postgres_northwind database from the list:
Now click Table name, then select Customers to define our query against the customer table:
Click on Field list, then select CompanyName from the Available Fields list:
Now let's switch over to SQL so that we can put in a distinct clause by clicking SQL Statement, then the Properties tab, then Distinct? :
We also want to put in a filter clause by clicking on the Filter tab, then the up arrow, then we will select Country:
We want Operator to say is equal to, then we will choose the Value/Expression by clicking the up arrow. When the Specify a Value or Expression window opens, click Insert Argument and choose whatcountry then click OK:
We would like to add another filter, so click the + button:
The new filter is displayed. Click the up arrow under Column/Expression:
When the Select Column or Expression window opens, choose City from the list of columns, then click OK:
Again, we would like Operator to say is equal to, then we will click on the up arrow under Value/Expression:
Again we will click on Insert Argument, but this time we will select whatcity then click OK:
We have now defined the filter for our third list, and the filter is based on values from both of its parents. The topmost parent is the Country list, and its immediate parent is the City list. Click OK to close the SQL Genie window:
In the List Builder window click on the List Layout tab, then click on CompanyName in the Available Fields list, then click the right arrow to add that field to Columns in List:
Now click on the List Properties tab, then turn OFF Show column titles, and make the Width 2in. Also, we will turn OFF Allow null selection which means that when the list is rendered the first row in the list will be automatically selected. Click OK:
We also need to click on the Data Source tab to turn ON Has parent list, and specify list_Cities for Parent list id:
Let's also turn off the label by clicking list_company, then Label position, then None:
Click Save, then the Working Preview tab. Here are our three lists, but let's move the third list up so that all three lists are displayed on the same line:
To do that click on the Design tab, then click on list_Cities and turn OFF Toggle Break:
Click Save and the Working Preview tab. Now all three lists are displayed on the same line, and we have three levels of cascade so that when we click on a country the list of cities for that country are displayed, and when we click on a city the list of companies in that city are displayed. We have three levels of cascade in this example but there is no limit to the number of cascades we can create:
