In this document and accompanying video we will show that the List Control is much like any other control on the UX in the sense that when we submit the component the value of the List Control is submitted, and the standard methods of the component, .SetValue() and .GetValue(), can be used to set control values as well.
For this example let's take a simple UX Component and add buttons to it that will submit the UX. Click on the Design tab, then under Defined Controls click Submit-Reset to add the buttons:
Next we click on Server-side under Events and put a debug (1) in the afterDialogValidate event so that we can actually see what got submitted:
Click Save, then click the Working Preview tab. We will type tom smith into the Firstname and Lastname fields, then click on the value for Henry Rhodes, then click the Submit button.
When the XBasic Debugger window opens we will type e.datasubmitted and we can see that a value got submitted for FIRSTNAME and LASTNAME because that is what we typed in those fields. And we see that the value of LIST1 is currently set to Rhodes because that is the row in the list that had focus at the time the component was submitted:
Rhodes is the specified value because we had set the return value to be Lastname. But we can modify this by clicking the Design tab, then List Properties:
We can change the Return value type from a Field to an Expression:
Then click on Return expression to define an expression. For our example we will define a Javascript expression by clicking data.Firstname, typing +, then clicking data.Lastname:
Click OK, then the Working Preview tab. We click on a row and then the Submit button:
Now we can see that the value that was submitted for the list was JohnSmith (first and last name) because that is what we defined the list's return value to be:
In addition, the list is going to respond to the standard .GetValue and .SetValue methods that we use to set the value of controls. For this example we have defined buttons, GetValue and SetValue. If we look at the code for the SetValue button we can see that we are calling the standard method of .SetValue and we are going to set the value of list1 to Smith, and the value of lastname to Jones:
In the .GetValue method we see from the code that we are going to read the value of the lastname control and also of the list. Then we will display those values using an alert:
Let's run this by clicking the Working Preview tab, then the Set Value button. We see that the value Jones was put into the Lastname field, and focus went to the row where the Lastname field equaled Smith because that is the value of the list:
And when we click the GetValue button we read the value Jones, and we read the value Smith from the List Control:
This example demonstrates that even though the List Control looks completely different from a standard text box, we can think of it just like any other data control. It is a way of getting values from a user and displaying values to the user. The List Control behaves internally just like any other data bound control on the UX Component.