Professional Edition
ThingsBoard Documentation
Cloud Professional Edition Community Edition Edge IoT Gateway License Server Trendz Analytics
Try it now Pricing
Documentation > White-labeling > Custom Translations
Getting Started
Guides Installation Architecture API FAQ

On this page

Custom Translations

ThingsBoard PE Feature

Only Professional Edition supports Custom Translations feature.
Use ThingsBoard Cloud or install your own platform instance.

ThingsBoard Custom Translations feature allows you to upload alternative to existing language translations and extend the translation to specific GUI elements on the dashboards.

Using Locale Files

  • Step 1. Open Custom Translation menu.
  • Step 2. Choose language from dropdown menu. For example, Italian.
  • Step 3. Download locale file.
  • Step 4. The locale file presents all possible translations for the chosen language.
  • Step 5. Change language in the User Profile for applying settings.

Custom menu

  • Step 1. Specify custom translation in the translation map.
  • Step 2. Navigate to the Home page and check translated menu.

Examples of the custom translation map:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "home": {
    "home": "Pagina principale di un sito web"
  },
  "custom": {
    "my-dashboard": {
      "title": "Dashboard per esempi"
    },
    "my-widget": {
      "name":"Widget per dispositivo sensore",
      "label-text": "Etichetta per dispositivo sensore",
      "low-temperature": "Bassa temperatura",
      "high-temperature": "Alta temperatura",
      "normal-temperature": "Temperatura normale"
    }
  }
}

Custom Dashboard Title

  • Step 1. Specify new custom translation for the dashboard and widgets.
  • Step 2. Go to the Dashboard page. Create new dashboard or chose existing one. Open the dashboard menu.
  • Step 3. Translate dashboard title. Note the required syntax: {i18n:custom.my-dashboard.title}.
  • Step 4. Check the translated title.

Custom Titles

  • Step 1. Go to the dashboard. Open an edit mode.
  • Step 2. Open widget edit mode.
  • Step 3. Apply translation to the widget title - {i18n:custom.my-widget.name}, and entity label column title - {i18n:custom.my-widget.label-text}.
  • Step 4. Check translated titles.

Custom Translation in Widgets

  • Step 1. Specify new custom translation for the telemetry data.
  • Step 2. Open widget settings and go to the data key configuration.
  • Step 3. Use post-processing function for writing logic with custom translation. The post-processing function requires quotes for the i18n.
  • Step 4. Get the message from translation map if temperature is high.
  • Step 5. The same way custom translation can be used ih the cell content function.
  • Step 6. Get the message from translation map if temperature is low.
  • Step 7. Choose HTML Value Card widget.
  • Step 8. Choose telemetry data.
  • Step 9. Write some logic with custom translation. HTML field requires quotes for the i18n.
  • Step 10. Use quotes for the i18n.
  • Step 11. Check the result in the HTML Value Card.

Examples of using custom translation in the post-processing function:

1
2
3
4
5
6
7
if(value>70){
    return "{i18n:custom.my-widget.high-temperature}";
}else if(value<20){
    return "{i18n:custom.my-widget.low-temperature}";
}else{
    return "{i18n:custom.my-widget.normal-temperature}";
}

Examples of using custom translation in the HTML Vale Card:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
    var description = document.getElementsByClassName('description')[0];
    var temperature = ${temperature};
    if(temperature>70){
        description.innerText = "{i18n:custom.my-widget.high-temperature}";
    }else if(temperature<20){
        description.innerText  = "{i18n:custom.my-widget.low-temperature}";
    }else{
        description.innerText = "{i18n:custom.my-widget.normal-temperature}"
    }
    
</script>
   
<div class='card'>
    <div class='content'>
        <div class='column'>
            <h1>Sensor Device</h1>
            <div class='value'>
                Temperature: ${temperature:0} °C
            </div>    
            <div class='description'>
            </div>
        </div>
        <img height="80px" src="http://icons.iconarchive.com/icons/iconsmind/outline/512/Temperature-icon.png" />
    </div>
</div>

For now, Custom Translation is not available in the HTML Card, Control Widgets, Files widgets, Date widget, Gateways widgets, Scheduling widgets.

Video Tutorial

See video tutorial below for step-by-step instruction how to use this feature.


Next steps