1.8

l The HTML structure and attributes of the widget, so that you can recreate it in code. The
HTML structure of a widget can be seen on the Source tab after inserting the same kind of
widget into a Form in the Designer.
Also, if you don't have a JavaScript file for your code yet, add one to the resources of your
template (see "Adding JavaScript files to the resources" on page404) and make sure to include
that file in the Web context or in the Web section that contains the COTG Form (see "Including
a JavaScript file in a Web context" on page405).
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.
Page 446