Skip to content

Tiles

Connection object

The connection object links the tile to data.

Controls

In addition to the complex tiles listed below markup can also include more basic user entry widgets.

Root attributes

Root attributes for the page.

  • page
    • display:
      • navigation: true | false; turn off menu
    • styles: applied to each component [deprecated]
    • rootStyles: applied to the root object [deprecated]
  • styles
    • root: base object
    • markup: scrolling object
    • ..additional per component
  • classes
    • root: base object
    • markup: scrolling object
    • ..additional per component

Base attributes

Attributes supported by all tiles

  • display
    • mSpan: 1-12, phone
    • tSpan: 1-12, tablet
    • dSpan: 1-12, desktop
    • edge: true | false; if true edge to edge
  • styles:
    • root: applied to the component
    • widget: applied to the primary widget
    • others as defined by the widget
  • classes:

    • root: applied to the component
    • widget: applied to the primary widget
    • others as defined by the widget
  • options

    • rootClasses: classes to apply to the cell
    • styles

Attachment

Display attachment

  • tile=attachedFile
  • title
  • attachment
    • id: attachment id
  • condition: rule

Attributes

Display user attributes

  • tile=attributes
  • title
  • query: data store query
  • config profile: true | false
  • display:
    • height: height in pixels
    • allowEdit: allow user to edit attributes
  • attributes: array
    • source: path to the property
    • title: title for the attribute
    • formatAs: format string
  • profile: object
    • key: template: load user object properties

Actions

List of buttons or tiles that can be assigned actions. Full docs

  • tile=actions
  • title
  • options:
    • layout: grid | tile | round | buttons | whitelabel
  • actions:
    • condition: valid rule
    • title: display for the action
    • description: additional instructions
    • target: post | form | behavior | close
      • post and form act as menu actions
      • close will close the page
    • options: based on layout
    • behavior: share | dispatch | whitelabel
    • params: passed to behavior
    • values: passed to behavior
    • onComplete: close
    • boxShadow: based on layout
    • background: background style
    • foreground: foreground style
    • backgroundImage: image
    • icon: based on layout
    • variant: based on layout
    • color: based on layout
    • size: based on layout

Boolean

Boolean switch object

  • tile=boolean
  • title
  • form
    • property: value in shared data
    • config: component configuration
    • opts: component opts
    • default: default value
    • condition: value rule string
    • enum: for enumerated types

Calendar

Agenda display with Dispatch query

  • tile=calendar
  • title
  • query: valid dispatch query

Card

Card

  • tile=card
  • title
  • TODO

Catalog

Catalog chart

  • tile=catalog
  • title
  • TODO

Chart

Chart chart

  • tile=checkbox
  • title
  • TODO

Checkbox

Checkbox object

  • tile=checkbox
  • title
  • form
    • property: value in shared data
    • config: component configuration
    • opts: component opts
    • default: default value
    • condition: value rule string
    • enum: for enumerated types

Content

Allows adhoc HTML markup.

  • tile=content
  • title
  • body: HTML markup

Compute

Compute

  • tile=compute
  • title
  • TODO

Dashboard

Dashboard

  • tile=dashboard
  • title
  • TODO

Dispatch

Dispatch stream

  • tile=dispatch
  • title
  • query: Dispatch query
  • margin
  • height
  • component: agenda | simple | user | info

Dropdown object

  • tile=dropdown
  • title
  • form
    • property: value in shared data
    • config: component configuration
    • opts: component opts
    • default: default value
    • condition: value rule string
    • enum: for enumerated types

Generate

Dyanmic form creation for trackers.

  • tile=generate
  • title
  • TODO

Grid

Configurable grid display showing one row per user. See detailed grid documentation

  • tile=grid
  • title
  • grid
    • dispatches: dispatch query
    • users: user query to define the rows
    • fields: Array with entry for each column
      • title
      • render: attributes | metrics | images | dispatch
      • width: column width
      • additional attributes based on render

Under fields; shows user attributes.

  • attributes
    • source: path to attribute
    • title: optional title to display

Under fields; shows dispatch data.

  • trackers: handle array to match
  • show:
    • [metric api name]: Array
      • first element: String name
      • second element: array | string
    "show": {
        "meatKinds": [
            "What kinds of meat", "array"
        ],
        "dairyKinds": [
            "What kinds of dairy", "array"
        ]
    }
  • trackers: handle array to match
  • takeRight: N, take from the end of the list N entries
  • takeLeft: N, take from the start of the list N entries
  • styles: style override
  • trackers: handle array to match
  • match: Date expression to match with
  • period: adjustment to today
  • createTracker: handle for add entry
    "trackers": [
        "prescription"
    ],
    "match": "GGGG-WW",
    "period": "+1 week",
    "createTracker": "prescription"

Groups

Groups

  • tile=groups
  • title
  • TODO

Image

Display image

  • tile=image
  • title
  • image object
    • url image URL
    • height height in pixels
    • width width in pixels
    • align right | center | left
  • styles additional CSS supported styles

Inbox

Inbox

  • tile=inbox
  • title
  • TODO

Instructions

Marker display with message

  • tile=instructions
  • title
  • marker
    • color: hex
    • mark: Letter
    • prescription: tracker id
    • data: tracker metric
    • fallback: path to the fallback
    • author: user id to use
  • connect: connection object
  • condition: rule

Map

Display map.

  • tile=map
  • title
  • map
    • location:
    • metric:
    • zoom: 1-9
    • theme: silver | retro | dark | night | aubergine

Marker

Letter marker display with data used for showing diets

  • tile=marker
  • title
  • marker
    • color: hex
    • mark: Letter
    • dispatch:
      • tracker: tracker id
      • data: { meal: }
      • features: { time: hidden }
    • prescription: tracker id
    • maintenance: tracker id
    • name: suffix | prefix
    • condition: rule
  • metrics: Array of metric tuples
    • display string
    • match string
    • label
  • connect: connection object
  • alternate:
    • source
    • match : { }
  • condition: rule

Programs

Program timeline

  • tile=programs
  • title
  • variant: timeline

Schedule

Schedule View

Stack

Provide a vertical block of widgets

  • tile=stack
  • title
  • stack: Array of cells to display

Static text

Static text block

  • tile=static
  • title
  • body: text body