HTML¶

The HTML widget shows a block of HTML and CSS that you write yourself. Use it for one-off layouts the other widgets don't cover: a KPI card with a custom layout, a banner, an announcement, help or legal text, or an inline SVG graphic.

See also Text for plain text, Data List for records as rows or cards, and Section for a card with a title bar.

Using it¶

Drop an HTML widget onto the page and write the markup in the HTML field. Add <style> blocks for the CSS; they apply only to this widget. The field also opens in a larger editor window.

To show data, write a template in the markup, for example <b>{$data.kpis.revenue:n;0}</b> or <span>{$params.region}</span>. The block updates when the data changes. Inside a widget that repeats over records, use {$it.<alias>.<field>}. See Page and Portal State.

Logic lives in a JavaScript data source: calculate the values there and show them in the HTML with templates.

Data in templates¶

Values in a template are inserted as HTML, so a value containing < or & is read as markup. To show text literally, use a Text widget.

The markup is not sanitized: <script> tags do not run, but event attributes such as onclick do. Content is clipped to the widget's box.

Tips¶

• Use the theme's CSS variables instead of fixed colours so the block follows light and dark themes, for example var(--surface-background), var(--surface-text), var(--border-color), var(--radius-md) and var(--space-lg). The space, radius and font-size scales run from xs to xxl. Portal CSS classes do not apply inside the widget; variables do.
• Templates have no loops. For a list, make the widget repeat over the records, or have a JavaScript data source return the list as HTML.
• Put {…} templates in the markup only. Braces in <style> blocks are plain CSS. For styling that depends on data, use an inline style="…" attribute.
• To show a literal { or } in the markup, write {{ or }}. A stray single brace makes the template invalid and the widget shows nothing.
• Inserting an array or object directly shows a,b,c or [object Object]; insert its fields instead.

Options¶