1.8

dynamically added widgets are not restored; this needs to be handled in code. How to do this is
explained in another topic: "Saving and restoring custom data and widgets" on the next page.
Example: adding Camera widgets dynamically
The following code inserts a Camera widget when the user clicks on a link or button with the ID
add-camera. The addCameraWidget() function creates and adds the widget. Each new widget
gets the class camera-dyn. The number of input elements that have this class is used to
construct a unique ID for each new Camera widget.
The HTML structure of the widget was copied from the Source tab after inserting a Camera
widget to a Form in the user interface of the Desiger. The addCameraWidget() function appends
this HTML to a <div> with the ID cameras, which was already present in the form. Subsequently
the widget is initialized so that it is linked to the COTG app and the hardware features of the
device.
$(document).ready(function() {
$('#add-camera').on('click', function() {
var cameraID = "camera_" + getCameraIndex();
addCameraWidget(cameraID);
});
});
function getCameraIndex(){
return $("input.camera-dyn").length;
}
function addCameraWidget(cameraID, value) {
if(typeof value == 'undefined') {
value = '';
}
var html = '<label>Camera' +
'<div id="' + cameraID + '" role="cotg.PhotoWidget">' +
'<div class="panel" role="control-wrapper"
style="position:relative;">' +
'<img role="photo" src="">' +
'<input role="photo-data" class="camera-dyn" name="' + cameraID +
'" type="hidden" value="' + value + '">' +
'</div>' +
'<button class="small" role="take-button" type="button">Take
now</button>' +
'<button class="small" role="pick-button"
type="button">Library</button>' +
'<button class="small" role="clear-button"
Page 448