Populating a DropdownBox Control from the Client-side Data Cache

Description

The choices in a DropdownBox control are computed at build time in disconnected applications built using PhoneGap or deployed as web applications that use the Application Cache. Unless explicitly updated, the DropdownBox will show the data computed at built time. If choices for a DropdownBox control are calculated from a data source (such as a SQL database or web service), the client-side data cache can be used. Using the data cache, choices for the DropdownBox will be updated in offline-enabled applications if a connection is available.

Discussion

DropdownBox Box controls can be populated with data that is stored in the Client-side Data Cache.

This is particularly useful in the case of mobile applications that are deployed as PhoneGap applications, or in static HTML applications that use the Application Cache, because in these applications the DropdownBox controls are populated with data at the time the application in built. When the applications are run, the DropdownBox controls will still continue to show the data that they were populated with at build-time.

In many cases it will be desirable to update the choices shown in a DropdownBox with up-to-date data and to continue to use the most up-to-date data available when the App is launched, even if there is no connection available at that time.

To solve this problem, you can populate DropdownBox controls 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 this:

client-side-data-cache:cacheItemName(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).