2021.1

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 Designer. 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"
type="button">Clear</button>' +
'</div></label>';
$('#cameras').append(html); // add the camera object to the DOM
Page 605