Configure Form Tiles

TransactField AppThis topic is related to TransactField App. | Deprecated in 21.11 This feature was deprecated in 21.11.

TransactField App allows you to configure form tiles and data extracts from forms. Form tiles custom information is useful for faster navigation, filtering and sorting of saved tasks, forms and history items, especially when there are many items. This is mostly accomplished from Journey Manager. You can configure TransactField App to achieve the following.

Extract a Customer Email from Form Data to Display it in a Task List

To show a custom field on a TransactField App tile from a form:

Configure the form XML data extracts in Journey Manager:

Log on to Journey Manager
Select Form > Data Config > Form Data Extract Mapping
Name the field Email and enter the XPathXPath (XML Path Language) is a query language for selecting nodes from an XML document. In addition, XPath may be used to compute values (e.g., strings, numbers, or Boolean values) from the content of an XML document. XPath was defined by the World Wide Web Consortium (W3C). to the field in form data XML

Configuing the field for TransactField App

TransactField App needs to know what is available and how it should be displayed in the form tiles

A tiles.json file needs to be created. This shows the minimal configuration to display the extracted email field for the appropriate form. The field will be displayed with "My Email" label.

[
	{
		"formCode" : "avoka-showcase-form5",
		"views" : [{
			"type" : "saved",
			"fields" : [{
				"label" : "My Email",
				"value" : "formDataMap.email"
			}]
		}]
	}
]

In the example above the field is named "Email" in Manager and is accessed in tiles.json file as formDataMap.email. Note that Extract Field Names are transformed to camel case notation so a field called "Delivery Email" would be accessed as formDataMap.deliveryEmail
the last step is to upload tiles.json file to Manager in T-Field portal

Synchronize the Device with Manager

This will download data extract rules and the tiles.json to device.

open the form and enter e-mail address into mapped field
save and close the form
The email address from the form will be displayed in the tile as below

Extract a Date Field and Format it

Date fields need special handling as they are encoded in XML in a fixed format. To display them in more user friendly format follow these steps:

Extract date field from Manager
Name it Date by following this instruction: Form > Data Config > Form Data Extract Mapping
Update the tiles.json to display the new field on the tile, for example a Visit Date label, as shown below

[
	{
		"formCode" : "avoka-showcase-form5",
		"views" : [{
			"type" : "saved",
			"fields" : [{
				"label" : "My Email",
				"value" : "formDataMap.email"
			}, {
			"label" : "Visit Date",
			"value" : "formDataMap.date",
			"dateFormat" : "EEE, d MMM yyyy"
			}]
		}]
	}
]

The dateFormat field specifies date format string, which is similar to Java's SimpleDateFormat.

Customize a Title of a Tile

TransactField App shows a form name in the title by default . You can change it with an expression in tiles.json file by adding the following line "title" : "Customer {{formDataMap.email}} visited on {{formDataMap.date|date:'EEE, d MMM yyyy HH:mm:ss '}}".

[
	{
		"formCode" : "avoka-showcase-form5",
		"views" : [{
			"type" : "saved",
			"title" : "Customer {{formDataMap.email}} visited on {{formDataMap.date|date:'EEE, d MMM yyyy HH:mm:ss '}}",
			"fields" : [{
				"label" : "My Email",
				"value" : "formDataMap.email"
				}, {
				"label" : "Visit Date",
				"value" : "formDataMap.date",
				"dateFormat" : "EEE, d MMM yyyy"
			}]
		}]
	}
]

Hide Default Fields

Default fields such as "Status", "Organization", "Last Modified" or all task related fields can be hidden.
This can be achieved by specifying hiddenFields in the tiles.json, as shown below.

Configure the History Screen Tiles Differently to the Task List and Saved Form Tiles

Separate templates can be created for saved forms, tasks, and history items.
These require a separate view in the tiles.json, as shown below.

Reference

Default fields such as "Status", "Organization", "Last Modified" or all task related fields can be hidden.
This can be achieved by specifying hiddenFields in the tiles.json.

Supported Views

In the tiles.json file for each form, multiple view types can be specified. If a view without type exists, it will be used as default for all views. Any subsequent views will override the default.
- saved
- task
- history

Template Values

TransactField App allows access to information not only from submission xml but also from submission and form metadata:

formDataMap
form
submission

Special date value handling

dates are by default stored as yyyy-MM-dd in submission xml
to allow for more friendly formats in form tiles, users can specify dateFormat for fields and also for titles (see tiles.json example)
date format uses angular date filter for formatting which is very close to Java SimpleDateFormat format but doesn't support few options (era, long time zone name):

Detailed Example of the tiles.json file

[
	{
		"formCode" : "transact-showcase-fm",
		"views" : [{
			"title" : "Saved title: Customer {{formDataMap.deliveryEmail}} visited {{formDataMap.myDate|date:'EEE, d MMM yyyy HH:mm:ss Z'}}",
			"type" : "saved",
			"fields" : [{
			"label" : "Delivery Email",
			"value" : "formDataMap.deliveryEmail"
		}, {
			"label" : "Form Name",
			"value" : "submission.formName"
		}, {
			"label" : "Visit Date",
			"value" : "formDataMap.myDate",
			"dateFormat" : "EEE, d MMM yyyy HH:mm:ss Z"
		}, {
			"label" : "Address",
			"value" : "formDataMap.address"
		}],
		"hiddenFields" : ["Last Modified", "Status", "Attachments", "Submitted"]}, {
			"title" : "Task title Customer visited {{formDataMap.myDate|date:'dd MM yyyy'}}",
			"type" : "history",
			"fields" : [{
			"label" : "Delivery Email",
			"value" : "formDataMap.deliveryEmail"
			}, {
			"label" : "Form Name",
			"value" : "submission.formName"
			}, {
			"label" : "Visit Date",
			"value" : "formDataMap.myDate",
			"dateFormat" : "dd.MM.yyyy"
			}, {
			"label" : "Form Version",
			"value" : "form.currentVersionNumber"
			}
			],
			"hiddenFields" : ["Last Modified", "Status", "Attachments", "Submitted"]
		}]
	}
]

You can hide the following fields:

[
	/**drafts*/
	"Last Modified",
	"Organization",
	"Status",
	/**tasks*/
	"Scheduled",
	"Complete By",
	"Assigned To",
	"Created",
	"Address",
	"Latitude/Longitude",
	"Message",
	/**history*/
	"Processing Status",
	"Status Updated",
	"Reference number",
	"Attachments",
	"Total Payment",
	"Submitted",
	"Completed"
]

Next, learn how to use TransactField App.

Topics