Overview
Often times, business use cases require images to be submitted when filling out a form. This article outlines how to add an image control to a form and how to add controls that allow the user to annotate images.
Image Controls
Within Mirata, there are a few different types of Image Controls. Please reference the following screenshot for the different options. The most common Image Control is a simple "Image"
Once adding an image control into the form there are a few properties that are important to configure to enable users to either take photos using their device, or upload existing pictures from their device.
Add an Image control to the form
Name and label the image control
Navigate to the Control properties on the right side of the screen
Turn on the slider for the "CAMERA" property
Turn on the slider for the "FILE PICKER" property
After turning these properties on, the image control should look something like the following.
Navigate to Preview mode to test adding an image using the File Picker or even taking a picture using the device camera (if applicable).
Additional Image Formatting Properties
Without any additional formatting, images that are uploaded to the form may look too large or have poor formatting. See the example below of an image that has been uploaded without any additional control modifications.
This is a picture of a brick...but without any additional modifications, it is hard to tell what the image actually is. Fortunately, there are some additional properties that can be changed to make the image better fitting on the screen,.
Placement: This will ensure that the image is centered within the image control:
Scaling: By choosing the "Scale to fit" option, this will ensure that the full image will be visible no matter the size of the image control:
After applying these property changes, and adding the same image of the brick in Preview mode, the image already begins to look much better:
Using Images from the Image Library
Reference the "Managing Images" article to understand how to add an image to the image library.
To actually use a static image on a form, such as a logo or instructional image, simply add a image from the library to the Image Name property. When using this type of image, it wouldn't necessarily make sense to allow the user to take a photo or upload one from their library, so make sure that those properties are turned off.
Annotation
Sometimes, users may want to edit an image that they uploaded or took while completing a form. To enable annotation there are two options.
Add a "Sketch" control onto the form
Enable the Annotation property on a standard Image control
Once Annotation is enabled, once a picture is captured or uploaded via the image control, there will be a new button underneath the photo that looks like a pencil icon. Navigate to preview and add an image to an image control with annotation enabled to see this.
Once the pencil icon is selected, the image will be opened in a new view with some annotation options:
Free Sketch
Straight Line
Dashed Line
Square Shape
Circle Shape
Single Directional Arrow
Multi-Directional Arrow
Multi-Directional Arrow with Text Box
Text Box
Additionally, a user can change the pen color and pen thickness. An image of using all of these tools are shown below. To save this annotated image back to the form, simply click the Save button at the top right of the screen.
It is important to note that once the image is saved with annotations, the if an addition is needed, the user can go back to the annotation button and add more annotations. If a change or removal is needed, the user must delete the image and re-upload it because when annotations are added and saved, the original image becomes the annotated image and the user will not be able to select or edit previous annotations.
Custom Sketch Icons
Additionally, users have the option to change the sketch icon from the default pencil icon. To add a custom sketch icon, click on the "+ ADD ICON" button underneath the "Annotation Icons" label. From there, users will have the ability to add their own image from the backend, as well as set some advanced properties if necessary.
Watermarking Signatures
Add a signature control to your form
Make sure the signature control is selected in the editing space
Go to the Control Properties in the right panel
Select calculation for the Watermark control
You can use any string calculation here and it will display as a watermark over the signature
For example, if you configure the below calculation to join the current user’s name with the current datetime, then the watermark will display like this
Below the calculation, you can configure the below:
Text Color of the watermark text (by default, it’ll be black)
Horizontal and Vertical alignment of the watermark text
Standard Text formatting properties (size, font, etc.)
Use Preview Mode to test out what your watermark looks like