Translate Dashboard Elements

This recipe shows how to apply custom translations to a dashboard title, widget titles, telemetry key labels, and axis labels using i18n keys. As an example, we translate a “Weather” dashboard from English to German.

• A ThingsBoard PE instance with custom translation configured
• German (or another target language) added to the custom translation list

Download the Weather dashboard JSON and import it into your instance.

For this example, telemetry is emulated using a Generator rule node with the following function:

var temperature = toFixed(Math.random()*10 + 18, 2);
var humidity = toFixed(Math.random()*15 + 40, 2);
var msg = { temperature: temperature, humidity: humidity };
var metadata = { data: 40 };
var msgType = "POST_TELEMETRY_REQUEST";
return { msg: msg, metadata: metadata, msgType: msgType };

1. Navigate to White labeling > Custom translation tab. Open the translation map for the target language (e.g., German).

2. Click the plus icon to add a new key. Enter:

   Term key	English	German
   custom.weather-dashboard.title	Weather	Wetter

3. Click outside the input field to save.

Now apply the key to the dashboard:

1. Navigate to Dashboards and open the “Weather” dashboard details.

2. Enter edit mode and replace the title with:

   {i18n:custom.weather-dashboard.title}

3. Save the changes.

Switch to a user with German as their interface language to verify the translated title:

Apply the same approach to widget titles, telemetry key labels, and axis labels. First, add the translation keys:

Then assign the i18n keys in the widget configuration:

1. Open the “Temperature and Humidity history” widget in edit mode.

2. Set the telemetry key labels:

   • temperature: {i18n:custom.weather-dashboard.temperature.telemetry-key}
   • humidity: {i18n:custom.weather-dashboard.humidity.telemetry-key}

3. Set the Y-axis labels to the same keys.

4. Set the widget title to: {i18n:custom.weather-dashboard.temperature-and-humidity-widget.title}

5. Save.

Verify by switching to a user with German interface language:

Apply the same technique to other widgets. For example, the “Dew point history” widget: