Tiles

This section describes the supported configurations and examples of tiles used in card definitions.

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

style: Regular or Bold
align: START (left), CENTER, END (right) or JUSTIFY
border color: hex value
text color: hex value

Example:

{
            "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

style: Regular or Bold
align: START (left), END (right) or JUSTIFY
border color: hex value
text color: hex value

Example:

 {
            "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
keyboard: text or number
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.
border color: hex value
text color: hex value

Example:

{
            "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
text color: hex value
border color: hex value
align: START, CENTER, END and JUSTIFY
hint: placeholder for text input
keyboard: text or number
min and max length
validation: optional or required, and error message

Example:

{
                        "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
                    }

This tile represents a text input for a specific key with tooltip.

Configurations

Preview

align: START (fixed left)
keyboard: text or number
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
border color: hex value
text color: hex value
icon image: height and width

Example:

{
            "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

title label (left)
min and max: date values
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.
border color: hex value
text color: hex value
icon image: height and width

Example:

{
            "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

title label (left)
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.
border color: hex value
text color: hex value

Example:

{
            "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

title label (left)
align: START, JUSTIFY
options: key and list
key: {answer} - The selected option is set to key answer that will be used and sent through an event.
list: dynamic options list
border color: hex value
text color: hex value

Example:

{
            "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

title label (left)
align: START, JUSTIFY
options: key and list
key: {answer} - The selected option is set to key answer that will be used and sent through an event.
list: dynamic options list
border color: hex value
text color: hex value

Example:

{
            "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

title label (left)
options: key and list
key: {answer} - The selected option is set to key answer that will be used and sent through an event.
list: dynamic options list
border color: hex value
text color: hex value

Example:

{
            "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

title label (left)
options: key and list
key: {answer} - The selected option is set to key answer that will be used and sent through an event.
border color: hex value
text color: hex value

Example:

{
            "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:

border color: hex value
text color: hex value

In the example, the subtitle is shown as a number next to the title label.

Example:

{
            "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

title label (left)
options: key and list
key: {answer} - The selected option is set to key answer that will be used and sent through an event.
list: label and data
label: the header title
data: the list of data for each header

Example:

{
              "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.

Example:

{
              "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

title label (left)
options: key and list
key: {answer} - The selected option is set to key answer that will be used and sent through an event.
list: dynamic options list
border color: hex value
text color: hex value

Example:

{
            "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

title label (left)
options: key and list
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
border color: hex value
text color: hex value

Example:

{
            "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
border color: hex value
text color: hex value

Example:

{
            "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
border color: hex value
text color: hex value

Example:

{
            "id": "Tile11",
            "subView": [
              {
                "title": {
                  "text": "00t1v27"
                },"subTitle":{
                  "text":"00t1v28",
                  "heightMultiplier":"1"
                }
              }
            ],
            "align":"START",
            "type": "CONTAINER",
            "uiAction": "",
            "order": 1
            
          }

This tile represents a dropdown selector for a list of options.

Configurations

Preview

title label (left)
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
border color: hex value
text color: hex value
icon image: height and width

Example:

{
            "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

title label
uiAction: "${action1}" - This value is correlated with an event handler.
text includes JUSTIFY option
border color: hex value
text color: hex value
icon image: height and width

Example:

 {
            "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

style: bold
text includes JUSTIFY option
border color: hex value
text color: hex value
icon image: height and width

Example:

 {
            "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
isURL: true or false
size: height and width

Example:

{
            "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

options: key and list
key: {answer5} - The selected option from the list is set to key answer5 that will be used and sent through an event.
image: text and isURL
isURL: true or false

Example:

{
            "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
text color: hex value
border color: hex value
uiAction: for example, "action17a2"

Tile definition example:

{
                        "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
                    }

cardUIAction example:

"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

title text
subtitle text
text color: hex value
font size: number value
border color: hex value
align: START, CENTER, END or JUSTIFY
hint: placeholder for text input
min and max length
fieldFormat: Any supported field format, such as "email".
validation: optional or required, and error message

Example:

                    {
                        "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
                    }