Capture OnTheGo API

As of Connect 1.8, cotg-2.0.0.js has replaced the cotg-1.x.js versions of the Capture OnTheGo (COTG) plugin, introducing events and options for COTG widgets. This topic lists all available options and custom events for widgets, as well as their initialization function.

How to use the COTG plugin is explained in the following topic: Using the COTG plugin: cotg-2.0.0.js.
To learn how to create widgets in code, see Dynamically adding COTG widgets and Saving and restoring custom data and widgets.

For a list of all COTG elements and their intended use, see COTG Elements.

Barcode Scanner

cotgBarcode()

Initializing a Barcode Scanner element prepares it for user interaction.
Example: $('myScanner').cotgBarcode();

Events

The Barcode Scanner listens for the following events.

Event	Description
clear.cotg	Removes the scanned Barcode data.
scan.cotg	Opens the scanner.

The Barcode Scanner broadcasts the following events.

Event	Description
set.cotg	This event is fired after Barcode data has been set to the value of the input.

Camera

cotgPhotoWidget([options])

options

Optional. An array containing the desired settings, e.g. {quality: 50, height: 1024, width: 1024}. For any unspecified options the default settings will be used.

Initialize the new Camera element with any settings that you want to be different from the defaults.
Example: $('#myCamera').cotgPhotoWidget({quality: 50, height: 1024});

How to change the default settings is explained in another topic: Changing default settings for widgets.

Option	Description	Type	Default
editimage	Allows the user to edit the image after taking or selecting it. Which editing options the user actually gets and how they are presented depends on the operating system of the device.	Boolean	false
encodingtype	The returned image's file encoding: jpg or png.	String	'jpg'
height	The maximum height in pixels	Number	864
width	The maximum width in pixels.	Number	1152
source	Which buttons are enabled: Take now (take), Library (pick), or both (takeandpick).	String	'takeandpick'
scaleimage	Scales the image to fit the maximum width or height. The aspect ration is maintained.	Boolean	true
quality	Quality of the saved image, expressed as a range of 0-100, where 100 is full resolution with no loss from file compression.	Number	80
allowannotations	Adds an Image & Annotation widget to edit the picture.	Boolean	false
allowdeskew	Allows the user to perform a perspective cropping after taking or selecting a picture.	Boolean	false
addtimestamp	Adds a time stamp	Boolean	false
stampFormat	The date format. For all possible formats see Cordova documentation. 'L' stands for localized date and time.	String	'L'
stampAlign	The position of the stamp, specified by combining horizontal alignment (left, center, right) with vertical alignment (top, middle, bottom) and joining them with a vertical bar ('|').	String	'bottom|left'
stampFontSize	The time stamp's font size: small, medium, or large.	String	'medium'

Events

The Camera listens for the following custom events.

Event	Description
clear.cotg	Removes the picture.
save-state.cotg	Saves the path of the current picture to the local storage of the COTG app.
restore-state.cotg	Restores the state of the widget when the form is reopened in the COTG app, after the app has restored previously entered values of static input fields.

The Camera broadcasts the following events.

Event	Description
clear.cotg	Fired after the user has clicked the Clear button.
set.cotg	Fired after the user has taken or selected a picture.

Date and Formatted Date

cotgDatePicker()

Initializing a Date or Formatted Date element prepares it for user interaction.
Example: $('myDatePicker').cotgDatePicker();

Note that the difference between a Date and a Formatted Date is laid down in the HTML structure of the element.

Events

The Date and Formatted Date elements listen for the following custom events.

Event	Description
clear.cotg	Removes the date.
set.cotg	Sets the given date. The date should be given as a Date object, for example: $("#date").trigger("set.cotg", new Date()); // set current date
show-date-picker.cotg	Opens the Date picker. Optionally, you can provide a date (as a Date object) for the Date picker to be opened with, for example: $('#date1').trigger("show-date-picker.cotg", new Date("2018-01-01"));

Device Info

cotgDeviceInfo()

Initializing a Device Info element puts information about the device (phone or tablet) that displays the form, in the hidden input of the element.
Example: $('#myDeviceInfo').cotgDeviceInfo();

Events

The Device Info element listens for the following event.

Event	Description
clear.cotg	Removes the Device Info data.

The Device Info element broadcasts the following event.

Event	Description
set.cotg	This event is fired during initialization of the element, after setting its info to the current device.

Document ID

cotgDocumentId()

Initializing a new Document ID puts the current Document ID in the hidden input of the element.
Example: $('#myDocID').cotgDocumentId();

Events

The Document ID element listens for the following event.

Event	Description
clear.cotg	Removes the Document ID.

The Document ID element broadcasts the following event.

Event	Description
set.cotg	This event is fired during initialization of the element, after setting its value to the current Document ID.

Fields Table

The Fields Table element itself is just a table, so it doesn't have to be initialized. However, after dynamically adding it to a Form, you still have to add the correct event handlers to the Add and Delete buttons, as follows (replace myTable by the ID of your table):

