Image annotation

Configure the image annotation component for Skedulo Plus flat page mobile extensions.

Description

The imageAnnotationEditor allows users to add annotations to images based on a set of predefined templates.

The following example demonstrates how the image annotation component appears in the example form.

How to annotate image in the mobile app.

Assume that mobile users need to highlight a body part on a body map image. They can choose an image to annotate, highlight the desired area, and submit the annotated image through the form.

If only one image template is available, the selection step is skipped, and annotation begins immediately.

Properties

Property Description
showIfExpression When the showIfExpression property is defined, it adjusts the component visibility based on the boolean value returned by the expression.
title The title of the attachments editor component.
caption The caption of the attachments editor component.
validator Validation logic for the attachments editor component. Refer to this section.
readonly A boolean value that determines if the attachments editor is read-only.
mandatory True or False expression. An asterisk ( * ) is shown on the title of the editor if it is mandatory for the user to fill.
Note that this property only controls whether the asterisk will show on the UI and won’t affect the validation. Use the validator property to add validation.
sourceExpression* The source object of attachments. Refer to this section.
attachmentCategoryName Used to display multiple attachments according to different groups or categories. Refer to this section.
templateImages* List of template image file names. Refer to this section.

Property usage

templateImages

The templateImages property defines a set of predefined images that users can annotate. Template images are stored in the mex_definition/static_resources/images folder. When creating a form, you upload the images along with the mex_definition.

The path to images folder.

You can add up to 5 (five) template images per annotation editor. Each template image should be referenced using only the file name, without the file extension (e.g., bodymap_front instead of bodymap_front.png).

For example:

{
  ...// other properties
  "templateImages": ["bodymap_back", "bodymap_front", "LoadingError", "NoInternet", "NoResults"]
}

Example

The following is an example of how to add an image annotation editor component to your mobile extension:

ui_def.json 

{
  "type": "imageAnnotationEditor",
  "sourceExpression": "pageData",
  "title": "form.ImageAnnotationEditorTitle",
  "templateImages": ["bodymap_back", "bodymap_front", "LoadingError", "NoInternet", "NoResults"]
  "validator": [
    ...
  ]
}