> For the complete documentation index, see [llms.txt](https://docs.tuumio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tuumio.com/protocol-guide/build-a-dapp/card-definitions/tiles.md). # Tiles 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.
ConfigurationsPreview
  • style: Regular or Bold
  • align: START (left), CENTER, END (right) or JUSTIFY
  • border color: hex value
  • text color: hex value

{% code title="Example:" %} ```json { "id": "Tile0", "subView": [ { "title": { "text": "00t1v0", "style": "bold" } } ], "align":"START", "type": "CONTAINER", "uiAction": "", "order": 1 } ``` {% endcode %} ### Tile0a: Two Text Labels This tile represents two texts labels in a single row. | Configurations | Preview | | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | | | ![](/files/teGOXPX2Ij63Q34bZ1eF) | {% code title="Example:" %} ```json { "id": "Tile0a", "subView": [ { "title": { "text": "00t1v36", "style": "bold" }, "subTitle": { "text": "00t1v37", "style": "bold" } } ], "align":"START", "type": "CONTAINER", "uiAction": "", "order": 1 } ``` {% endcode %} ### Tile1: Text Input This tile represents a text input for a specific key.
ConfigurationsPreview
  • 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
{% code title="Example:" %} ```json { "id": "Tile1", "subView": [ { "title": { "text": "00t1v25" }, "subTitle": { "text": "{*sugarLevel}", "hint": "00t1v26", "keyboard": "text", "min":"1", "max":"30" } } ], "align":"START", "type": "CONTAINER", "uiAction": "", "order": 1 } ``` {% endcode %} ### 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 | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | | | ![](/files/x9m5qwR9eMiM0pasF0vs) | {% code title="Example:" %} ```json { "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 } ``` {% endcode %} ### Tile2: Text Input with Tooltip This tile represents a text input for a specific key with tooltip. | Configurations | Preview | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | | | ![](/files/cKh0Z3VrgvLsdq2O5HW6) | {% code title="Example:" %} ```json { "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 } ``` {% endcode %} ### Tile3: Date Selector This tile represents a date selector for a specific key. | Configurations | Preview | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | | | ![](/files/M8RX0qlovRG0Wlf4EyUn) | {% code title="Example:" %} ```json { "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 } ``` {% endcode %} ### Tile5: Stepper This tile represents a stepper to adjust the value for a specific key. | Configurations | Preview | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | | | ![](/files/W8Z3Ci5Z5VEVUbAMUFel) | {% code title="Example:" %} ```json { "id":"Tile5", "subView":[ { "title":{ "text":"00t1v18" }, "subTitle":{ "text":"{status}", "start": 0, "end": 100, "count":10 } } ], "align":"START", "type":"CONTAINER", "uiAction":"", "order":1 } ``` {% endcode %} ### Tile6: Horizontal Radio Buttons This tile represents option selectors as radio buttons in horizontal format. | Configurations | Preview | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | | | ![](/files/DKgXVYmN5ZEIwURmR29e) | {% code title="Example:" %} ```json { "id": "Tile6", "subView": [ { "title": { "text": "00t1v5" }, "options": { "key":{ "name":"{answer}" }, "list":[ { "label": "00t1v11" }, { "label": "00t1v12" }, { "label": "00t1v13" } ] } } ], "align":"START", "type": "CONTAINER", "uiAction": "", "order": 1 } ``` {% endcode %} ### Tile6a: Vertical Radio Buttons This tile represents option selectors as radio buttons in vertical format. | Configurations | Preview | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | | | {% code title="Example:" %} ```json { "id": "Tile6", "subView": [ { "title": { "text": "00t1v5" }, "options": { "key":{ "name":"{answer5}" }, "list":[ { "label": "00t1v11" }, { "label": "00t1v12" }, { "label": "00t1v13" } ] } } ], "align":"START", "type": "CONTAINER", "uiAction": "", "order": 1 } ``` {% endcode %} ### Tile7: Horizontal Checkboxes This tile represents a multi-option selector as checkboxes in horizontal format. | Configurations | Preview | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | | | ![](/files/460guHzADzwfkVZVHJjJ) | {% code title="Example:" %} ```json { "id": "Tile7", "subView": [ { "title": { "text": "00t1v5" }, "options": { "key":{ "name":"{answer}" }, "list":[ { "label": "00t1v11" }, { "label": "00t1v12" }, { "label": "00t1v13" } ] } } ], "align":"START", "type": "CONTAINER", "uiAction": "", "order": 1 } ``` {% endcode %} ### Tile7a: Vertical Checkboxes This tile represents a multi-option selector as checkboxes in vertical format. | Configurations | Preview | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | | | ![](/files/pR8g2uzKEV7MaVlJXhb0) | {% code title="Example:" %} ```json { "id": "Tile7a", "subView": [ { "title": { "text": "00t1v5" }, "options": { "key":{ "name":"{answer}" }, "list":[ { "label": "00t1v11" }, { "label": "00t1v12" }, { "label": "00t1v13" } ] } } ], "align":"START", "type": "CONTAINER", "uiAction": "", "order": 1 } ``` {% endcode %} ### Tile7b: Vertical Checkboxes with Subtitle This tile is the same as [Tile7a](#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.

| ![](/files/Wb4DRiJJb0nurERFrjRJ) | {% code title="Example:" %} ```json { "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 } ``` {% endcode %} ### Tile8: Scrollable Table This tile represents a scrollable table grid. | Configurations | Preview | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | | | {% code title="Example:" %} ```json { "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 } ``` {% endcode %} ### Tile9: Scrollable Table without Title Label This tile is the same as [Tile8](#tile8), with no title. | Configurations | Preview | | --------------------------------------- | ------------------------------------------------------------------- | | See configurations for [Tile8](#tile8). | | {% code title="Example:" %} ```json { "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 } ``` {% endcode %} ### Tile10: Option Selector This tile represents an option selector. | Configurations | Preview | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | | | {% code title="Example:" %} ```json { "id": "Tile10", "subView": [ { "title": { "text": "00t1v4" }, "options": { "key":{ "name":"{answer}" }, "list":[ { "label": "00t1v16" }, { "label": "00t1v17" } ] } } ], "align":"START", "type": "CONTAINER", "uiAction": "", "order": 1 } ``` {% endcode %} ### Tile10a: Toggle Switch This tile represents a toggle switching button, such as "on" or "off". | Configurations | Preview | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | | | {% code title="Example:" %} ```json { "id": "Tile10a", "subView": [ { "title": { "text": "00t1v4" }, "options": { "key":{ "name":"{answer}" }, "list":[ { "label": "00t1v16" }, { "label": "00t1v17" } ] } } ], "align":"START", "type": "CONTAINER", "uiAction": "", "order": 1 } ``` {% endcode %} ### Tile11: Title and Text This tile represents two rows with a title and a subtitle text. | Configurations | Preview | | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | | | {% code title="Example:" %} ```json { "id": "Tile11", "subView": [ { "title": { "text": "00t1v27" },"subTitle":{ "text":"00t1v28" } } ], "align":"START", "type": "CONTAINER", "uiAction": "", "order": 1 } ``` {% endcode %} ### Tile11a: Title and Scrollable Text This tile is the same as [Tile11](#tile11) with a scrollable subtitle text. | Configurations | Preview | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | |

For subtitle view:

| | {% code title="Example:" %} ```json { "id": "Tile11", "subView": [ { "title": { "text": "00t1v27" },"subTitle":{ "text":"00t1v28", "heightMultiplier":"1" } } ], "align":"START", "type": "CONTAINER", "uiAction": "", "order": 1 } ``` {% endcode %} ### Tile12: Dropdown Option Selector This tile represents a dropdown selector for a list of options. | Configurations | Preview | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | | | {% code title="Example:" %} ```json { "id": "Tile12", "subView": [ { "title": { "text": "00t1v29" }, "subTitle": { "text": "{*patient}", "hint": "00t1v30", "keyboard": "text", "data" : "00t1v14" } } ], "align":"START", "type": "CONTAINER", "uiAction": "", "order": 1 } ``` {% endcode %} ### Tile14: Clickable Tile This tile represents a clickable tile that triggers an action. | Configurations | Preview | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- | | | | {% code title="Example:" %} ```json { "id":"Tile14", "subView":[ { "title":{ "text":"00t1v21" } } ], "align":"START", "type":"CONTAINER", "uiAction":"${action1}", "order":1 } ``` {% endcode %} ### Tile14a: Clickable Tile with Subtitle This tile is the same as [Tile14](#tile14) with a subtitle. | Configurations | Preview | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | | | {% code title="Example:" %} ```json { "id":"Tile14a", "subView":[ { "title":{ "text":"00t1v21", "style":"bold" }, "subTitle":{ "text":"00t1v21", "style":"bold" }, "img":{ "text":"00t1v35" } ], "align":"START", "type":"CONTAINER", "uiAction":"${action1}", "order":1 } ``` {% endcode %} ### Tile16: Image Tile This tile represents an image that can be loaded locally or from a URL. | Configurations | Preview | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- | | | | {% code title="Example:" %} ```json { "id":"Tile16", "subView":[ { "img":{ "text":"00t1v35", "isUrl":true } } ], "align":"START", "type":"CONTAINER", "uiAction":"", "order":1 } ``` {% endcode %} ### Tile17: Clickable Image Grid This tile represents clickable images to select an option or trigger an action. | Configurations | Preview | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | | | {% code title="Example:" %} ```json { "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":"" } ``` {% endcode %} ### 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 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- | | | | {% code title="Tile definition example:" %} ```json { "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 } ``` {% endcode %} {% code title="cardUIAction example:" %} ```json "action17a2": { "action": [ { "name": "Function.Navigate", "cardId":"cd-vwgot7h4rlhwnzjf24aqa37ezz4" } ] } ``` {% endcode %} ### 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 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | | | ![](/files/2yQLmGl8tiMZxSBLywDK) | {% code title="Example:" %} ```json { "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 } ``` {% endcode %}