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

Description

Root attributes for the page.

  • page
    • display:
      • navigation: true | false; turn off menu
    • mode: wizard | click | tabs; when using pages
  • styles
    • layout: layout root
    • container: wrapper for the page object
    • markup: scrolling object
    • root: applied to each component
    • ..additional per component
  • classes
    • layout: layout root
    • container: wrapper for the page object
    • markup: scrolling object
    • root: applied to each component
    • ..additional per component
  • attach: attach to a single dispatch result
  • dataSources: Data source requests
  • pages: Array of page objects in document order

Example

Here applied classes to each row of layout page.And root indicate the applying style to whole layout page.

{
  "page": {
    "classes": {
      "rows": "m-0 p-0"
    },
    "styles": {
      "root": {
        "backgroundColor": "#E9ECBE"
      }
    }
  }
}

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

Example

Here applied classes to root classes apply to the columns and widget apply to content inside the column.For the styles same as classes.Display is used to show span in row here it half width of rows.

{
  "tile": "progress-block",
  "body": "{data.completion} Funded",
  "chart": true,
  "classes": {
    "widget": "text-left font-weight-bold",
    "root": "px-2"
  },
  "options": {
    "onClick": "open"
  },
  "styles": {
    "root": {},
    "widget": {
      "lineHeight": "1.5rem"
    },
  },
  "display": {
    "dSpan": 6,
    "mSpan": 6,
    "tSpan": 6
  }
}

Tiles

Rich tiles

Target Description Documentation API
Actions Action tiles Actions actions
Attachment Display attachment Attachment attachment
Attributes User attributes Attributes attributes
Catalog Catalog catalog
Chart - time series Time series chart chart
Chart - data Data Chart chartCategory
Chart - Scatter Scatter Chart chartScatter
Compute Compute compute
Content Content content
Dashboard Dashboard dashboard
Dispatch Dispatch list Dispatch dispatch
Dispatch entry Dispatch full entry DispatchEntry dispatchEntry
Dispatch media Dispatch media DispatchMedia dispatchMedia
Generate Task expansion Generate generate
Grid Grid grid
Groups Groups groups
Heatmap Heatmap heatmap
Image Image image
Inbox Inbox inbox
Infograph Infograph infograph
Instructions Instructions instructions
Map Map map
Marker Marker marker
Programs Program history Programs programs
Schedule Schedule schedule
Schedule view Schedule view scheduleView
Schedule resource Schedule resource scheduleResource
Statistics Statistics statistics
Stripe Stripe stripe
Table Table table
Tasks Tasks tasks
Wiki Wiki conwikitent
Data-list Datalist data-list
Progress-block ProgressBlock progress-block
Column-list ColumnList column-list
Tabs Tabs tabs
Graph-circle Graph graph
Profile Profile profile
svg svg svg
Trigger Trigger Trigger
Dispatch Table DispatchTable dispatch-table

Containers

Target Description Documentation
Stack Stack

Controls

Target Description Documentation API
Button
date
block
color
timezone
select
radio
radioList
time
checkbox*
boolean*
dropdown*
chooser
text

Beta

Target Description Documentation API
Purchase Purchase purchase
Progress Progress progress
Template Template template
Users Users users
QR QR QR
Simple table Simple table simpleTable
Random suggest Random suggest randomSuggest
Phone Phone phone
Caller id CallerId callerid
Random suggest Random suggest randomSuggest
Card Card card