Choices
Description
Specify the choices that appear in the DropDownBox. Choices can be populated from the Client-side Data Cache.
Discussion
The Choices property lets you define the choices that will appear next to each DropdownBox.
Clicking the 
button next to Choices will open the Define Choices dialog. There are three options for how to define
the choices presented, Static, Dynamic, and Variable.
Defining Static Choices
In this scenario you can manually enter the choices to show for the DropdownBox control.
Click the
smart field button for the Choices property to open the Define Choices dialog for a new or existing DropdownBox control.
The Define Choices dialog will open. Check the "Static" radio control.
Define a list of choices for the control. Separate each choice by placing it on a new line.
Run the component in Live Preview.
If the control appears to be wrapping reopen the Controls page, highlight the DropdownBox control, and adjust the Width or Height settings under the Field Properties section of the Control Properties list.
Dynamic Choices
The Dynamic option can be used to populate the control from a data source using an AlphaDAO connection. This is done as follows:
Click the
smart field button for the Choices property to open the Define Choices dialog for a new or existing DropdownBox control.The Define Choices dialog will open. Select the Dynamic option.
Under the Data Source section of the Define choices dialog click the dropdown next to the "Data source type" property. Select AlphaDAO.
Click the
button next to the AlphaDAO Connection string name. 
Choose "Use a names connection string" and click the Select button. Connect to the Northwind database and click OK and OK again.
Click the
button next to the AlphaDAO SQL SELECT statement.
Click the Select button. Choose the Customers table from the list of tables and click OK.
Select the Countries field as the Field to display. Click OK and OK again.
Run the component in Live Preview.
Variable Choices
An Xbasic variable can also be used to populate the DropdownBox control. The variable can be statically defined or dynamically computed using data from a web server, Node service, or other means. The Xbasic variable is defined in the server-side events for the component. The steps below describe how to create a variable and use it to populate a DropdownBox control:
Open the UX Builder and then open the Events Server-side page.
In the Server-Side Events menu highlight the "onDialogInitialize"" event.
Add the following code to the onDialog Initialize event:
e.rtc.variableDropdownBox = <<%str% one two three %str%
Here we are defining a variable named "variableDropdownBox" and populating the list of choices as one, two, and three.Click the
smart field button for the Choices property to open the Define Choices dialog for a new or existing DropdownBox control.
The Define Choices dialog will open. From the "Choices are:" menu select 'Variable'.
Enter 'variableDropdownBox' as the variable name and click OK.
Now go to Live Preview and run the component. You should see the list you defined appear as DropdownBox choices.
Populating Choices Using JavaScript
To specify that you want to call a Javascript function to populate the Dropdown box, select the Static option in the Choice builder and enter the special syntax:
javascript:name_of_your_javascript_function
Your Javascript function should return an array of choices. If you want the to specify different display and stored values, your function should return an array of arrays in which each array item is an array with the display value and the stored value. For example:
function choices() {
return [['alpha','A'],['beta','B'],['gamma','G']]
}Populating from the Client-side Data Cache
In mobile applications that are deployed as Cordova applications, or in static HTML applications using the Application Cache, the DropdownBox control is populated with data at the time the application is built.
In many cases, it will be necessary to update the choices shown in the DropdownBox control with up-to-date data and to continue to use the most recent data available when the App is launched, even when no connection is available. To do this, you can specify the DropdownBox should be populated with data from the Client-side Data Cache.
In order to indicate that data from the Client-side Data Cache should be used, set the first line of the static choices to the following:
client-side-data-cache:itemName(displayDataColumn,storedValueColumn)
When the App is launched, if a connection is available, the Client-side Data Cache will be refreshed and the DropdownBox will be populated with fresh data. If no connection is available the first time the App is launched the choices you specify in the second and subsequent lines of the defined Static choices will be used.
For example, assume you had a Client-side Data Cache item called Products and that this item had two columns, Description and Code. In order to populate the DropdownBox to use the Description field as the display value and the Code field as the stored value, you would use this directive in the first line of the Static Choices:
client-side-data-cache:Products(Description,Code)
If you want the display value and stored value to be the same, then just specify the name of the display value column for the stored value.
client-side-data-cache:itemName(displayColumn,storedValueColumn)
The image below shows how the choices in a DropdownBox control would be defined to read the data from a Client-side Data Cache item called weekdays.
The choices shown starting on line two are the fallback choices that will be used if there is no connection available the first time the App is launched (which means that the Client-side Data cache cannot be populated).
Videos
Populating Choices in a DropdownBox Control Using JavaScript
Typically, the choices in a Dropdown box control are either static or the result of a database query. However, you might want to dynamically populate the choices in a Dropdown box control using JavaScript.
In this video, we show how this can be done. We also show how you can implement cascading choices in a dropdown that is populated using JavaScript. The advantage of implementing cascading dropdownboxes using JavaScript is that the child dropdown boxes are populated without having to make an Ajax callback. So this technique will work in disconnected applications.