applying translation keys, multi

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 multi-lingual 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.


You can also click on the button 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 display by opening the application page using the Play 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.

Did this answer your question?