Translation

This tutorial tells you all about the translation options in Rual Studio. After some basic theory we will show you how it works using the error messages from the previous tutorial: display error messages.

Translation is as simple as ALT + click

By using special blocks in the blueprint, you can give every frontend text as many translations as you like. The language shown is either the language the browser is set to, a language menu on your website, or a language key set in the user. You can select this in the setup wizard for your Rual cluster.


setup wizard

The text that you use for translation can be very short, something like order_description can be used as a key in your blueprint, and you can add a whole paragraph to that in the frontend, a few sentences long. Capitals, spaces and interpunction are added in the translation.

altclick menu english
altclick menu dutch

In order to add a translation, you select the key in the frontend (in this case hello_world) and click your left mouse button while holding the alt key on your keyboard.
Please note that you need a specific scope to open the language menu. If you have access to Rual Studio, you are also able to change and add translations in the frontend.

The translate menu will open, you can type in the language code, and the translation. You can also copy the translation to this field, which is handy if you need to add a lenghty description. The language menu can be opened on the same spot and more languages can be added. Of course you will keep seeing the language that you have selected in the wizard.

Translations are often context specific. That's why we have chosen to enable translations in the frontend. Once you have translated a specific key, it is used everywhere. So you don't have to track down every appearance of, for example, the fieldname birthdate.

Use any language

There is no limit to the number of different languages you can use. We advise to use the two-letter code for languages (ISO 639-1). If you wish you can detail these further to en-gb and en-us for example.
The system will check if a translation in the preferred language is available. If not, it will fall back to English.

Translation of fixed texts

Below you see the two blocks that can be used to indicate a translatable key in your blueprint code. If you click on the translation: key field in these blocks you can select one of the keys you already defined or define a new one. The system will show a menu like the one on the right, showing a line for every language that you have used in your cluster. This way you can add translations at once in the blueprint.

fixed translation blocks
translation menu
Translation of dynamic texts

In order to translate the contents of records in your database, you can use dynamic translations. In the picture below you see a combination of blocks where the content of field (in this case from our errormessages) can be set for translation.


dynamic translation blocks

Example

To finish this tutorial, we go back to our error messages. You remember that the failed pin gives an array of errors, each consisting of an object with the description of the error and the fieldname where the error occurred. Both need to be translated. Go to the function showErrorMessages and change the concatenated values to translatable values. The custom: value blocks in between are not empty, these contain a space so the concatenated text has proper spacing.
Please note that we remove the "in:" text that we used before.


show error messages function

If you go back to the registration and deliberately leave the firstname empty, you will still see the untranslated message:


error message

We will add the translations in the frontend. You can do this by using alt+click on the errormessage. If this does not work (not all operating systems support this in modals) you can close the modal and use alt+click on one of the fieldnames in the datatable. You can type any key you want to translate there:

translate firstname
translate error

After adding the translations, the error message already looks a lot better!


error message translated

Next step

Now that you understand how translation works, you can add it to all texts you use in the frontend page. To translate the "Hello World" page title and the header text for example, you need to use the blocks with the orange border as shown in the picture below. For the datatable fields, you just click on the column headers in the frontend page to add a translation.


hello world translated

What we want to do now, to make it really nice, is to show the error message next to the field, and to make the text red to draw more attention to it. We will show you how to add styling in the tutorial: styling