Overview

Input field that specific for address input. The component will open up the map and pull the address from the pin location.

There is also additional feature to search the address from search bar or drop pin directly to the map.

The information then will be display in the address input field. User still able to edit by tapping on the field or icon.

Best Practice

Overview

Barcode/QR Scanner Component allows a Mobile User to scan a barcode or a QR code from a Mobile page.

For example, a Technician could use it to scan the barcode of a Spare Part he is using.

Best Practice

How to Configure

Sample JSON

{
"index":1,
"id":"id of the Component",
"type":"barcode",
"startColumn":0,
"endColumn":11,
"title":"title of the Component",
"value":"@pageContext.ComponentID",
"placeHolder":"placeholder text for the Component",
}

Overview

Buttons are clickable components that enable a user to perform different actions such as submit a request or navigate from one page to the other. They may appear in different layouts. The button states what the User can achieve by clicking on it. Their color, icons, and text can be customized from the Mobile Builder.

Filled Button

Filled buttons have the highest visibility and do a good job of grabbing User attention. Use primary for the main action on the page.

Variations

Best Practice

Button with Icon, Arrow, and Text

Button with icon, arrow, and text are used to direct the user from one page to the other

Button

How to Configure

Sample JSON

{
 "id": "jbuttonPrimary",
 "type": "button",
 "buttonType": "primary",
 "title": "A Long Time Ago",
 "enabled": "1",
 "startColumn": 0,
 "endColumn": 11,
 "index": 36
}

Button Icon Arrow

Sample JSON

{
 "id": "jButtonArrow",
 "leftImage": "https://cdn.zeplin.io/assets/05D98EBC-FBCC-4983-8AE9-F9C5F9401950.png",
 "rightImage": "",
 "type": "buttoniconarrow",
 "title": "A Long Time Ago",
 "enabled": "1",
 "startColumn": 0,
 "endColumn": 11,
 "index": 38
}

Comments

action : Each action may have some Mandatory/optional parameters with them.

Overview

List of items or things to be done by add a signature as compulsory requirement.

Best Practice

CHECKLIST - SIGNATURE

CHECKLIST - SIGNATURE

Overview

ContentBox is used to group items in a particular section within a Mobile page. For example, text and a photo can be placed within ContentBox. The Collapsible Content Box allows users to collapse all items within the ContentBox in order to be able to display more items on the same page.

Features

Best Practice

How to Configure

Overview

Data Grid allows data to be displayed in a table. For Example, when a Spare Part needs to be added to a task, the Technician can do so by selecting the type of part and entering the quantity required. This will then be added to a Table as seen in the image.

How to Configure

Sample JSON

{
 "allowDelete": 1,
 "endColumn": 11,
 "heading": "Select Spare Parts",
 "columns": [
   {
     "col": 1,
     "name": "Part Name",
     "row": 1,
     "key": "selectItemPart[0].name"
   },
   {
     "col": 2,
     "name": "Quantity",
     "row": 1,
     "key": "quantity"
   }
 ],
 "editable": 1,
 "index": 2,
 "type": "datagrid",
 "title": "Spare Parts",
 "editRowPageId": "1677839485449375",
 "startColumn": 0,
 "addRowPageId": "1677839485449375",
 "id": "selectDataGrid1",
 "value": "@pageContext.selectDataGrid1"
}

Comments

*editable : if true then only the User can add/update list item

*addRowPageId : Page id used to render page for add item

editRowPageId : Page id used to render page for add item, if not provided then addRowPageId will be used

allowDelete : if true then User can delete item/row

disableAdd : if true then User can not add new record

Important to note - Page Id used for addRowPageId & addRowPageId will be treated as sub page for the Component. We can add any supported Component inside subpage definition.

While creating Sub page, we need to keep the following in mind:

Datagrid Component can be nested in it’s child page, but we need to take care of the cyclic dependency between the two child pages i.e. use a new child page for every level of nesting.

Overview

Date & Time Component enables the mobile user to select the Date and Time in specific formats within a mobile page.

Date Input Field

This component is used if only the date needs to be captured. Clicking on this component will display a calendar which will allow the User to choose a date.

Display format: DD-MM-YYYY

How to Configure

Sample JSON

