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.
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.
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
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-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.
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.
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.
If you go back to the registration and deliberately leave the firstname empty, you will still see the untranslated 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:
After adding the translations, the error message already looks a lot better!
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.
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