In previous documents and videos we introduced the List Control and populated it with static data, but the List Control can be populated with a variety of data sources. In this document and accompanying video we will demonstrate how to populate the List Control using SQL and DBF queries.
Watch Video - SQL and DBF Data Source
We will begin by placing a List Control on our UX Component by clicking on the Design tab, then clicking list under Data Controls:
When the New Control window opens we will type list1, list2, and list3 and we will populate each list with a different data source:
Let's start with list1, and click on List properties:
We will choose a Static data source:
And click Sample data to fill in the data:
And finally, we will click the List Layout tab in our List Builder window, and choose the first four fields for columns in list1:
For list2 we will choose SQL as our Data Source Type:
Then we will click on Connection string and choose mysql_northwind (northwind data stored in a mySQL database):
We will click on Table name and choose the customer table:
And after clicking Field list we will choose CUSTOMERID, COMPANYNAME, CONTACTNAME, CITY and COUNTRY:
Instead of choosing fields from a table, we could of course switch to the SQL builder and define an arbitrarily complex SQL query:
To do that we click Custom:
Then we click on SQL Statement in order to bring up the SQL Genie window:
In the SQL Genie window we can modify the query as needed:
But for our example we will just choose fields from a table, then continue by clicking on the List Layout tab and choosing the fields that we would like to appear as columns in our list:
For list3 we will choose DBF as our Data Source Type after clicking on List properties:
In the List Builder window we will click on Data source:
When the Define View window opens, we will click the Add Table button which will open the Select Table window. From that we will choose the customer table from Alphasports:
Then we will choose some fields from that table by clicking on the Fields tab, then selecting Customer_Id, Firstname, Lastname, Bill_City and Bill_State_Region:
And again, click the List Layout tab to choose which fields will appear as columns in our list:
We now have a UX Component with three different list controls on it, and each list control has been populated with a different data source. Click Save:
When the Save Dialog Component window opens, we will save it as ListControl_multipledatasources:
When we click on the Working Preview tab we can see List1, List2, and if we scroll down, List3:
One of the things we can point out here is that list is retrieving all of the data so that List1 is showing all three rows of data, List2 is showing all ninety rows from the customer table in northwind, and List3 has retrieved all ninety rows of data from the customer table in alphasports. So the List Control is extremely quick and much more efficient for displaying lists of data than, say, the Grid Component would be. Three Grid Controls that had been placed on a dialog displaying this much data would not display it as efficiently as we have seen in this example.
Let's go back and choose a different style so that the lists look a little better. Start by clicking the Design tab, then Properties, then Style name. When the Select Style window opens, we will choose one of the new mobile styles for Version 12, called PanelTest:
Now when we click on the Working Preview tab we can see the change in style:
