Refactoring, new helpers, and internationalization in Business Text 2.2.0

We're excited to announce the release of the Business 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 Business 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:

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

You can install the Business Text panel from the Grafana Plugins catalog or using the Grafana command line tool.

Install Business Suite plugins in Cloud, OSS, Enterprise. Getting started with the Business Suite.

For the latter, please use the following command:

grafana cli plugins install marcusolsson-dynamictext-panel

Tutorial

The video reviews the major latest release including the data flow, predefined helpers and numerous examples of the external JavaScript libraries.

The Business Text panel for Grafana. Main features overview in 5.0.0

We have many other tutorials that you can find helpful. You can review all related to this plugin tutorials here.

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).

We’d Love to Hear From You!

Your feedback is invaluable to us, and we’re excited to connect with our community and partners. Whether you have a creative idea, or an issue to report, here are the best ways to reach out:

• Enterprise Partners: Need support or have an urgent request? Submit a Zendesk ticket for fast, personalized assistance from our team.
• Community Members: Have a feature suggestion, or bug to report? Start a conversation by creating a GitHub discussions. We’re all ears!
• Join the Conversation: Stay in the loop and share your thoughts! Subscribe to our YouTube Channel and drop a comment—we’re eager to hear your perspective.

Your input drives our improvement, so don’t hesitate to connect with us!