The tlx API

Everything goes through the tlx object, which is injected into your tile's frame before your script runs. Each call needs the matching capability in your manifest.

Lifecycle

Register your tile once with tlx.define({ mount, refresh, unmount, onSettingsChange, onResize, onThemeChange }). Only mount is required: it runs once when the tile is first shown. refresh runs whenever the dashboard's data changes elsewhere.

Calls

• tlx.data.query(name, params): read a named dataset from the user's organization.
• tlx.connector.call(name, params): call one of your declared connectors.
• tlx.settings.get(): read the values the user configured (secrets are never returned).
• tlx.storage.get(key) and tlx.storage.set(key, value): small values shared by the whole organization (writing needs a member who can edit).
• tlx.prefs.get(key) and tlx.prefs.set(key, value): per-viewer display preferences, such as the last selected view or a chart setting. Kept in the viewer's own browser (JSON, up to 2 KB per value), never sent to the server, and available to every member, including viewers.
• tlx.ui.toast(message, type), tlx.ui.setBadge(text) and tlx.ui.confirm(options): small pieces of host UI.
• tlx.ui.action(name, payload): ask the dashboard to open one of its own dialogs.
• tlx.ui.openSettings(): open the settings of your tile (Your Tiles, Configure). Use it in your "not configured yet" state.
• tlx.theme() and tlx.cssVar(name): the viewer's theme (dark, slate or light) and its colour tokens, such as --tlx-text, --tlx-card, --tlx-income or --tlx-expense. Style your tile with the tokens from tile-base.css and it follows the theme automatically; if you draw on a canvas, redraw in your onThemeChange() callback.
• tlx.icon(name): a small SVG icon element (edit, close, trash, check, plus, minus, refresh, repeat, settings, external, wallet, zoom-in, zoom-out, maximize, grid) in the current text colour. Use it instead of emoji. For an icon-only button, give the button the tlx-icon-btn class (add is-danger for delete) and an aria-label.

Your code runs without cookies, storage or network of its own. Reading the DOM and drawing is all yours. Every promise rejects with an error whose message is "timeout", "bridge not ready" or a server message.

tlx.define({
  async mount() {
    const s = await tlx.settings.get();
    const rows = await tlx.connector.call("orders", {});
    document.body.textContent = String(rows.length) + " orders";
  },
  refresh() { /* fetch and render again */ }
});