$("#myTable [role=cotg-add-row-button]").on("click", function(){

	$(this).closest('table').cotgAddRow(true);

});



$("myTable").on("click", "[role=cotg-delete-row-button]", function(){

	$(this).closest('tr').cotgDeleteRow();

});

Geolocation

cotgGeolocation([options])

options

Optional. An array containing the desired settings, e.g. {enableHighAccuracy: true, timeout: 3000}. For any unspecified options the default settings will be used.

Call cotgGeolocation([options]) on the new Geolocation element with any settings that you want to be different from the defaults.
Example: $('#myGeolocation').cotgGeolocation({timeout: 6000});

How to change the default settings is explained in another topic: Changing default settings for widgets.

Option	Description	Type	Default
enableHighAccuracy	By default, the device attempts to retrieve a position using network-based methods. Setting this property to true tells the framework to use more accurate methods, such as satellite positioning.	Boolean	false
maximumAge	Accept a cached position if it isn't older than the specified time in milliseconds.	Number	3000
timeout	The maximum length of time (milliseconds) that is allowed to pass before the position is retrieved.	Number	2700

Events

The Geolocation element listens for the following events.

Event	Description
clear.cotg	Removes the Geolocation data.
restore-state.cotg	Restores the state of the widget when the form is reopened in the COTG app, after the app has restored previously entered values of static input fields.
update.cotg	Sets the element to the current geolocation.

Image & Annotation

cotgNoteOnImage()

Initializing a new Image & Annotation element prepares it for user interaction.
Example: $('#myNoteOnImage').cotgNoteOnImage();

The Image & Annotation element listens for the following events.

Event	Description
bind-to-image.cotg	Bind an annotation to the picture.
clear.cotg	Removes any annotations.
clear-note.cotg	Removes any annotations. When using this element with a Camera element, trigger this event to remove annotations without removing the picture.
restore-state.cotg	Restores the annotations when the form is reopened in the COTG app, after the app has restored previously entered values of static input fields.
save-state.cotg	Saves the annotations.

The Image & Annotation element broadcasts the following events.

Event	Description
set.cotg	Fired after an annotation has been made.

Locale

cotgLocale()

Initializing a new Locale element sets it to the device's locale.
Example: $('#myLocale').cotgLocale();

Events

The Locale element listens for the following event.

Event	Description
clear.cotg	Removes the Locale data.

The Locale element broadcasts the following event.

Event	Description
set.cotg	This event is fired during initialization of the element, after setting its value to the current locale.

Repository ID

cotgRepositoryId()

Initializing a new Repository ID puts the current Repository ID in the hidden input of this element. The Repository ID is based on the currently logged on COTG user.
Example: $('#myRepID').cotgRepositoryId();

Events

The Repository ID element listens for the following custom events.

Event	Description
clear.cotg	Removes the Repositiory ID data.

The Repository ID element broadcasts the following event.

Event	Description
set.cotg	This event is fired during initialization of the element, after setting its value to the current Repository ID.

Signature

cotgSignature()

Initializing a new Signature element prepares it for user interaction.
Example: $('#mySignature').cotgSignature();

Events

The Signature element listens for the following custom events.

Field	Description
clear.cotg	Removes the signature drawing and data.
draw.cotg	Draws the signature on the form (e.g. after a set.cotg or restore-state.cotg event).
restore-state.cotg	Called when the form is reopened in the COTG app, after the app has restored previously entered values of static input fields.
save-state.cotg	Saves the signature data to the local storage of the COTG app.
set.cotg	Sets the given signature. The signature should be given as an SVG string, for example: $(“#signature”).trigger(“set.cotg”, “<svg>…</svg>”);

The Signature element broadcasts the following events.

Field	Description
set.cotg	This event is fired after a user has entered a signature and clicked the Done button of the Signature window on the device.
clear.cotg	Fired after a user has clicked the Done button of the Signature window without entering a signature.
draw.cotg	Fired each time the signature is drawn on the form (by the app, not by the user; e.g. after a set.cotg or restore-state.cotg event).

Time and Formatted Time

cotgTimePicker()

Initializing a new (Formatted) Time element prepares it for user interaction.
Example: $('#myTimePicker').cotgTimePicker();

Note that the difference between a Time and a Formatted Time is laid down in the HTML structure of the element.

Events

The Time and Formatted Time elements listen for the following custom events.

Event	Description
set.cotg	Stores the given time (specified in a Date object).
clear.cotg	Removes the set time.
show-time-picker.cotg	Opens the Time Picker. If no time is provided (specified in a Date object), the current time will be shown.

User Account

cotgUserAccount()

Initializing a new User Account element puts the account of the current user in the hidden input of this element.
Example: $('#myUser').cotgUserAccount();

Events

The User Account element listens for the following custom event.

Event	Description
clear.cotg	Removes the User Account data.

The User Account element broadcasts the following event.

Event	Description
set.cotg	This event is fired during initialization of the element, after setting its value to the current user account.