How to Populate a Dropdown Box Using the Client-side Data Cache in PhoneGap 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 PhoneGap 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