2022.2

class.Intheeventhandlerfortheolcotgsavestateevent,thejQueryeach()methodisusedtoiter-
ateoverallinputsthathavethisclass,storingtheirnameandvalueinanobject.
Next,thisobjectisstored-inJSONformat-intheevent.detail.statedatawiththekeymy-cam-
era-data.
window.addEventListener('olcotgsavestate', function(event) {
var camObj = {};
$('input.camera-dyn').each(function(){
var camera = $(this).attr('name');
var val = $(this).val();
camObj[camera] = val;
});
event.detail.state['my-camera-data'] = JSON.stringify(camObj);
});
IntheolcotgrestorestateeventhandlerthepreviouslystoredJSONisreadfromtheevent.-
detail.stateandparsedintoaJavaScriptobject.Afor ... inloopisthenusedtoiterateover
thekeys(thecameranames)inthatobject.Insidethisloopthecamerasareaddedbycallingthe
addCamera()functionwiththeIDandvalue(thepathtothepicture)ofeachCameraelement.Sub-
sequentlytherestore-state.cotgeventofthenewwidgetiscalledtomakesurethatthethumb-
nailofthepictureisshownandtheClearbuttonbecomesvisible.
window.addEventListener('olcotgrestorestate', function(event) {
var json = JSON.parse(event.detail.state['my-camera-data']);
for (var cameraID in json) {
var value = json[cameraID];
addCameraWidget(cameraID,value);
$('#' + cameraID).trigger('restore-state.cotg', event.detail.state);
}
});
function addCameraWidget(cameraID, value) {
if(typeof value == 'undefined') {
value = '';
}
var html = '<label>Camera' +
'<div id="' + cameraID + '" role="cotg.PhotoWidget">' +
'<div class="panel" role="control-wrapper" style="position:relative;">' +
'<img role="photo" src="">' +
'<input role="photo-data" class="camera-dyn" name="' + cameraID + '" type="hidden" value="' + value + '">' +
'</div>' +
'<button class="small" role="take-button" type="button">Take now</button>' +
'<button class="small" role="pick-button" type="button">Library</button>' +
'<button class="small" role="clear-button" type="button">Clear</button>' +
'</div></label>';
$('#cameras').append(html); // add the camera object to the DOM
$('#' + cameraID).cotgPhotoWidget(); // init COTG widget

Using submitted COTG data in a template
WhenausersubmitsaCaptureOnTheGoForm,theWorkflowprocessthatreceivesthedatamay
storetheinformationinadatabaseand/orpushitintootherWorkflowprocesses.Itcould,forexample,
sendaletteroranemailreceiptthatispersonalizedwiththesubmitteddata.Thatletteroremailwould
needtobeproducedusingatemplatethatincorporatesthesubmitteddata.
FollowthesestepstodevelopatemplatethatusessubmittedCOTGdata.
Page 554