Skip to main content

Variables

Dynamic Text Panel provides helpers to support variables. You can also use variables in the JavaScript code and CSS styles.

We thoroughly explained these three types of variables in our Grafana Crash Course.

Helper {{variable}}​

Returns a string array including the currently selected values for a certain variable.

{{variable "hostname"}}

<!-- result: ['server1', 'server2', 'server3']  -->

Check if a user is an admin​

To access nested variables, use curly brackets.

{{#if (contains (variable "{__user.login}") "admin")}}
  User is an admin
{{else}}
  User is not an admin
{{/if}}

Markdown list from variable​

Create a list from the multi select variable.

{{#each (variable "hostname")}}
  - {{this}}
{{/each}}

Dynamic templates using dashboard variables​

Use the lookup helper to create dynamic templates based on dashboard variables.

The following template creates a key-value pair from every selected value in the props dashboard variable.

book:
{{#each (variable "props")}}
  {{this}}: {{lookup @root this}}
{{/each}}

JavaScript code​

Use the replaceVariables function to replace dashboard variables in the JavaScript Code.

const bonjour = replaceVariables("${variable}");
console.log(bonjour.toUpperCase())

CSS styles​

Dashboard variables are replaced automatically in the CSS styles.