2020.2

and Windows 6.0) is formatted so that the signature will automatically be scaled to
fit in the containing box in a template. With previous versions of the app the format
of returned signatures could vary.
Adding Camera data to the template
The Camera widget submits a base64-encoded string, which can be put in a data field using
the DataMapper. When this data field is dragged into a template, the string will show up in the
content, instead of the image.
To make the image appear in a template, the data has to be used as the URL of an image.
The below procedure describes how to use Camera data as an image inside a <div> container.
The benefit of this approach is that the image automatically scales to the size of the container.
1.
Click the Insert Inline Box icon on the toolbar. The Insert Inline Box dialog appears.
2. Enter an ID for the box (anything will do, as long as it helps you identify the box) and click
OK. The box is added to the text flow and can be resized if needed.
3.
Switch to the Source tab and replace the content of the box:
<p>
Div content goes here
</p>
by this text:
<img id="camera" src="" width="100%">
4.
Switch back to the Design tab. You will see a small, empty rectangle inside at the top of
the inline box.
5.
Right-click the empty rectangle and choose New Script... in the contextual menu. The
Edit Script dialog appears. The selector of the script is automatically set to the ID of the
selected element (#camera).
Alternatively, you could add a new script on the Scripts pane and make sure that the
Selector field is set to #camera.
6. Enter the following script code:
results.attr("src", record.fields.photo);
The name of the data field (in this case: photo) must be that of the Camera data in your
data model.
This script updates the attribute “src” with the field containing the base64 image.
7.
Click OK to save the script and toggle to the Preview mode to see the result. You should
see your image. When you resize the inline box that surrounds the image, the image
Page 556