Translation

Translate to any number of languages.

Translation is as simple as (alt/option) + 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 settings for your Rual cluster.

Translation key

The text that you use for translation key can be very short, something like order_description, 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, like the text you are reading right now.

The translate menu will open, this is a modal with standard four text area input fields each for its own language.

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 on, for example, the field name birthdate.

Translation for fixed texts

In RUAL you can create 2 diferent kinds of translates, translate: by key which can be used in uicomponent pins and value: translate key which can be used in values. 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 to the right you see a combination of blocks where the content of field (in this case from our errormessages) can be set for translation.

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 field name where the error occurred. Both need to be translated. Go to your foreach function 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.

Translate the error

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

Because we use the value: translates we are not able to directly translate the value in the frontend. This is because the value translate is being translated in the backend and will send the translated value to the frontend, where the ui translate will give you a custom translate element.

When you want to translate a value: translate, you have to know the key you want to translate and add it to a ui: translate. When you have added it you can translate it either in the modal that opens in the blueprint, or in the frontend using (alt/option) + click and translate it in the modal that open.

Translate modal frontend

Translate a key using the frontent will open a modal with standard four languages you can translate, just like the modal in the blueprints. The inputs in the frontend are text area's. This can be usefull when your translate is big, like the picture to the right.

The frontend modal also has a revert button, this will revert the translation back to the value that is saved with the key.

Now that you understand how translation works, you can add it to all texts you use in the frontend page. For example the page title using the value: translate. 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.