Skip to content
Classic documentation
  • There are no suggestions because the search field is empty.

Applying translation feature when building your application

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. I

n 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.

Graphical user interface, application Description automatically generated
 

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, Save is being applied as the button text and is displayed in the mock-up page.

As the button text is to be based on a translation, you can remove any existing default text.

2. Click on the Translation button in the BUTTON TEXT field. The Insert Translation Key pop-up window is displayed.

3. Select the key required from the list displayed. In this example, the Sv key is selected. Once you have selected a key, the Select button can be selected.

4. Press Select to assign the key to the text field.
Graphical user interface, text, application Description automatically generated

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 application's user interface

You can test the translations you have set to display by opening the application page using the Play a button from the builder bar.

Logo, icon Description automatically generated

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 Play button.

Selecting a language through the page interaction

In addition to setting your application language by changing your browser’s default, you can also let users choose their language directly in the page builder using an interaction. This interaction is called `setLanguage`. By combining it with a Select component (dropdown), you can give users the ability to switch between languages themselves. Below, we’ll walk through how it works and guide you through a simple use case.

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 it 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:

  • Label: come up with something like ‘Select/choose a language’ - it will be displayed in the select field when the language is not chosen yet

  • Options: put down the abbreviations for languages you are going to use, in our case - ‘en’ and ‘nl’

Important: When writing down the abbreviations for languages, use the official ISO code for the country. More about that at the bottom of this article.

4. Open the interactions and click ‘Create new interaction’:

  • Set the trigger to ‘When I change…’

  • Component function: ‘setLanguage’

  • Hit ‘Save’

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 ensure the selected language is interpreted correctly, always use the official ISO language code. These codes are lowercase and typically 2 to 3 letters long.

You can store ISO codes either in the options of your language selector or as a property value on your User model.

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.