{
 "startColumn": 0,
 "endColumn": 11,
 "index": 1,
 "id": "iDatetComponent",
 "type": "inputDate",
 "title": "Select Meeting Date",
 "placeHolder": "Select Meeting Date",
 "value": "@pageContext.inputMeetingDate",
 "min": "2018-01-23 12:12:12",
 "max": "2018-01-25 12:12:12"
}

Time Input Field

Use it if you want to capture time only. It will bring time pop up and display the time format to am/pm

This component is used if only the time needs to be captured. Clicking on this component will display a clock which will allow the User to choose a time and specify AM / PM.

How to Configure

Sample JSON

{
 "startColumn": 0,
 "endColumn": 11,
 "index": 1,
 "id": "iDatetComponent",
 "type": "inputTime",
 "title": "Select Meeting Time",
 "placeHolder": "Select Meeting Time",
 "value": "@pageContext.inputMeetingTime",
 "min": "2018-01-23 12:12:12",
 "max": "2018-01-25 12:12:12"
}

Date & Time Input Field

Use it if you want to capture the date and time. It will bring a calendar and clock pop up. It would display both date and time in the input field.

How to Configure

Sample JSON

{
 "startColumn": 0,
 "endColumn": 11,
 "index": 1,
 "id": "iDatetComponent",
 "type": "inputDateTime",
 "title": "Select Meeting Date And Time",
 "placeHolder": "Select Meeting Date And Time",
 "value": "@pageContext.inputMeetingDateTime",
 "min": "2018-01-23 12:12:12",
 "max": "2018-01-25 12:12:12"
}

Comments

*value key : will always return a date object in "YYYY-MM-DD HH:MM:SS" format

Min key : format for this will be "YYYY-MM-DD HH:MM:SS"

Max key : format for this will be "YYYY-MM-DD HH:MM:SS"

All date and time need to be in UTC Time zone.

Overview

The Divider component acts as a partition between different sections of a mobile page.

How to Configure

Sample JSON

{
"index":1,
"id":"id of the Component",
"type":"divider",
"startColumn":0,
"endColumn":11,
"backgroundColor":"#ff6b35",
}

The Document Component.

	Note
	to follow up: New component added based on the spreadsheet Need to follow up on JSON

Iteration 1: Current Implementation

This component allows the users to download and view a file within Zinier Application.

File types supported are pdf, obj, stl, dae.

Iteration 2:

Enhancement to this component will let the user to download other file formats to be downloaded or shared through other applications.

When the user taps on the Download icon of the component, the file will start downloading.

Note: Files can be downloaded only on the component page with active internet connection, it cannot be Downloaded/ Opened when the user is Offline.

Design: zpl://project?pid=5ea919024c42b7267ad1e56e

How to Configure

Sample JSON

12th May 2020 Engineering Meeting Notes

Rajnikant Hole Madan Gupta Dhananjay Mohnot

1. For download we follow current default behavior - we dont check maxSize

2. For upload we check the maxSize - if file size exceeds maxSize then we show alert "The file size exceeds maximum allowed size. We can't upload"

3. For PDF, 3D, photo etc - the existing components, we change the UI as per new Zeplin. This includes for new file upload and download

4. maxSize - for ioS we check this org config and if photo exceeds this maxSize, then we cancel the download.

5. for android we check the maxSize for document component (@dhan confirm)

6. We will have seperate component - download and download+upload. UI can seperate. But lets have a common module

7. Mobile will additionally send file size in upload component

8. Web can optionally send the file size for upload component

9. For download there is already Size parameter

10. If size is not available for upload from web, then we can show "size unknow"

11. Discuss the keys to finalize - @madan mention those here

Overview

Dropdown Component allows mobile users to select a value from the list of options on a mobile page.

Best Practice:

How to Configure

Sample JSON

{
 "id": "iCountry",
 "type": "dropdown",
 "title": "Select Country",
 "placeHolder": "Select Country of residence",
 "value": "@pageContext.country",
 "options": "@pageContext.infoTitle",
 "optTitleKey": "title",
 "optTitleValue": "value",
 "startColumn": 0,
 "endColumn": 11,
 "index": 1,
 "searchable": "true"
}

Overview

Input Text Component allows the User to enter text within a Mobile Page.

We have 3 types of Text Input Fields:

How to Configure

Sample JSON

