Learn about assigning translation keys when building the user interface and switching a language via the interactions.
When you are building your application in the pages module, you can apply a translation key to the individual fields, buttons etc. in any of the components you are using. For example, if you create a Save button in a multilingual application, you need to assign the key so that any available translations are displayed based on the user’s browser interface. In our example below, a key has been defined as Sv in Translations. The following provides an example that explains how you can assign the Sv key to a button.
|
1. In the Pages module, navigate to the required page and click on a component. In the above, a button component is selected. In this example, the text, As the button text is to be based on a translation, you can remove any existing default text. |
|
2. Click on the |
|
3. Select the key required from the list displayed. In this example, the Sv key is selected. Once you have selected a key, the |
|
4. Press |
|
|
|
5. As shown above, the selected key is displayed in the button text field. The key is shown contained in curly brackets . Click x in a key field to remove a key. For example, to remove the key SV in the above example, click on x to remove.  |
When working with text fields, you can:
-
Add or create a key as required by repeating the steps described above
-
Include more than one key in a field
-
Add additional keys using the Manage translations button to open the Translations feature.
TIP! You can also click on the Manage translations button to open the translations feature. The Translations feature is displayed and you can, for example, check what keys are assigned to which terms, or add a new key and term when creating a new text field.
Testing translations in an applications user interface
|
You can test the translations you have set to display by opening the application page using the |
|
The language default set in your browser triggers the language displayed in your application’s interface. If you want to check other translations, set the language default in your browser to the required language before pressing the |
Selecting a language through the page interaction
Besides setting your application language via changing your browser’s language, there is an option of selecting it through the interaction in your page builder. This interaction is called ‘setLanguage’, and using the select tool with a dropdown you can enable users to switch between languages. Let’s dive deeper into the explanation and learn more about it with a quick use case guide.
|
1. First of all, we need to make sure to set the primary and secondary languages in our application. Go to ‘Tools’ > ‘Translations’. |
|
|
|
2. Choose the languages you’ll be using for your application. In our example, we chose English as a primary language and Dutch as the secondary. Then add the keyword for translation and set values for them in both languages. Use the Add button on the right to add more of them. |
|
|
|
3. Go to the page builder and open a page. Now we are going to add and set the Select component. Drag it onto the page’s canvas and click once on it to see options in the sidebar. In options fill in the following:
Important: When writing down the abbreviations for languages, use the official ISO code for the country, more about that on the bottom of this article. |
|
4. Open the interactions and click ‘Create new interaction’:
|
|
|
|
5. Let’s add a Title component below the Select. Click once on it. In the content field, hit the Insert Translation Key icon and choose the key we’ve created at the start of this guide. |
|
|
|
6. To make sure everything works properly, press Play button to compile the page. Now you are able to translate the content from English to Dutch and back. |
|
|
Official ISO language codes
To make sure your selected language is parsed properly, we have to make sure we use the official ISO code, these are always lowercase, and often 2 to 3 letters long.
ISO codes can either be saved in your language selector option field, or saved defined as a property value on your User model.
examples are:
|
ISO language name |
ISO code |
|
English |
en |
|
Dutch |
nl |
|
French |
fr |
|
German |
de |
|
Spanish |
es |
|
Chinese |
zh |
|
Arabic |
ar |
|
Portugese |
pt |
|
Japanese |
ja |
For more information, please refer to this Wikipedia article on ISO language codes.