Skip to main content

Dynamic Text Panel 2.2.0

· Updated on February 12, 2023
Mikhail Volkov

We released a new version of Dynamic Text Panel 2.2.0. This feature release

  • Added JavaScript Code Editor to add Handlebars helpers and Event handlers.
  • Finished refactoring of internal components.
  • Migrate Styles to Grafana Theme v2.
  • Added {{json @root}} and {{split String ','}} helpers.
  • Updated CSS to fit images to the screen.
  • Supported Internationalization using custom helpers.

JavaScript Code

Community asked - we delivered JavaScript Code Editor to add Handlebars helpers and Event handlers. Take a look at the documentation for examples.

JavaScript code in the Dynamic text panel.

Define Custom Handlebars helper

A custom handlebars helper can be added to replace the field's value using a pattern.

{{replace Test "Pattern" "Replaced"}}

JavaScript Code:

handlebars.registerHelper("replace", (context, pattern, replacement) =>
context.replace(pattern, replacement)
);
How to create a helper to replace text in the returned data.
How to create a helper to replace text in the returned data.

Add Internationalization

Grafana 9 added Internationalization, which is not provided to plugins yet. Meanwhile, we can use the getLocale() method to get a value for the selected locale and show messages from a defined dictionary.

Content:

{{translate "Hello"}}

Default Content:

{{translate "Default"}}

JavaScript Code:

docs/volkovlabs-dynamictext-panel/translate.js
loading...

Getting Started

The Dynamic Text visualization panel can be installed from the Grafana Catalog or utilizing the Grafana command line tool.

For the latter, use the following command.

grafana-cli plugins install marcusolsson-dynamictext-panel

YouTube Tutorial

The Dynamic Text visualization panel lets you define a text template using the data from your data source query.

Markdown, HTML and Handlebars to transform data visualizations.

Release Notes

Features / Enhancements

  • Add JSON helper to show objects and arrays (#121)
  • Update to Grafana 9.3.1 (#122)
  • Update Documentation links (#130, #131)
  • Add Split Helper (#132)
  • Refactor Text Component and Styles (#133)
  • Add JavaScript Code to add Handlebars helpers and Event handlers (#134)
  • Update default Content to {{json @root}} and Code Editor height to 200px (#134)
  • Update CSS to fit images to screen (#135)
  • Add getLocale() parameter to JavaScript Code (#137)

Feedback

We love to hear from you. There are various ways to get in touch with us.

  • Ask a question, request a new feature, and file a bug with GitHub issues.
  • Sponsor our open-source plugins for Grafana with GitHub Sponsor.
  • Star the repository to show your support.