Skip to main content

Content

In the code editor, you can define the parsing commands, or let's say, define a visualization template for your data. To reference specific data elements in your templates, use double or triple curly braces.

To display a value from the app field, use the following syntax:

{{app}}

The Render template toggle allows you to define how the template is applied:

  • Every row - a template is applied to each row in particular within the queried dataset.
  • All rows - a template is applied to the entire dataset.

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>

Reference field names with spaces​

Field names with spaces should be declared as {{[Field Name]}} or {{'Field Name'}}

Display fields with spaces.
Display fields with spaces.

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.

The rendering order​

The content is rendered by the plugin in the following order: Handlebars > Markdown > Sanitized HTML (unless disabled), followed by the final result.

Dynamic Text Panel: rendering order.
Dynamic Text Panel: rendering order.

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