2021.1

Table Of Contents
Adding an event handler
First of all you need to write an event handler that responds to the event that is meant to trigger
the creation of the widget (e.g. the onClick event of a button or link), by calling the function that
creates the widget. The event handler has to be added on the $(document).ready() function,
which is fired when the Form is loaded in the browser/app.
$(document).ready(function() {
$('#add-element').on('click', function() {
//call the function that creates the widget
});
});
Creating the widget
Now you can start writing the code that constructs, adds and initializes the widget. This code
has to be based on jQuery.
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);.
Page 603