Dynamic HTML Component

Dynamic HTML component allows converting a data source to almost any HTML you would like using a template.

In the simplest case you can specify static HTML or markdown. For advanced use-cases where you want to use a dynamic tbl data source you can use mustache.js templates. The templates allow mapping from column names into HTML generation as shown below:

Mustache - Template

The mustache templating system uses mustache.js, this allows templates like those shown below.

Mustache is a logic-less template syntax. It works by expanding tags in a template using values provided in a hash or object. We call it "logic-less" because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.

Example: The tbl variable holds the data from the query, to display it you iterate the rows:

<ul>
{{#tbl}}<li>{{name}}</li>{{/tbl}}
</ul>

Concepts

Tags are indicated by the double mustaches {{Tag}}.
A {{name}} tag in a basic template will try to find the name key in the current context. If there is no name key, the parent contexts will be checked recursively. If the top context is reached and the name key is still not found, nothing will be rendered.
All variables are HTML escaped by default. If you want to return unescaped HTML, use the triple mustache: {{{name}}}.
By default a variable "miss" returns an empty string.
Sections render blocks of text one or more times {{#person}} {{/person}}. If the person key exists and has a non-false value, the HTML between the pound and slash will be rendered and displayed one or more times. When the value is a non-empty list, the text in the block will be displayed once for each item in the list.

Render raw HTML

By default mustache escapes HTML in the variables. To prevent that escaping use triple {{{}}}

| Name         |  HTML raw |
|--------------|-----------|
{{#tbl}} 
| {{name}}  | {{{html}}} |
{{/tbl}}

Empty Result

You can use the following syntax to handle the empty case:

{{#tbl}}
<ul>
{{#tbl}}<li>{{name}}</li>{{/tbl}}
</ul>
{{/tbl}}
{{^tbl}}<p>No Users</p>{{/tbl}}

Single Row

To access a single row you can use .number:

Hello {{tbl.0.name}}