2020.2

the Designer). Dynamically added widgets don't get restored. To restore dynamically added
widgets, you have to:
l
Save information that reveals which widgets were added dynamically, and save the
values of their input fields.
This code should go in the event handler for the olcotgsavestate event.
l
Add and initialize the widgets again after the Form is reopened. Make sure to put any
saved values back in the HTML.
This code should go in the event handler for the olcotgrestorestate event.
l
Trigger the restore-state.cotg event on the newly added widget, to make sure that
it is displayed correctly. For example:
$('#myCamera").trigger('restore-state.cotg',
event.detail.state);
Put this code in the event handler for the olcotgrestorestate. event.
Note that the widget must have the same ID as before in order to be able to retrieve its
state.
For a detailed example, see: "Saving and restoring Camera widgets" below.
Example
Saving and restoring Camera widgets
This example demonstrates a way to save and restore dynamically added Camera widgets.
How to add Camera widgets is explained in another topic: "Dynamically adding COTG
widgets" on page589.
When a user takes or selects a picture with a Camera widget, the COTG app stores the path to
the image that was taken or selected in a hidden input. This is the path to the image on the
device that runs the COTG app. On submitting the Form the COTG app replaces this value - the
path - with the actual image data.
In this example the hidden fields of dynamically added Camera elements have got the .camera-
dyn class. In the event handler for the olcotgsavestate event, the jQuery each() method is
used to iterate 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-
camera-data.
window.addEventListener('olcotgsavestate', function(event) {
var camObj = {};
$('input.camera-dyn').each(function(){
var camera = $(this).attr('name');
Page 596