In this document and accompanying video we will introduce the new List Control which can be added to the UX Component. The List Control, which is used for displaying lists of data, is an extremely powerful and versatile new control that is an essential part of many mobile applications, but is also extremely useful in web applications.
Here we have an example of a simple UX Component, with a Firstname and Lastname control. Click on the Design tab:
To add a new List Control, click List under Data Controls:
The New Control window will open. We will need to give the new list an id, so let's name it list1 then click OK:
Now we can open the list builder by clicking on the smart field for List Properties:
The list itself can be populated from multiple types of data sources, but the simplest is just a static data source so we will use that in this example. Click Static data when the List Builder window opens:
When the Static Choices window opens we can type in any data that we want. The convention is that the first row that we type contains the field names for the columns. For this example we will click Sample data to insert Firstname|Lastname|City|State as our field names followed by three rows of sample data:
If we click Advanced Options we see that we can specify implied field types for the data, but we will not include that in our current example so let's click OK to close the Static Choices window:
Click the Fields tab to move on to the next pane in our List Builder. We see the columns from our data, and we have the ability to set properties:
Click the List Layout tab. For our example we will choose the first four fields to be included in Columns in List:
Click OK, then click the Working Preview tab to see our list:
The list is going to return a value and we can specify which column in the list will be the return field. We start by clicking the Design tab, then List properties:
When the List Builder window opens, click Return Field. We will choose Lastname as our return field:
Under Default value we can type in Berman to make that last name our default value for this control:
Now when we click the Working Preview tab we see that when the list is displayed the row for Berman is selected:
