1.7

Tip
Click the Edges button on the toolbar to make borders of elements visible on the Design
tab. The borders will not be visible on the Preview tab.
Using JavaScript
JavaScript files, libraries and frameworks can be added to a template, to add widgets and other
functionality to your Capture OnTheGo Forms; see "Using JavaScript" on page372.
For COTG templates created with a COTG Template wizard, lots of features are already
available through the Foundation framework; see "Using Foundation" on page389.
Note
When you add a COTG element to a template that you didn't start with a COTG template wizard,
the Designer will automatically add the jQuery library and the JavaScript file cotg.js, so that the
element works well. The Foundation JavaScript files and style sheets will not be added. You only
get those automatically when you start creating a COTG template with a template wizard.
Custom save and restore functions
It is possible to save custom information when the COTG app saves the Form, and to influence
what the Form looks like when it is reopened. To do this, register for the olcotgsavestate and
the olcotgrestorestate event, respectively, in the usual way (see the addEventListener
documentation by Mozilla and w3schools, and the below example). The first event gets fired
when all the COTG widgets have saved their state. The second event gets fired when the
COTG widgets have restored their state.
Example
The following JavaScript code saves the value "test: " when the Form is saved. On reopening
the Form, the code gets the restored URL of the COTG Image element, appends it to the saved
"test: " string and puts the result in a <p> element at the top of the form.
window.addEventListener("olcotgsavestate", function(event) {
event.detail.state["mywidget"] = "test: ";
}, false);
window.addEventListener("olcotgrestorestate", function(event) {
Page 378