Widgets

Embeds

Another DataView, a dashboard or another site's page, inside a page.

In the admin: Design form › Widgets › Embeds

Widget
DataView	another published list DataView, inside the page: a work order's visits, a customer's sites
Dashboard	a published dashboard, with its variables set from the page
Frame	another site's page, with an address built from the page's values

DataView

Shows a list DataView as the App shows it, with its view, its New and its record form. Its options:

Option
Linked by	A foreign key of its table to the page's record, such as `visits.work_order`. It then shows only the rows of this record, and a new row starts linked. Empty, every row its own filter allows
View	Which of its views to show
Allow, Read only	What it lets users do, only ever less than their permissions. Read only is a formula: `{{vars.record.data.status}} == "COMPLETED"`
Toolbar, Toolbar functions	None, compact or full, and which functions to keep. Inside a page most are noise, so saved views, activity, export and print start off
Columns, New button, Pages	Which columns, the New button's label, and paging (off: every row at once)
Edit in the grid	With Linked by: the rows become a table of inputs, saved together with the record in one transaction. This is how a Master-detail edits its lines

It emits rowsChanged after any change, so the page can read its record again and show a total a trigger recomputed.

A DataView widget keeps its own access: users see its rows under their own permissions.

TDataView · TotalBase

Another DataView inside the page - its grid, cards, map, board, calendar or timeline, its New and its record form. Linked by a column: the rows that belong to the page's record (an order's items, a person's history); without: every row its own filter allows.

Height: rows of 40 px, or Fill height

Props

Prop	Code	Takes
DataView	`dataview`		A published DataView. Its viewers' permissions decide what they read and write in it.
Linked by	`column`		The rows that belong to the page's record: only those whose column points at it, a new row starts linked to it, and nothing shows until the record is saved. Empty: every row.
View	`view`		Which of the DataView's views it shows - empty: the one it opens with.
Allow	`allow`		What it lets a viewer do besides reading - only less than their permissions and than the DataView it shows allows, never more. Empty: all three.
Toolbar	`toolbarMode`	`none`, `compact`, `full`; default `compact`	none: only New; compact: search and a menu; full: every action a button. A phone is always compact.
Toolbar functions	`tools`		Each of its toolbar's functions, on or off here - only off what the DataView has on.
Columns	`columns`		Each of its columns shown or hidden here - their format is the DataView's. Empty: as the DataView shows them.
Pages	`paging`	default `true`	Off: every row at once - a record's items.
Edit in the grid	`editInline`	default `false`	Linked by a column: its rows edited in place - Tab from cell to cell, Tab past the last adds one - and saved with the page's record, in one transaction. Off: each row in its own form.
Read only	`readOnly`	ƒ	Nothing but reading here, whatever Allow says - an issued invoice's items: == "ISSUED".

Also: New button newLabel (ƒ).

Events

Event	Code	Receives
Rows changed	`rowsChanged`	{ action, rows } - create, update, delete or import, and the rows saved or deleted
Row selected	`rowSelected`	{ row } - the row clicked
Row opened	`rowOpened`	{ row } - its record form opened

Example

{
  "widget": "TDataView",
  "props": {
    "dataview": "<the Visits DataView's id>",
    "column": "work_order",
    "toolbarMode": "none",
    "paging": false
  },
  "height": 8,
  "emits": {
    "rowsChanged": "onVisitsChanged"
  }
}

Dashboard

A published dashboard inside the page, its variables set by formulas: customer ← {{vars.record.data.id}}. The dashboard keeps its own access: a user without it sees that it isn't available.

A variable set by the page only filters. It doesn't restrict: a dashboard runs with its author's authority, and a dashboard that must show each user only their data uses $USER.* in its SQL. See Object access.

TDashboard · TotalBase

A published Dashboard, its variables set from the page - a customer's own figures, for one.

Height: rows of 40 px, or Fill height

Props

Prop	Code	Takes
Dashboard	`dashboard`		A published Dashboard. Who sees it is its own: a viewer without access sees it isn't available.
Variables	`variables`		A formula per variable, e.g. - set ones are hidden from its bar; the rest stay the viewer's to pick.

Frame

Another site's page, in the same sandbox as an External frame, with an address that can include the page's values: https://tracking.example/shipments/{{vars.record.data.tracking_id}}. The values can only go into the path, the query or the fragment, never the site itself, and they're encoded. The values are sent to that site, so put in the address only what that site may receive.

TFrame · TotalBase

Another site's page in a sandboxed frame - its URL may take values from the page, e.g. the record's tracking number.

Height: rows of 40 px, or Fill height

Props

Prop	Code	Takes
URL	`url`		https://… - a value goes where a token is: https://tracking.example/shipments/{{vars.record.data.tracking_id}}. The site itself is fixed (tokens only after the / that follows it), each value is URL-encoded, and the values are sent to that site.
Title	`title`	ƒ	What the frame shows, for screen readers.
Open in new tab	`openInNewTab`		A button above it that opens the same page in a new tab.

Next steps

Widgets: how a widget works, and every one of them.
Variables: what widgets show and change.

Display

Text, images, tables, badges and the other widgets that show the page's data.

Layout

Cards, boxes, tabs and the other widgets that arrange the rest.