{
 "endColumn": 11,
 "startColumn": 0,
 "index": 7,
 "id": "engComments",
 "capturedTime": "@pageContext.engCommentsTime",
 "locationCoordinates": "@pageContext.engCommentsLocation",
 "type": "input",
 "title": "Engineer comments",
 "value": "@pageContext.engComments",
 "placeHolder": "Enter your text here",
 "required": 1
}

Overview

The Jumbotron Component is a combination of Icon and Text which acts as a Header to enable the User to better understand the context of the Page.

This Component includes:

All of these elements are configurable from the Mobile App Builder.

Best Practice

How to Configure

Sample JSON

 {
            "image": "https://s3-us-west-2.amazonaws.com/zinier.png",
            "id": "jqaImage1",
            "type": "jumbo",
            "alignment": "center",
            "title": "Text",
            "subTitle": "1 - Column",
            "startColumn": 0,
            "endColumn": 11,
            "index": 6
          }

The KMZ Viewer enables the User to view an entire segment with multiple points within it. In this way, there can be multiple points associated with a single Task. This feature is especially useful in cases like Patrolling or segment Maintenance Tasks when a Technician is expected to walk along a particular segment and check the status at multiple defined points along the way.

Features

Component Definition

[
{
"status": "Started",
"description": "Started",
"statusColor": "#2C3E50",
"startPage": "16DB98E87FCEF84A",
"startProcessId": "16DB98E87FCEF84A",
"lng": 77.084916406232,
"title": "AB-4456 Public",
"lat": 12.42112212822116,
"url": "@pageContext.startedURL"
},
{
"status": "In Progress",
"description": "Started",
"statusColor": "#2C3E50",
"startPage": "16DB98E87FCEF84A",
"startProcessId": "16DB98E87FCEF84A",
"lng": 77.0842193868167,
"title": "AB-5456 Public",
"lat": 12.42112212801626,
"url": "@pageContext.inprogressURL"
},
{
"status": "@pageContext.status",
"description": "Started",
"statusColor": "@pageContext.statusColor",
"startPage": "16DB98E87FCEF84A",
"startProcessId": "16DB98E87FCEF84A",
"lng": 77.0844121128284,
"title": "AB-3091 Public AWS",
"lat": 12.42177253003091,
"url": "@pageContext.completedURL"
}
]

Overview

Map & GPS Component shows the different locations in Map View and captures Geotags.

For example, if the Technician wants to know the exact location of the Customer Site, he can select the relevant address and view the exact location on the map.

Features

How to Configure

Sample JSON

{
 "endColumn": 11,
 "lng": "77.69",
 "startColumn": 0,
 "index": 2,
 "id": "gCustomerLocation",
 "radius": 50,
 "type": "map",
 "value": "",
 "lat": "12.93"
}

{
 "endColumn": 11,
 "lng": "77.69",
 "index": 3,
 "type": "geocheckin",
 "title": "Start Check-In",
 "required": 1,
 "startColumn": 0,
 "id": "gCustomerLocation",
 "capturedTime": "@pageContext.checkinLatLongTime",
 "locationCoordinates": "@pageContext.checkinLatLongLocation",
 "radius": 50,
 "value": "@pageContext.checkinLatLng",
 "lat": "12.93"
}
{
 "col": "c1",
 "startColumn": 0,
 "endColumn": 11,
 "enabled": "0",
 "index": -30333030304,
 "id": "mapaddress3",
 "type": "mapaddress",
 "heading": "id: mapaddress3",
 "title": "Enter address of office home",
 "value": "@pageContext.mapaddress3",
 "required": 1
}

Comments

lat : latitude of the target location to be displayed on the device

long : longitude of the target location to be displayed on the device

*value : map of location details will be saved in values with keys in Accepted Values column

All these components support Media content to be viewed or uploaded by the User on the Zinier App.

Image Component

Overview

The Image Component displays an image that has been uploaded on to the platform.

For example, when a Technician wants to view the current state of the Asset at the Customer Site, the Image Component enables the image uploaded by the Web User to be displayed on the Technician’s device.

Features

1. The height of the image is customizable.

2. The width of the image is responsive to device's size.

3. The margins on the left and right are 16px.

4. The margins on the top and bottom are 24px/

Best Practice

1. Always try to avoid full-height image size if possible to save space in a small screen device. (A user can still see the full view by tapping on the image.)

