Skip to content
npm

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:

text
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:

html
@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.

A template has:

FieldWhat it is
NameThe identifier elements reference. Must be unique; the editor rejects duplicates.
TitleHuman-friendly display title.
DescriptionWhat the template is for.
Tags (comma separated)For finding it later.
HTML contentThe markup, with {{placeholders}}. Required. A small format icon button (top-right corner of the box) tidies the HTML.
CSSStyles scoped to the template, with its own format icon button.
Template fieldsDeclares the data fields the template expects (e.g. jarStatus or status.code) so pickers can map data onto slots.

The preview panel next to the editor renders the template live against a fixed built-in sample object, so you can see card/option layouts update as you type there's nothing to configure for it.

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:

html
<div class="client-card">
  <strong>{{ item.name }}</strong>
  <span>{{ item.email }}</span>
  <span class="badge">{{ item.status }}</span>
</div>
css
.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 templateclientCard. 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.