Dynamic text & templates

Dynamic text

Text-bearing properties (rich text, custom HTML, message cards, dialog titles, toast messages, set-value templates…) accept double-brace placeholders that render live values:

Hello, {{firstName}} {{lastName}}!
Your order total is {{orderTotal}} €.
Application no. {{__variables.route.id}}

Placeholders re-render when the referenced values change. Inside repeaters, item context is available: {{ item.name }}, {{ index }}.

Simple logic is supported in template blocks:

@if (item.status == "Active") {<span class="ok">Active</span>}

Single vs. double braces

{name} (single) is for expressions: logic properties, conditions, params. {{name}} (double) is for text templates: content that renders on screen.

The template library

The Templates tab (plugin) manages reusable HTML templates. Define a card or option layout once, use it in any List grid, Select option template, or content block by picking its name, with no copy-pasting HTML between views.

Pick a template in the list on the left, or add one with Add template. The editor has the markup and the styles side by side, and Template settings next to them:

Field	What it is
Template (Angular syntax)	The markup, with {{placeholders}}. Required. The Format template button tidies the HTML.
CSS classes	Styles scoped to the template, with its own Format CSS button.
Name	The identifier elements reference. Must be unique; the editor rejects duplicates.
Title	Human-friendly display title.
Preview data (JSON)	The object the preview renders the template with. Put in a record shaped like your real data, for example { "name": "Harbor Foods", "status": "active" }, and the preview fills the placeholders from it. It must be a valid JSON object.

The Preview panel renders the template live as you type, against the preview data. Changes are kept as a draft until you press Save; the editor shows Unsaved changes in the meantime.

Storage settings

Where saved templates live (browser localStorage vs. a server-backed data source) isn't a field in this tab it's a setting your developer configures on the view. See Templates plugin reference for the exact settings and how host persistence to your own database works.

Example: client card

Template clientCard:

<div class="client-card">
  <strong>{{ item.name }}</strong>
  <span>{{ item.email }}</span>
  <span class="badge">{{ item.status }}</span>
</div>

.client-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.client-card .badge {
  color: #0a7;
  font-size: 12px;
}

Then on a List grid: Card template → clientCard. Every view using the template updates when the template is edited.

Where templates are stored

Depending on the Storage mode above, templates live in browser localStorage or on a server through a data source. The host application can also supply and persist templates through its own API including saving them into your own database. Your developer configures this (see the Templates plugin reference for the full syntax and integration details); as a creator you just save templates in the Templates tab.

Template actions

Templates can contain clickable areas that trigger data sources (the template action map). If your project uses them, buttons inside template HTML can call server functions; ask your developer which action names are wired up.