2. Always use a label if possible to give context of the image and to avoid confusion for the user

3. Avoid blurry and low-light images.

4. Add multiple images in one page if needed.

Technical Requirement

1. Format: JPEG or PNG

2. Max file size: 10MB

3. Color format: RGB

How to Configure

Type	Key	Value Type	Accepted Values
image	*aspectRatio	double
	*url	String	String URL of the image. Supported image file formats: JPEG/JPG.
	imageActionUrl	String
	id
	index

Sample JSON

{
            "url": "https://s3-us-west-2.amazonaws.com/zinier.png",
            "id": "jqaImage1",
            "type": "image",
            "aspectRatio": "1.0",
            "startColumn": 0,
            "endColumn": 11,
            "index": 4
          }

Photo Input

Overview

Photo input is a component used to take a photo or upload images to the app. The component will trigger native camera functionality and send back the image to the app.

Features

• Take picture

• Preview picture

• Annotate

• Zoom in and out

Best Practice

1. Use photo input if you want to capture a single image.

2. Photo input is good to capture user attention.

3. Don't add multiple photo input in one page. Instead use Checklist - Photo to save more space

Type	Key	Value Type	Accepted Values	Default Value
photocheck	title	String		Photo
	*value	String
	galleryAllowed	Boolean		false
	watermarkContent	JSON
	heading	String
	allowCrop	Boolean		false
	allowAnnotation	Boolean		false

Type	Key	Value Type	Accepted Values	Default Value
photo	title	String		Photo
	*value	String
	galleryAllowed	Boolean		false
	watermarkContent	JSON
	height	Double		150
	heading	String
	allowCrop	Boolean		false
	allowAnnotation	Boolean		false

Sample JSON

