Dynamic Text Panel 2.2.0

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.

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.