> 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 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.
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 | | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | ![](https://3274290131-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzy24sSh9L0pJi2yvy92v%2Fuploads%2FpSsT8eAajbzyvvLgMeys%2Ftile0a.png?alt=media\&token=6dede7eb-ab9c-4495-9129-ab8138f98f18) | {% 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 | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | ![](https://3274290131-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzy24sSh9L0pJi2yvy92v%2Fuploads%2F8yvPRKm4KQvHdJC5h7iZ%2Ftile1a.png?alt=media\&token=c98d9dfe-7ea2-4848-9c01-571d38d37816) | {% 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 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | ![](https://3274290131-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzy24sSh9L0pJi2yvy92v%2Fuploads%2FmpNcexcQBuZq9dPWqtYA%2Ftile2.jpg?alt=media\&token=2a82f493-71f4-42ae-80af-1c7e203b0fa1) | {% 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 | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | ![](https://3274290131-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzy24sSh9L0pJi2yvy92v%2Fuploads%2FfC2N7jQsk2bfr5FaS4DN%2Ftile3.jpg?alt=media\&token=35491e81-51ef-4dee-8374-a4f4809079c7) | {% 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 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | ![](https://3274290131-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzy24sSh9L0pJi2yvy92v%2Fuploads%2FNzoI5fv6CH6gZOBDU5Yo%2Ftile5.jpg?alt=media\&token=11bc98de-9a96-4baa-a96e-3ff62d3fd3cb) | {% 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 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | ![](https://3274290131-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzy24sSh9L0pJi2yvy92v%2Fuploads%2Fikx1BurMaeZd2SMlV0Rk%2Ftile6.jpg?alt=media\&token=999ab6ef-e0a6-4f96-83d5-6fdc416d167f) | {% 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 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | ![](https://3274290131-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzy24sSh9L0pJi2yvy92v%2Fuploads%2FngfwlRFO7Dfe9Mn4mYwi%2Ftile7.jpg?alt=media\&token=de56e547-5e75-4716-95e6-10e73c4c4201) | {% 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 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | ![](https://3274290131-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzy24sSh9L0pJi2yvy92v%2Fuploads%2FVelO0PRNhZm7OMptp35S%2Ftile7a.jpg?alt=media\&token=f74af470-4773-40ec-a0e7-109502765241) | {% 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.

| ![](https://3274290131-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzy24sSh9L0pJi2yvy92v%2Fuploads%2F8EP9PcoMx5aDnIG5Mrvs%2Ftile7b.png?alt=media\&token=abc79de1-c83b-4953-ba93-65bea94c1a6c) | {% 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 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | | ![](https://3274290131-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fzy24sSh9L0pJi2yvy92v%2Fuploads%2FzDLtMygDUtGdvg5KNIfV%2Fsmarttile1-sample.png?alt=media\&token=4d1ad32d-de94-4515-998b-c36f493cadb1) | {% 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 %}