Use tiles to display card data in a specific layout or to provide functionality to texts, buttons, and images.
Tile0: Text Label
This tile represents a text label in a single row.
| Configurations | Preview |
|---|
align: START (left), CENTER, END (right) or JUSTIFY
| |
{
"id": "Tile0",
"subView": [
{
"title": {
"text": "00t1v0",
"style": "bold"
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile0a: Two Text Labels
This tile represents two texts labels in a single row.
| Configurations | Preview |
|---|
align: START (left), END (right) or JUSTIFY
| |
{
"id": "Tile0a",
"subView": [
{
"title": {
"text": "00t1v36",
"style": "bold"
},
"subTitle": {
"text": "00t1v37",
"style": "bold"
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile1: Text Input
This tile represents a text input for a specific key.
| Configurations | Preview |
|---|
align: START (left), END (right) or JUSTIFY min and max: character length hint: placeholder for text input key: {*sugarLevel}- The text input is set to key sugarlevel that will be used and sent through an event.
| |
{
"id": "Tile1",
"subView": [
{
"title": {
"text": "00t1v25"
},
"subTitle": {
"text": "{*sugarLevel}",
"hint": "00t1v26",
"keyboard": "text",
"min":"1",
"max":"30"
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile1a: Two Rows with Text Input
This tile represents two rows: the first containing a text label and the second containing a text input for a specific key.
| Configurations | Preview |
|---|
Title text is displayed on the first row Subtitle text is displayed on the second row as an input field align: START, CENTER, END and JUSTIFY hint: placeholder for text input validation: optional or required, and error message
| |
{
"id": "Tile1a",
"subView": [
{
"title": {
"text": "1tile1iitextiiixo",
"titleTextColor": "#000080",
"titleAlign": "JUSTIFY"
},
"subTitle": {
"text": "{$ReferralCode}",
"hint": "1tile1iihintii6km",
"subTitleTextColor": "#000080",
"subTitleAlign": "START",
"keyboard": "text",
"min": "1",
"max": "1000",
"validation": [
{
"name": "OPTIONAL",
"error": "1tile1iierrorii6se"
}
]
}
}
],
"borderColor": "#87ceeb",
"type": "CONTAINER",
"uiAction": "",
"order": 4
}
Tile2: Text Input with Tooltip
This tile represents a text input for a specific key with tooltip.
| Configurations | Preview |
|---|
align: START (fixed left) min and max: character length hint: placeholder for text input key: {*age} - The text input is set to age that will be used and sent through an event. tip: text shows when a user clicks the question mark icon icon image: height and width
| |
{
"id": "Tile2",
"subView": [
{
"title": {
"text": "00t1v23"
},
"subTitle": {
"text": "{*age}",
"hint": "00t1v24",
"keyboard": "text",
"min":"1",
"max":"30",
"tip": "00t1v22"
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile3: Date Selector
This tile represents a date selector for a specific key.
| Configurations | Preview |
|---|
align: START (fixed left) hint: placeholder for date input key: {*dateSelected} - The date input is set to key dateSelectedthat will be used and sent through an event. icon image: height and width
| |
{
"id": "Tile3",
"subView": [
{
"title": {
"text": "00t1v19"
},
"subTitle": {
"text": "{*dateSelected}",
"hint": "00t1v20",
"min" : "12/01/2022",
"max" : "14/01/2022"
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile5: Stepper
This tile represents a stepper to adjust the value for a specific key.
| Configurations | Preview |
|---|
start: the start number of the stepper end: the end number of the stepper align: START (fixed left), JUSTIFY key: {status} - The selected value is set to key statusthat will be used and sent through an event.
| |
{
"id":"Tile5",
"subView":[
{
"title":{
"text":"00t1v18"
},
"subTitle":{
"text":"{status}",
"start": 0,
"end": 100,
"count":10
}
}
],
"align":"START",
"type":"CONTAINER",
"uiAction":"",
"order":1
}
Tile6: Horizontal Radio Buttons
This tile represents option selectors as radio buttons in horizontal format.
| Configurations | Preview |
|---|
key: {answer} - The selected option is set to key answer that will be used and sent through an event. list: dynamic options list
| |
{
"id": "Tile6",
"subView": [
{
"title": {
"text": "00t1v5"
},
"options": {
"key":{
"name":"{answer}"
},
"list":[
{
"label": "00t1v11"
},
{
"label": "00t1v12"
},
{
"label": "00t1v13"
}
]
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile6a: Vertical Radio Buttons
This tile represents option selectors as radio buttons in vertical format.
| Configurations | Preview |
|---|
key: {answer} - The selected option is set to key answer that will be used and sent through an event. list: dynamic options list
| |
{
"id": "Tile6",
"subView": [
{
"title": {
"text": "00t1v5"
},
"options": {
"key":{
"name":"{answer5}"
},
"list":[
{
"label": "00t1v11"
},
{
"label": "00t1v12"
},
{
"label": "00t1v13"
}
]
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile7: Horizontal Checkboxes
This tile represents a multi-option selector as checkboxes in horizontal format.
| Configurations | Preview |
|---|
key: {answer} - The selected option is set to key answer that will be used and sent through an event. list: dynamic options list
| |
{
"id": "Tile7",
"subView": [
{
"title": {
"text": "00t1v5"
},
"options": {
"key":{
"name":"{answer}"
},
"list":[
{
"label": "00t1v11"
},
{
"label": "00t1v12"
},
{
"label": "00t1v13"
}
]
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile7a: Vertical Checkboxes
This tile represents a multi-option selector as checkboxes in vertical format.
| Configurations | Preview |
|---|
key: {answer} - The selected option is set to key answer that will be used and sent through an event.
| |
{
"id": "Tile7a",
"subView": [
{
"title": {
"text": "00t1v5"
},
"options": {
"key":{
"name":"{answer}"
},
"list":[
{
"label": "00t1v11"
},
{
"label": "00t1v12"
},
{
"label": "00t1v13"
}
]
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile7b: Vertical Checkboxes with Subtitle
This tile is the same as Tile7a with an extra option for a subtitle label, such as displaying the count in numbers.
| Configurations | Preview |
|---|
For subtitle color handling: In the example, the subtitle is shown as a number next to the title label. | |
{
"id": "Tile7b",
"subView": [
{
"title": {
"text": "00t1v5"
},
"options": {
"key":{
"name":"{answer}"
},
"list":[
{
"label": "00t1v11",
"subTitle":{
"text": "{00t1v11}",
"colorCode": "00FF00"
},
{
"label": "00t1v12"
"subTitle":{
"text": "{00t1v12}",
"colorCode": "00FF00"
},
{
"label": "00t1v13"
"subTitle":{
"text": "{00t1v13}",
"colorCode": "00FF00"
}
]
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile8: Scrollable Table
This tile represents a scrollable table grid.
| Configurations | Preview |
|---|
key: {answer} - The selected option is set to key answer that will be used and sent through an event. data: the list of data for each header
| |
{
"id": "Tile8",
"subView": [
{
"title": {
"text": "00t1v10"
},
"options": {
"key":{
"name":"{answer}"
},
"list":[
{
"label": "00t1v11",
"data" : "00t1v14"
},
{
"label": "00t1v12",
"data" : "00t1v15"
},
{
"label": "00t1v13",
"data" : "00t1v16"
}
]
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile9: Scrollable Table without Title Label
This tile is the same as Tile8, with no title.
| Configurations | Preview |
|---|
See configurations for Tile8. | |
{
"id": "Tile9",
"subView": [
{
"options": {
"key":{
"name":"{answer}"
},
"list":[
{
"label": "00t1v11",
"data" : "00t1v14"
},
{
"label": "00t1v12",
"data" : "00t1v15"
},
{
"label": "00t1v13",
"data" : "00t1v16"
}
]
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile10: Option Selector
This tile represents an option selector.
| Configurations | Preview |
|---|
key: {answer} - The selected option is set to key answer that will be used and sent through an event. list: dynamic options list
| |
{
"id": "Tile10",
"subView": [
{
"title": {
"text": "00t1v4"
},
"options": {
"key":{
"name":"{answer}"
},
"list":[
{
"label": "00t1v16"
},
{
"label": "00t1v17"
}
]
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile10a: Toggle Switch
This tile represents a toggle switching button, such as "on" or "off".
| Configurations | Preview |
|---|
key: {answer} - The selected option is set to key answer that will be used and sent through an event. list: dynamic options to toggle on and off
| |
{
"id": "Tile10a",
"subView": [
{
"title": {
"text": "00t1v4"
},
"options": {
"key":{
"name":"{answer}"
},
"list":[
{
"label": "00t1v16"
},
{
"label": "00t1v17"
}
]
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile11: Title and Text
This tile represents two rows with a title and a subtitle text.
| Configurations | Preview |
|---|
title label (left) on first row subtitle label (left) on second row
| |
{
"id": "Tile11",
"subView": [
{
"title": {
"text": "00t1v27"
},"subTitle":{
"text":"00t1v28"
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile11a: Title and Scrollable Text
This tile is the same as Tile11 with a scrollable subtitle text.
| Configurations | Preview |
|---|
For subtitle view: heightMultiplier: "1" - This value is calculated according the screen ratio. text includes JUSTIFY option
| |
{
"id": "Tile11",
"subView": [
{
"title": {
"text": "00t1v27"
},"subTitle":{
"text":"00t1v28",
"heightMultiplier":"1"
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile12: Dropdown Option Selector
This tile represents a dropdown selector for a list of options.
| Configurations | Preview |
|---|
subtitle: key, hint, and data key: {*patient} - The selected option is set to key patient that will be used and sent through an event. hint: placeholder for the selected option data: an array of options loaded from cardData, for example: ["option 1", "option 2", "option 3"] text includes JUSTIFY option icon image: height and width
| |
{
"id": "Tile12",
"subView": [
{
"title": {
"text": "00t1v29"
},
"subTitle": {
"text": "{*patient}",
"hint": "00t1v30",
"keyboard": "text",
"data" : "00t1v14"
}
}
],
"align":"START",
"type": "CONTAINER",
"uiAction": "",
"order": 1
}
Tile14: Clickable Tile
This tile represents a clickable tile that triggers an action.
| Configurations | Preview |
|---|
uiAction: "${action1}" - This value is correlated with an event handler. text includes JUSTIFY option icon image: height and width
| |
{
"id":"Tile14",
"subView":[
{
"title":{
"text":"00t1v21"
}
}
],
"align":"START",
"type":"CONTAINER",
"uiAction":"${action1}",
"order":1
}
Tile14a: Clickable Tile with Subtitle
This tile is the same as Tile14 with a subtitle.
| Configurations | Preview |
|---|
text includes JUSTIFY option icon image: height and width
| |
{
"id":"Tile14a",
"subView":[
{
"title":{
"text":"00t1v21",
"style":"bold"
},
"subTitle":{
"text":"00t1v21",
"style":"bold"
},
"img":{
"text":"00t1v35"
}
],
"align":"START",
"type":"CONTAINER",
"uiAction":"${action1}",
"order":1
}
Tile16: Image Tile
This tile represents an image that can be loaded locally or from a URL.
| Configurations | Preview |
|---|
image: text, isURL, height and width text: the source of the image (link or image name) loaded from the cardData
| |
{
"id":"Tile16",
"subView":[
{
"img":{
"text":"00t1v35",
"isUrl":true
}
}
],
"align":"START",
"type":"CONTAINER",
"uiAction":"",
"order":1
}
Tile17: Clickable Image Grid
This tile represents clickable images to select an option or trigger an action.
| Configurations | Preview |
|---|
key: {answer5} - The selected option from the list is set to key answer5 that will be used and sent through an event.
| |
{
"id":"Tile17",
"subView":[
{
"options":{
"key":{
"name":"{answer5}"
},
"list":[
{
"label":"00t1v44",
"img":{
"text":"00t1v43",
"isURL":false
}
},
{
"label":"00t1v45",
"img":{
"text":"00t1v48",
"isURL":false
}
},
{
"label":"00t1v46",
"img":{
"text":"00t1v49",
"isURL":false
}
},
{
"label":"00t1v47",
"img":{
"text":"00t1v50",
"isURL":false
}
}
]
}
"img":{
"text":"00t1v35",
"isUrl":true
}
}
],
"order":1
"type":"CONTAINER",
"uiAction":""
}
Tile17a: Clickable Image Row
This tile represents clickable images in a single row. Clicking the image navigates the user to a target location.
| Configurations | Preview |
|---|
subtitle text: reference to the title that displays below the image align: START, CENTER, or END uiAction: for example, "action17a2"
| |
{
"id": "Tile17a",
"subView": [
{
"options": {
"list": [
{
"subTitle": {
"text": "10tile17aiitextiizxq",
"subtitleAlign": "CENTER",
"colorCode": "#000080",
"style": "REGULAR"
},
"img": {
"text": "imageUrlo9w7y"
},
"uiAction": ""
},
{
"subTitle": {
"text": "9tile17aiitextii0ak",
"subtitleAlign": "CENTER",
"colorCode": "#000080",
"style": "REGULAR"
},
"img": {
"text": "imageUrlynopr"
},
"uiAction": "action17a2"
},
{
"subTitle": {
"text": "8tile17aiitextiimyk",
"subtitleAlign": "END",
"colorCode": "#000080",
"style": "REGULAR"
},
"img": {
"text": "imageUrlk6cem"
},
"uiAction": "action17a1"
}
]
}
}
],
"borderColor": "#ffffff",
"type": "CONTAINER",
"uiAction": "",
"order": 5
}
"action17a2": {
"action": [
{
"name": "Function.Navigate",
"cardId":"cd-vwgot7h4rlhwnzjf24aqa37ezz4"
}
]
}
SmartTile1: Input Validation Tile
This tile is an input field that is used to implement checks, such as "field format" and "field value".
| Configurations | Preview |
|---|
align: START, CENTER, END or JUSTIFY hint: placeholder for text input fieldFormat: Any supported field format, such as "email". validation: optional or required, and error message
| |
{
"id": "SmartTile1",
"subView": [
{
"title": {
"text": "2tile1iitextii5gb",
"titleTextColor": "#000080",
"titleAlign": "START",
"fontSize": 16
},
"subTitle": {
"text": "{$email}",
"hint": "2tile1iihintiid8l",
"subTitleTextColor": "#000080",
"subTitleAlign": "START",
"tip": "2tile2iitipii3m6",
"fieldFormat": "email",
"validation": [
{
"name": "REQUIRED_FIELD",
"error": "2tile1iierrorii0uj"
}
]
}
}
],
"borderColor": "#C5C3C8",
"type": "CONTAINER",
"uiAction": "",
"order": 2
}
