We released a new version of Dynamic Text Panel 2.2.0. In 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 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 more examples.
Define Custom Handlebars helper
A custom handlebars helper can be added to replace the field's value using a pattern.
JavaScript Code:
handlebars.registerHelper("replace", (context, pattern, replacement) =>
context.replace(pattern, replacement)
);

Add Internationalization
Grafana 9 supports Internationalization, which is not fully exposed to plugins yet. Meanwhile, we can use getLocale()
method to get a value for the selected locale and show phrases from a defined dictionary.
Content:
Default Content:
JavaScript Code:
const messages = {
Hello: {
en: "Hello",
fr: "Salut",
es: "Hola",
},
Default: {
en: "The query didn't return any results.",
fr: "La requête n'a renvoyé aucun résultat.",
es: "La consulta no arrojó ningún resultado.",
},
};
const locale = getLocale();
handlebars.registerHelper(
"translate",
(message) => messages[message][locale] ?? messages[message]["en"]
);
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.
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 to200px
(#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.