Rendering

There are two main concepts to comprehend for the successful use of the Dynamic Text plugin. The first is Render Template and the second is rendering order.

Render Template

Version

The Dynamic Text Panel supports the All data template since version 4.3.0.

Select one of the three available options for the Render Template parameter.

The Render Template option instructs the Dynamic Text plugin on how to apply your template to the fetched data frame.

• Every row. The template applies to every row returned by your query. Your template is rendered as many times as rows are fetched.

• All rows. The query results are passed as a single data field to the Content template. Your template is rendered once. To work with query results as a whole, you can use #each built-in helper to iterate through records.

• All data. The template applies to all rows from the fetched data of all specified data frames.

Render Template	Description
Every row	Every row of the selected data frame
All rows	All rows of the selected data frame
All data	All rows of all data frames

Below you can find some examples to illustrate further.

Every row

For instance, your data source returns a four-column table as follows. To mimic that in the example below, the Static data source is used.

| app  | description                  | cluster | tier     |
| ---- | ---------------------------- | ------- | -------- |
| auth | Handles user authentication. | prod    | frontend |

You can apply the following template for each row to display data.

# {{app}}

> {{description}}

{{#if (eq tier "frontend")}}
Link: <a href="https://{{cluster}}.example.com/{{app}}">https://{{cluster}}.example.com/{{app}}</a>
{{/if}}

Every row option example. Display fetched data using Handlebars, Markdown, and HTML.

All rows

For instance, your data source returns a table with multiple rows as follows. To mimic that in the example below, the Static data source is used.

| title | author        | year |
| ----- | ------------- | ---- |
| Dune  | Frank Herbert | 1965 |
| 1984  | George Orwell | 1949 |

With the All rows option selected, your template might look like this:

| Title | Author | Year |
| ----- | ------ | ---- |
{{#each data}}
| {{title}} | {{author}} | {{year}} |
{{/each}}

All rows option example. Visualize returned data as a table using #each helper.

All data and two other render templates

Below are the illustrations of all three Render templates created using data generated by the Static data source. Follow the order number in the comments, starting from 1.

Render templates differences.

Referencing data in the All data template

Below is an example illustrating how you can reference data in the All data template.

If your data looks like this:

{
  "data": [
    [
      {
        "Metric": "Pace",
        "Values": 234
      },
      {
        "Metric": "Pace",
        "Values": 111
      }
    ],
    [
      {
        "Attitude": 45
      }
    ]
  ]
}

You can reference it using the following code:

Please, modify the code according to my example above (blog and docs).

{{#each data.[0]}}
{{Metric}} - {{#with (lookup ../data.[1] @index)}}{{Attitude}}{{/with}}
{{/each}}

Rendering Order

Below are two schemas of the rendering order in the Dynamic text plugin. They represent the same thing.

The first is oriented toward the general public and the second is targeted to answer developers' questions.

For Users

The Rendering Order for Users.

For Developers

The Rendering Order for Developers.

Rendering details

Reference a specific data element

To reference a specific data element in your templates, use double or triple curly braces. For instance, for the extracted app data field, use the following syntax:

{{app}}

Reference field names with spaces

Field names with spaces should be declared as:

• {{[Field Name]}} where the field name is surrounded by brackets,
• {{'Field Name'}} where the field name is surrounded by quotes.

Display fields with spaces.

Render HTML from data

If you want to render HTML markup returned by the data source, you need to use triple curly braces with the element reference within it like {{{htmlValue}}}, otherwise Handlebars escapes your HTML content.

<ul>
  {{{htmlValue}}}
</ul>

where htmlValue is

<li>foo</li>
<li>bar</li>

Default content

The default content is displayed if the connected data source returns no data. You can use it to provide users with instructions on what to do or who to contact when the query returns an empty result.

Even though your data source returns no data, you can still use the available helpers.

HTML sanitization

HTML sanitization is enabled by default, which makes some elements like <button> unavailable in the content editor.

To disable sanitization, use Grafana's configuration option disable_sanitize_html and set it as true.

For a Docker container and Docker Compose, use it as follows:

- GF_PANELS_DISABLE_SANITIZE_HTML=true