2018.1

Table Of Contents
});
});
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);.
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();
Page 503