Internationalization service and application to Dashboards

1 Introduction
2 Access from Control Panel
3 Use of Internationalization Service in Dashboards
4 Internationalization REST API

Introduction

A new Internationalization Service has been incorporated that allows you to visually create translations in several languages from the Control Panel and access them from a REST API.

This new service is also fully integrated with the Dashboard Engine, which allows internationalizing all the chains that appear on a Dashboard.

Access from Control Panel

To access this functionality, go to the menu option DEV TOOLS>Internationalizations Management.

There, you can create a new Internationalization by clicking the New Internationalization button.

To create one, add the identifier and description of the internationalization.

Then, you can start adding languages with the Add Language button, being able to search for the language you want to add.

After this, you can complete the JSON for each of the languages, in addition to:

Load a JSON with the Select file to upload button.
Download the generated JSON to be able to use it in another internationalization or have it saved locally, with the Download button.
Place the key-value elements of the JSON to ease reading and editing it with the Beautify button.

Once you have added one or several languages with their respective JSONs, you can select the default language with which you want to load the page firstly.

To save the changes, you must click on the New button and create the internationalization.

Use of Internationalization Service in Dashboards

To use the internationalization service, you have to configure or create a new Dashboard. In the creation UI of the Dashboard, you will have a multiple selector to select one or more internationalizations to use.

When several internationalizations are selected, bear in mind that the default language will be the one marked in one of them.

NOTE: To be sure of which language will be loaded by default, we reocmmend to put the same one in all the internationalizations used for a Dashboard.

Once the changes have been saved, you can use internationalization. To do this, open the Dashboard editing window.

In this Dashboard, two pages have been created, and a Gadget Template and a Table have been added to one of them.

The texts could be literally added and appear only in one language, but if these texts are replaced by the JSON keys of the internationalization created for the Dashboard, they can be translated into the desired languages.

You can also specify the language with which you want the Dashboard to be displayed by passing the ?lang= parameter in the URL.

Translate elements in HTML

If you want to translate added text in the html, you simply have to put {{"JSONKeyValue" | translate}} in the text between the desired tags.

Internationalize titles

To edit the Dashboard title, you access the Configuration menu, and put in the title the key that you have created in the JSON for its translation:

This way, by accessing the different configuration menus of the pages and the Gadgets, you can edit the title of each element.

Internationalize tables

To internationalize the name of the fields in the tables, you need to access the window for editing them, and replace the text of the name of the fields with the key entered in the JSON.

Create buttons to change the Dashboard language

To create buttons that dynamically translate all internationalizable elements, you can add a Gadget Template and create different buttons by translation, in addition to the function that changes the language.

To do this, you must add to the functionality of the $translate.use(lang); button where lang is the code of the language to which you want to change, for example 'ES'.

This way, by simply clicking on the button, the internationalizable elements will be translated:

Internationalization REST API

You can also operate with internationalizations through its REST API:

From here, you can know the identifiers of all available internationalizations, create new ones, and delete and modify those of which you are the owner.

Create an internationalization

To create an internationalization, the parameter that you have to pass is a JSON of the internationalization model. Take into account here the format of the jsoni18n element, in which you have to escape the quotes for proper operation:

"jsoni18n": "{\"languages\":{\"ES\":{\"Hi\":\"Hola\"}, \"EN\":{\"Hi\":\"Hello\"}}, \"default\":\"ES\"}"

This way, within languages, we will have the different codes of the desired languages with their respective key-value translations, and the default language code marked in default.

If you make a mistake in the format of the jsoni18n element, you can see an example of its format in the error message that you get. If for example you put "jsoni18n": "", the error message shown is:

Modify an internationalization

To add or modify the translations and languages, use the PUT method which passes, in addition to the internationalization identifier to be edited, the JSON that defines the jsoni18n element of the model. Take into account the JSON format because, unlike its creation format, here it is not necessary to escape the quotes:

{"languages":{"ES":{"Hi":"Hola", "Bye": "Adiós"}, "EN":{"Hi":"Hello", "Bye": "Good Bye"}}, "default":"ES"}

As in the creation, if you insert an invalid value for jsoni18n, an example of the correct format will appear in the error message. If you send, for example, {}, the error will show the following:

See the translations of the keys of an internationalization

TBA