Dynamic Text Panel 2.2.0

We're excited to announce the release of Dynamic Text Panel 2.2.0. This feature release includes the following:

• Added the JavaScript code editor supporting Handlebars helpers and event handlers.
• Completed the refactoring of internal components.
• Migrated styles to Grafana Theme v2.
• Added support for the {{json @root}} and {{split String ','}} helpers.
• Updated CSS styles to fit images to the screen.
• Added support for internationalization using custom helpers.

JavaScript code editor

We analyze requests from our community with a passion and appreciate the feedback. This time, we added support for Handlebars helpers and event handlers that you can add in the JavaScript code editor. For examples, please see our documentation.

JavaScript code in Dynamic Text Panel.

Define custom Handlebars helpers

You can add a custom Handlebars helper to replace the field's value according to some 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 offers internationalization, which plugins do not yet have full access to. Meanwhile, you can use the getLocale() method to get a value for the chosen locale and display terms from a defined dictionary.

Content:

{{translate "Hello"}}

Default Content:

{{translate "Default"}}

JavaScript code:

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

loading...

Getting Started

You can install Dynamic Text Panel from the Grafana Plugins catalog or using the Grafana command line tool.

For the latter, please use the following command:

grafana-cli plugins install marcusolsson-dynamictext-panel

YouTube Tutorial

Dynamic Text Panel is a Grafana visualization plugin that converts plain text and table data into visually appealing, easy-to-read information cards. You can use variables, Markdown, and Handlebars to customize the look of the outputted cards.

The Dynamic Text Panel plugin allows you to construct a text visualization template from the values of a dataset returned by a data source query.

Markdown, HTML and Handlebars to transform data visualizations.

Release Notes

Features / Enhancements

• Added the JSON helper to show objects and arrays (#121).
• Added compatibility with Grafana 9.3.1 (#122).
• Updated links in the product documentation (#130, #131).
• Added the Split helper (#132).
• Refactored the text component and styles (#133).
• Added JavaScript code to add Handlebars helpers and event handlers (#134).
• Updated the default content to {{json @root}} and the code editor's panel height to 200px (#134).
• Updated CSS to fit images into the screen area (#135).
• Added the getLocale() parameter into JavaScript сode (#137).

Feedback

We're looking forward to hearing from you. You can use different ways to get in touch with us.

• Ask a question, request a new feature, or report an issue at GitHub issues.
• Subscribe to our YouTube Channel and leave your comments.
• Sponsor our open-source plugins for Grafana at GitHub Sponsor.
• Support our project by starring the repository.