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

DescriptionAttributes

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