Applying translation feature when building your application

Learn about assigning translation keys when building the user interface and switching a language via the interactions.

Updated over a week ago

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.

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

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 now 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 {{SV}}.

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

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 for adding 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 - ‘ENG’ and ‘NL’

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.

Did this answer your question?