{
"index":1,
"id":"id of the Component",
"type":"photo",
"startColumn":0,
"endColumn":11,
"height":150,
"allowAnnotation":true,
"allowCrop":true,
"galleryAllowed":true,
"watermarkContent":{"topLeft": [
                 [
                        {
                        "label": "Task",
                        "delimeter": " : ",
                        "value": "@pageContext.ComponentID",
                        "maxlen": 20
                        }
                ]
                ]

"title":"title of the Component",
"value":"@pageContext.ComponentID",
"heading":"heading of the Component,
}

Photo Annotation

Overview

Image Annotation is additional component to add text, shapes, arrow, lines and more to the picture. The purpose of this component is to help user to visually communicate with project manager when sending image to the task.

Specs

1. Text

2. Brush

3. Shape

4. Arrow

5. Color Dropplet

Text

Tap "T" icon in the toolbar to bring up the keyboard and start typing. You can also change the color by tap the color dropplet to bring up the pallete.

Brush

Use brush to draw shape or lines in the image. Tap "Brush" icon to activate this feature.

Shape

Tap on the "Rectangle" icon to bring up the shape toolbar. Select one of the shape and it will appear in the image. Change the color of the shape by selecting the object and change the color from the color droplet.

Line or Arrows

Tap "Arrow" icon to bring up the arrow toolbar. Select one of the lines or arrows and it will automatically add it on the image. You can change the color by selecting the arrow and choosing the color from color droplet.

Video Input

Overview

Video Input Component allows a Technician to capture a video using the device camera or upload a video from the device gallery. The file format of the video is .mp4. It also allows the user to preview, edit and delete a video.

How to Configure

Type	Key	Value Type	Accepted Values	Default Value	Comments
videoInput or videoInputCheck	title	String		Take a video	This is displayed inside the box.
	*value	String	Video URL
	*thumbnailURL	String	Thumbnail URL of image. Supported image file formats: JPEG / JPG
	galleryAllowed	Boolean		false
	fileFormat	String	mp4	mp4	No other file formats are supported as of now.
	videoQuality	String	low, medium, high	low	Android: low- 480p, medium- 720p, high- 1080p
	maxVideoDuration	Integer		60	Value is specified in seconds. If value provided is below 1 then we consider default value only.
	heading	String			This is displayed above the Component.
	allowCrop	Boolean		false	Android: feature not available in Android app as of now.

Sample JSON Video Input

{
  "id": "videoInputComponent1",
  "startColumn": 0,
  "endColumn": 11,
  "index": 1,
  "galleryAllowed": false,
  "heading": "Video Input",
  "type": "videoInput",
  "value": "@pageContext.videoInput1",
  "maxVideoDuration": 10,
  "fileFormat": "mp4",
  "title": "Take a Video",
  "allowCrop": false,
  "videoQuality": "high",
  "thumbnailURL": "@pageContext.thumbnailUrl1",
  "required": true,
  "enabled": true
}

Video Input Check

{
  "id": "videoInputCheckComponent1",
  "startColumn": 0,
  "endColumn": 11,
  "index": 2,
  "galleryAllowed": true,
  "heading": "Video Input Check",
  "type": "videoInputCheck",
  "value": "@pageContext.videoInputCheck1",
  "maxVideoDuration": 0,
  "fileFormat": "mp4",
  "title": "Take a Video",
  "allowCrop": true,
  "videoQuality": "medium",
  "thumbnailURL": "@pageContext.thumbnailUrl2",
  "required": false,
  "enabled": true
}

Checklist - Photo

Overview

List of items or things to be done by add a picture as compulsory requirement.

Best Practice

1. Use this component if you want to user to take pictures as compulsory requirement.

2. Use simple instruction and try avoid to have two lines text in the item.

CHECKLIST - pHOTO

CHECKLIST - pHOTO

Media Upload with Comments

This component is especially useful when the User wants to attach comments to the Photos or Videos uploaded by them.

Please note that this component is different from the Photo / Video Input and Photo Check Components.

Component Definitions Photo Commment

Key	Value Type	Default Value	Comments
value	JSON	Value will be the json of photo url and user comment. comment is a mendetory field if component is required true. eg: "value": { "media": photoURL", "comment": "user comments" }
galleryAllowed	Boolean	false
watermarkContent	JSON	Please refer JSON file for watermark content defination
heading	String	this is dispayed above the component
allowAnnotation	Boolean	false	If true then user can annotate image

Video Comment

Key	Value Type	Accepted Values	Default Value	Comments
value	JSON	Value will be the json of video url and user comment. comment is a mendetory field if component is required true. eg: "value": { "media": "videoURL", "comment": "user comments" }
thumbnailURL	String	Thumbnail URL of image. Supported image file formats: JPEG/JPG.
fileFormat	String	mp4	mp4	No other file formats are supported as of now.
videoQuality	String	low, medium, high	low
maxVideoDuration	Integer	60	Value is specified in seconds. If value provided is below 1 then we consider default value only.
heading	String	This is displayed above the component.

Document

Overview

Document Component allows Mobile users to download and read different document types in the following formats:

• .PDF

• .OBJ

• .STL

• .DAE

For example, a Technician can download and read additional manuals required for an ongoing task.

The Document Component is capable of previewing 3D models (3D Viewer) as well. For the time being, the platform supports the following file types to view 3D models:

• .OBJ

• .STL

• .DAE

How to Configure

Type	Key	Value Type	Default Values
document	heading	String
	*title	String
	*size	Integer
	*url	String
	*docType	String	pdf, obj, stl, dae

Sample JSON

{
 "id": "tDocumentComment",
 "type": "document",
 "heading": "title",
 "title": "pdf Component",
 "url": "https://s3.amazonaws.com/zinier3/sagemaker/FastWebView.pdf",
 "size": 9420,
 "startColumn": 0,
 "endColumn": 11,
 "index": 1,
}

Comments

Heading key : the optional heading title for Component

*title key : title of the document Component; e.g. Task Details.pdf

*size key : size of the media file in KB, for display

*url key : URL of the PDF Document for the Component

*docType key : document type

The Photo Component.

	Note
	to follow up: New component added based on the spreadsheet Need to follow up on JSON samples

Photo Checkbox

How to Configure

Component	Key	Value Type	Accepted Values	Default Value	Comments
photocheck	*title	String		Take a Photo	This is displayed inside the box.
	*value	String	String URL of image. Supported image file formats: JPEG/JPG.		This is the URL that will saved in the database after successful upload to S3. Mostly, goes in the output map. outputVarMap is defining all values that are provided in Page_def. InputVarMap is picking up the values of all fields and saving in the model.
	galleryAllowed	Boolean		false	Type of the document
	watermarkContent	JSON	pdf, obj, stl, dae		JSON for watermark content definition Expand source { "topLeft": [ [ { "label": "Task", "delimeter": " : ", "value": "@pageContext.mopName", "maxlen": 20 } ] ], "topRight": [ [ { "label": "Date", "delimeter": " : ", "type": "dateTime", "value": "@pageContext.capturedTime" } ] ], "bottomLeft": [ [ { "label": "User", "delimeter": " : ", "value": "@pageContext.userName", "maxlen": 20 } ], [ { "label": "Site", "delimeter": " : ", "value": "@pageContext.siteId" } ] ], "bottomRight": [ [ { "label": "City", "delimeter": " : ", "value": "@pageContext.cityName", "maxlen": 20 }, { "label": "", "delimeter": " , ", "value": "" }, { "label": "Area", "delimeter": " : ", "value": "@pageContext.areaName" } ], [ { "label": "Location", "delimeter": " : ", "type": "geolocation", "value": "@pageContext.locationCoordinates", "format": "%.4f , %.4f" } ] ] }
	heading	String
	allowCrop	Boolean		false	If true, the user will prompt to crop the image. Note: Not implemented in Android; implementation in progress for iOS
	allowAnnotation	Boolean		false	If true, the user can annotate an image Note: Not implemented in Android; implementation in progress for iOS

Sample JSON

Photo Input

Component	Type	Key	Value Type	Accepted Values	Default Value	Comments
photo input	photo	title	string		Photo	This is displayed inside the box
		*value	string	String URL of image. Supported image file formats: JPEG/JPG.		This is the URL that will saved in the database after successful upload to S3. Mostly, goes in the output map.
		galleryAllowed	Boolean		false
		watermarkContent	JSON			JSON for watermark content definition Expand source { "topLeft": [ [ { "label": "Task", "delimeter": " : ", "value": "@pageContext.mopName", "maxlen": 20 } ] ], "topRight": [ [ { "label": "Date", "delimeter": " : ", "type": "dateTime", "value": "@pageContext.capturedTime" } ] ], "bottomLeft": [ [ { "label": "User", "delimeter": " : ", "value": "@pageContext.userName", "maxlen": 20 } ], [ { "label": "Site", "delimeter": " : ", "value": "@pageContext.siteId" } ] ], "bottomRight": [ [ { "label": "City", "delimeter": " : ", "value": "@pageContext.cityName", "maxlen": 20 }, { "label": "", "delimeter": " , ", "value": "" }, { "label": "Area", "delimeter": " : ", "value": "@pageContext.areaName" } ], [ { "label": "Location", "delimeter": " : ", "type": "geolocation", "value": "@pageContext.locationCoordinates", "format": "%.4f , %.4f" } ] ] }
		height	double		150	This parameter will set the height of component.
		heading	string			This is displayed above the component.
		allowAnnotation	Boolean		false	If true, the user can annotate an image Note: Not implemented in Android; implementation in progress for iOS

Sample JSON

Photo Comment

Sample JSON

Delete Alert Info for these components

"deleteAlertInfo": {
"title" : "Title",
"description" : "description",
"alertButtons": {
"primaryButton": "Delete",
"secondaryButton": "Cancel"
}
}

Overview

The Questions Component allows a Mobile user to select single or multiple values from a list on a Mobile page.

Radio Buttons enable the User to choose a single option from a list of options. Check Box, on the other hand, enables the User to select multiple options.

Radio Buttons

The Single Select Radio Buttons allow the User to select only a single option from a list of options. It is good to use it when there are only a few options available for the User to choose from.

Best Practice

How to Configure

Sample JSON

{
 "id": "rSalutationRadio",
 "type": "radio",
 "title": "A Long Time Ago in a Far Far Galaxy Far Far Away Galaxy F",
 "value": "@pageContext.rSalutationRadio",
 "enabled": "1",
 "optTitleKey": "title",
 "optValueKey": "value",
 "startColumn": 0,
 "endColumn": 11,
 "index": 69,
 "options": [
   {
     "title": "Option 1",
     "value": "v1"
   },
   {
     "title": "Option 2",
     "value": "v2"
   },
   {
     "title": "Option 3",
     "value": "v3"
   }
 ]
}

CheckBox

Multiple Choice (Checkbox) is a way of presenting a list of options where the User can choose more than one option. This component can also be used to activate or deactivate a certain function.

Best Practice

How to Configure

Sample JSON

{
 "id": "customer_checkbox",
 "type": "checkbox",
 "title": "A Long Time Ago",
 "value": "@pageContext.customer_checkbox",
 "enabled": "0",
 "startColumn": 0,
 "endColumn": 11,
 "index": 71
}

Overview

This Component enables the User to select multiple items from a given list.

For example, if a Technician wants to Order multiple Spare Parts to complete a Task, he can do so by going to the list of Spare Parts and clicking on the radio button beside each Part that he requires.

How to Configure

Sample JSON

{
 "endColumn": 11,
 "heading": "Select Spare Parts",
 "columns": [
   {
     "col": 1,
     "name": "Name",
     "row": 1,
     "key": "name"
   },
   {
     "col": 2,
     "name": "Description",
     "row": 1,
     "key": "description"
   },
   {
     "col": 1,
     "name": "Unit Price",
     "row": 2,
     "key": "unitPrice"
   },
   {
     "col": 2,
     "name": "Catalog Type",
     "row": 2,
     "key": "catalogType"
   }
 ],
 "index": 2,
 "type": "selectitem",
 "title": "Spare Parts",
 "searchFilterString": "searchFilter",
 "required": 0,
 "displayValue": "@subContext.selectItemPart[0].name",
 "favQuery": "167834FC726CD66A",
 "selectionType": "single",
 "startColumn": 0,
 "searchQuery": "167834F38628AB54",
 "id": "selectItemPart",
 "value": "@subContext.selectItemPart"
}

Comments

*searchFilterString : column against which user's input will be sent for filter

*searchQuery : queryId for search

*favQuery : queryId for favourite search items

*displayValue : mapped to key from value json array to display selected jsonObjects property

*selectionType : single will allow single select only and multiple will allow the selection of multiple options

Overview

Single item table component has multiple screens (as part of flow) and can be used for multiple use case:

However, essentially these are a customized version of the main flow below,

Step 1:

Tap the "+" to add an item. This screen and the following underneath are both dynamic screens which are configurable from the Solution Builder.

Step 2:

The item details screen will appear afterwards, allows technicians to:

Step 3:

The item details screen will appear afterwards, allows technicians to:

Note that this is a static screen thus non-configurable.

Step 4:

Here, technicians can search the item to display the populated list. Next, they can either:

Step 5:

When a search doesn't show any result, it will appear as an empty screen.

Step 6:

Once a selection is confirmed, the same previous screen will appear (with pre-selected item), and technicians will be able to add more details. Tap the "back" button on the top left corner to go back to the table otherwise.

Step 7:

Tap "Done" to view all selected items. Here, the technicians may add more items or tap "X" from the top left corner to go back to the main screen (refer to "step 9"). Tap any item from the list will open up a "View Details" screen below.

Step 8:

Here, the technicians can either:

Step 9:

When done, the main screen will show the number of record(s) and technicians may tap the "pencil" icon to add more items.

Signature is an input component where the input must be drawn. This component enables the Mobile User to capture a signature on a mobile device.

The component is good to capture user attention because of its distinguished style and the size.

Best Practice

Specs

How to Configure

Sample JSON

Signature Check

{
 "endColumn": 11,
 "startColumn": 0,
 "Index": 6,
 "id": "sCustomerSign",
 "capturedTime": "@pageContext.custSignUrlTime",
 "locationCoordinates": "@pageContext.custSignUrlLocation",
 "Type": "signaturecheck",
 "value": "@pageContext.custSignUrl",
 "required": 1
}

Signature

{
 "endColumn": 11,
 "startColumn": 0,
 "Index": 5,
 "id": "engineerSignature",
 "capturedTime": "@pageContext.engineerSignTime",
 "locationCoordinates": "@pageContext.engineerSignLocation",
 "Type": "signature",
 "title": "Signature of the engineer",
 "value": "@pageContext.engineerSign",
 "required": 1
}

Overview

Text Component is a read-only field that contains text. For example, the Titles and Headers for all pages make use of this component. The text can have different alignments - Left, Right, Center and Justified.

The Header and Paragraph Text components support Tap to Call / Email / Go to URL. Through this feature, numbers, email addresses and URLs are highlighted. Tapping on these highlighted fields redirects a user to the phone's native phone calling, email application or browser, respectively.

Header Text

Configuration

Sample JSON

{
        "id": "jText2",
        "type": "headerText",
    "fontStyle": "standard",
        "alignment": "left",
            "value": "Left Alignment",f
            "startColumn": 0,
            "endColumn": 11,
            "index": 5
          }

Paragraph Text

Configuration

Sample JSON

{
        "id": "jText2",
    "type": "paragraphtext",
        "fontStyle": "standard",
    "alignment": "left",
    "value": "Left Alignment",
    "startColumn": 0,
    "endColumn": 11,
    "index": 1
}

Hyperlink Header Text

Configuration

Sample JSON

{
                "id": "jText2",
        "type": "headerhyperlink",
                "fontStyle": "standard",
                "alignment": "left",
        "value": "Left Alignment",
                "startColumn": 0,
            "endColumn": 11,
            "index": 2
          }

Hyperlink Paragraph Text

Configuration

Sample JSON

{
            "id": "jText2",
            "type": "paragraphhyperlink",
            "fontStyle": "standard",
            "alignment": "left",
            "value": "Left Alignment",
            "startColumn": 0,
            "endColumn": 11,
            "index": 3
}
{
                  "endColumn": 11,
                  "startColumn": 0,
                  "dataType": "datetime" or "date" or "time"
                  "index": 2,
                 "id": "headerText1",
                 "type": "headerText" or "paragraphtext"
                 "title": "DATE TIME",
                  "fontStyle": "standard",
                  "alignment": "left",
                 "value": "@pageContext.inputdatetime2",
                 "enabled": true
}

Comments

title: Title = Text, in Mobile page builder

The Timer Component provides the User with a countdown for the time left for an SLA breach.

How to Configure

Sample JSON

{
    "col": "c1",
    "type": "timer",
    "id": "timerId",
    "executeTimer": true,
    "timeout": "2019-06-12 11:12:56",  // yyyy-MM-dd HH:mm:ss
    "timeoutMessage": "The time has exceeded the initial target"
}

Video Component.

	Note
	to follow up: New component added based on the spreadsheet Need to follow up on JSON samples

Photo Checkbox

How to Configure

Sample JSON

Video Input

Sample JSON

Video Comment

Sample JSON

Delete Alert Info for these components

"deleteAlertInfo": {
"title" : "Title",
"description" : "description",
"alertButtons": {
"primaryButton": "Delete",
"secondaryButton": "Cancel"
}
}

Overview

Workflow Actions enable the user to call a separate page displaying a list of actions which can be performed, from within a Task. The available Workflows Actions can be found by tapping the “...” icon on the top left of the mobile navigation bar.

For instance, if the User wants to add an SLA to the Issue Details in a Task, they can select “SLA” by clicking on “...” found in the top right corner of the “Issue Details” page.

How to Configure

Sample JSON

{
"header": {
    "rightButton": {
        "image": "@icon.kebabMenuWhite",
        "action": "openDropdown",
        "id": "aFootRight",
        "list": [
                {
                    "image": "https://s3-us-west-2.amazonaws.com/zinier.png",
                    "cancelAllowed": "true",
                    "startPage": "16A963706634E550",
                    "listData": [
                                {
                                    "rejectionMap": {
                                    "title": "answerOptionText",
                                    "value": "answerOptionText"
                                },
                    "otherAllowed": "true",
                    "searchListQuery": "searchQueryforWorflowAction",
                    "listMap": {
                                    "date": "plannedDate",
                                    "heading": "header",
                                    "subHeading": [
                                                    "delivery",
                                                    "eta",
                                                    "status"
                                                  ],
                                    "status": {
                                                "colorCode": "color",
                                                "status": "status"
                                              }
                                },
                    "inputs": [
                                "workOrderId"
                              ],
                    "rejectionQuery": "rejectionForWorkflowAction",
                    "listQuery": "testQuery"
                }
                ],
        "name": "User Initiated Workflow",
        "startProcessId": "demo",
        "cancelProcessId": "workflowActionRejectionWorkflow",
        "id": "workflowActionID",
        "type": "partRequest",
        "enabled": "1"
        }
        ],
    "title": "Next",
    "enabled": "1"
        }
    }
}