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:
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.
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'}}

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.

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