2020.2

Constructing the HTML
A widget basically is an HTML element with certain attributes and contents. The HTML
structure of a widget can be seen on the Source tab after adding the widget to a Form in the
Designer. In code, reconstruct the HTML. Make sure to give the new element an ID.
This code constructs the HTML of a Date element:
<label>date1
<input id="date1" role="cotg.DatePicker" readonly="" name="date1"
type="text">
</label>
Adding it to the Form
Add the HTML to an element on the Form using the append() function.
The following code appends the contents of the variable html to an element on the Form that
has the ID cameras:
$('#cameras').append(html);.
Initializing the widget
A widget has to be initialized to allow it to be actually used. Widgets that are already present in
a Form at startup are initialized as soon as the Form is loaded in the app. A widget that has
been added to a Form dynamically has to be initialized directly after adding it to the Form;
otherwise the new widget won't respond to actions of the user, even though it is visible in the
app.
Initializing a widget takes just one line of code, in which you select the new widget by its ID and
call the initialization function on it. This code, for example, initializes a new Camera element
that has the ID myCamera:
$(#myCamera).cotgPhotoWidget();
Optionally, while initializing an element, you can make settings for this specific element. These
settings get prevalence over the options already specified in the HTML and over the default
settings specified in the COTG plugin.
The code snippet below initializes a new Camera element (with the ID myCamera) with a
number of settings:
Page 591