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.

Use cases

There are two main use cases for tagged images.

• A single tag is displayed on the image. It indicates the location of the record on a map, photo, or plan.
• Multiple tags on one image usually correspond to records related to the original record. For example, show how different pieces of machinery are assorted on a factory floor.

You can select the behavior using Woodford, in the parameter Show.

Prerequisites

With a Resco Cloud backend, tagged images on forms require Woodford 15.0 or later to configure and app version 15.0 or later to display.

With Dataverse-based backends, the minimum supported version is 16.1.

The following tables and fields are involved in this feature:

• A table with a form where the tagged image should be included.
• One or more related tables that correspond to the tags on the image.
• One table that can contain binary content (the background image). Often, this is Note/annotation.
• One custom table (suggested name: Location Tag) that contains:

• position of the tags (x, y) (decimal numbers)
• reference to the tag target entity
• reference to the tagged image

Creating the Location Tag table in Dataverse

If you are using Dataverse / Dynamics environment, you can create the table using the Power Apps maker.

1. Go to make.powerapps.com and select the environment where you want to create the table.
2. Select Tables on the left navigation pane.
3. Click New table > Add columns and data.
   
4. Add the following columns, then click Create.

Display name	Data type
Position X	Decimal
Position Y	Decimal
Tag target	Lookup (records of the related table correspond to tags placed on the image)
Image name	Single line of text
Image link	Lookup (record to which the annotation record is related)

The combination of image link and image name is used to identify the image to which the tags apply.

Creating the Location Tag entity in Resco Cloud

If you're using Resco Cloud, use the Admin Console to create the location tag entity.

Target records of the "Tag" lookup correspond to tags placed on the image. Target record of the "Annotation" lookup identifies the image to which the tags apply.

Enabling the new table in Woodford

Once you have created the new Location Tag table in your backend, you need to enable it also in the mobile app project in Woodford.

1. Edit an app project in Woodford.
2. Find the new table and select it.
3. Click Enable to make the table available in the mobile app.
4. Enable (check) also all the necessary fields, then click Save.

Setting up tagged images

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, usually saved as Note/annotation.
   • 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.
   • 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 select Form Entity Only to display only the current record's position on the image.
   • Tag Entity – Select the custom location tag entity which stores tag positions
   • Position X, Position Y – Select the fields where tag coordinates are saved.
   • Image association – Select how tags are associated with images.
     • On Dataverse-based systems, use the combination of image name and target id. As Regarding Image Lookup, select the lookup field pointing to the record related to the background image. As Image Name Field, select the image name.
     • On Resco Cloud, you can use Image Lookup option and 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).

Example: office map

In the following example, we want that the Account form includes the map of their office. Contacts related to an account can be placed on the map as tags.

1. If you haven't used tagged images yet, create the Location Tag entity on your backend server. Add the X and Y coordinates (numbers), Tag (lookup to the Contact entity), and some reference to the background image (either lookup to the Note or image name + lookup to the Account; see Prerequisites.
2. Edit an app project in Woodford.
3. Scroll down to the (newly created) Location Tag entity and make it available in the app. Enable also all the necessary fields.
4. Edit the form of the Account entity.
5. Drag Tagged Image from the Tabs pane to your form.
6. Edit the properties of the tagged image. Make sure to set Show to "Related Entities".
7. On the Tag Entities tab, add the Contact entity.
8. Save all changes and publish the app project.

Was this information helpful? How can we improve?