JavaScript Code
JavaScript Code allows adding Handlebars helpers and Event handlers.
Version
Supported since Dynamic Text panel 2.2.0.
Parameters
Parameter | Description |
---|---|
data | Data from data sources. Depends on the selected Every Row and All Rows option consists of one or many rows of data. |
getLocale() | Returns user's locale: 'en', 'fr', 'es', etc. |
handlebars | Handlebars library. |
timeRange | Time range of the current dashboard. Added in 3.1.0. |
timeZone | Time zone of the current dashboard. Added in 3.1.0. |
locationService | The locationService works with browser location and history. Added in 3.1.0. |
replaceVariables | The replaceVariables() function to interpolate variables. Added in 3.1.0. |
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)
);

Event Handler
A custom event handler can be added to react to a button click.
<button onclick="myFunc()">{{test}}</button>
JavaScript Code
myFunc = () => {
alert("Bonjour!");
};
Internationalization
Grafana 9 supports Internationalization, which is not fully provided 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
docs/volkovlabs-dynamictext-panel/translate.js
loading...
Time Zone and Range
Display the selected dashboard, browser time zone and range in Grafana.
Content
<h2>Dashboard {{tz}}</h1>
<h2>Browser {{browser}}</h1>
```json
{{{json (range)}}}
```
JavaScript Code
handlebars.registerHelper('tz', () => timeZone);
handlebars.registerHelper('range', () => timeRange);
handlebars.registerHelper('browser', () => Intl.DateTimeFormat().resolvedOptions().timeZone);
