Tagged image

Tagged image is a component of Resco mobile apps where you can attach tags to a background image (or a holographic scene). There are two ways how tagged images can be used in the app:

• In questionnaires, tagged image is one of the available question types.
• Tagged image is one of the building blocks that can be placed on an entity form.

This article describes how to use tagged images on a form.

Prerequisites

Tagged images on forms require Woodford 15.0 or later to configure and app version 15.0 or later to display. Tagged images on forms are supported with Resco Cloud backend only.

The following entities and fields are involved in this feature:

• An entity with an entity form where the tagged image should be included.
• One or more related entities that correspond to the tags on the image.
• One entity that can contain binary content (the background image). Often, this is Note/annotation.
• One custom entity (default name: Location Tag/fs_locationtag) that contains:

• position of the tags (x, y, z)
• reference to the tag target entity (in the example below, it's "functionallocationid", pointing to the "Functional Location" entity)
• reference to the tagged image (in the example below, it's "annotationid").

Woodford configuration

1. Edit an app project.
2. Edit a form to which you want to add the tagged image.
3. Click Tagged Image to add a new form tab with the tagged image to your form.
4. Configure the settings on the Setup tab:
   
   • Tab Name – Enter the title of the tab (displayed in the app)
   • Image Name – Enter the internal name of the image file saved in the Note entity (or a similar Salesforce object)
   • Image Related To – Select the entity to which the image should be related. Usually, this is the form entity where you are adding the tagged image (FormEntity.@this), but it can be also some parent entity record.
   • Image Entity – Select the entity where the image is saved. Often, this is Note/annotation (or a similar Salesforce object)
   • Show – Select which entities should be available as tags. Usually, these are related entities (configured on the Tag Entities tab, see below), or, you can also select Form Entity Only if want to display only the current record's position on the image.
   • Tag Entity – Select the entity which stores tag positions (default: a custom Location Tag entity)
   • Position X, Position Y – Select the fields where tag coordinates are saved.
   • Image Lookup – Select the field that stores the reference to the background image.
   • Object Lookup – Select the field that stores the reference to the tagged record.
   • Pin Mode – Select what to display in the pins or tags. Use Compact for empty pins (users can tap them for more info) or Details for longer text (can be hard to read with too many tags).
5. If you set Show to Related Entities, the Tag Entities configuration tab appears:
   
   • Click Add Entity and select an entity you want to display on your tagged image as a tag.
   • Relation Field – Select the field that stores the reference to the parent entity.
   • Allow – Select the actions that users can perform (create a record, delete a record, add an unrelated record).
   • Pin Color, Text Color – Select the colors of your pin and text.
   • List of views – Select which views should be available. The view filter determines which records should be available as potential pins.
6. Save all changes and publish the app project.

Usage in the app

In the app, tagged images are displayed as form tabs.

• The top row displays the tab name (Tab Name parameter in Woodford)
• The second row lists the entities and views. The records in these views can be tagged on the image.
• The lock/unlock button switches between the edit mode and view mode

Edit mode

In the edit mode, you can:

Show or hide the legend (list of related records that can placed as tags) Create a new record or place an unrelated record (if you enabled these additional actions). Upload the background image (usually the first action when setting up a new tagged image)

You can also:

• Zoom in or out
• Scroll the background image.
• Reposition existing tags, or add new tags by dragging them from the legend.
• Drag a tag out of the image to delete it (the tag, not the record). If you enabled additional action Delete in the tagged image configuration, you can also drag a record to a trash can in the top right corner to delete it.

View mode

In the view mode, you can:

• Zoom in or out.
• Scroll the background image.
• Show or hide the legend. Tap an item from the legend to highlight it on the tagged image.
• Tap a tag on the image to open the record (tag target).