How to Populate a Dropdown Box Using the Client-side Data Cache in Cordova Applications
Description
Dropdown boxes can be populated with data from the Client-side data cache at run-time.
Discussion
In most situations, the available choices for a dropdown box are defined at design time in Cordova applications. Dropdown box choices, however, can also be defined at run-time in Alpha Anywhere applications. This is usually done by making a callback to a server to calculate the choices shown in the dropdown box. However, in a disconnected application, it may not be possible to make an ajax callback to populate a dropdown box on demand.
Dropdown boxes can be populated with data stored in the Client-side data cache. This enables you to create dynamically populated controls that work in a disconnected environment.
Client-side Data Cache Actions Action Javascript can be used to read data from the Client-side data cache and populate a dropdown box. The Client-side Data Cache Actions include a javascript event, onComplete, that can be used to populate a dropdown box after data is retrieved from the Client-side data cache. For example, the code below populates two dropdown boxes, DD1 and DD2, with data from the customers and products Client-side data cache items:
var _d='';
_d = [['','']; //add an empty item to the array so the dropdown allows a null selection
for (var i = 0; i < obj.products.length; i++) {
_d.push( [obj.products[i].ProductName, obj.products[i].ProductID]);
}
{dialog.object}.populateDropdownBox('DD2',_d,true);
_d = [['','']];
for (var i = 0; i < obj.customers.length; i++) {
_d.push( [obj.customers[i].CompanyName, obj.customers[i].CustomersID]);
}
{dialog.object}.populateDropdownBox('DD1',_d,true);For full step-by-step instructions, watch the video below:
Click here to download the component used in the videos.
See Also