Skip to main content

 

 

 

 
Language:

 

 
 
 
OutSystems

Translate your app

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Translate the interface of your app to other languages to let more users use your app.

    Quick start

    Here is a quick start to help you translate your app. To let the users use your app in their language, you need to:

    1. Add a new language and translate the text in the app by using the Service Studio translation editor.

    2. Create a language switcher to let users change the language in the app.

    3. If your app uses Static Entities, check Working with Static Entities for more information.

    Adding a new language and translating the text

    To add a new language and translate your app, do the following in Service Studio:

    1. Go to the Data tab and right-click on the Multilingual Locales. Then, select Add Locale. The Select Locale window opens.

      Add new language for translation

    2. Select a locale and then click OK to open the translations editor.

      Select new language

      Make note of the language code, since you will need it later. For example, for Portuguese (Portugal) the code is pt-PT.

    3. In the translations editor, select the Show Translate option in the filter list to see all text that needs translation.

      Shows text that needs translation

      See Translating with the translation editor for more information on how to use the editor.

    4. Translate the text in the Translation in (language code) column. Click Done when you are finished.

      Translation in the translation editor

    After you finish translating the text in your app, you then need to create a language switcher to show the available translations.

    Translate the text in all modules of your app. This is important as an app can have multiple modules with user interface elements.

    Creating a language switcher

    A language switcher lets your users change the language of the app. To create a language switcher, do the following:

    1. Drag a Link widget to a screen and enter the language name in the Text part of the Link.

      Link with a language name

      The example shows how to use the Link widget to change the app language. You can create the same action with other widgets, including Button and Dropdown.

    2. Select the Link widget to view its properties. In the On Click list, select New Client Action. New Client Action opens for editing.

      New client action from the list

    3. With the logic editor open, go to the Logic tab and expand the (System) section. Locate the SetCurrentLocale Client Action and drag it to the logic flow.

      SetCurrentLocale in the Logic tab

      If you can't find the SetCurrentLocale Client Action, you need to reference it first. Press Ctrl+Q to open the Manage Dependencies window and select (System). In the right pane under Client Actions, select SetCurrentLocale and click Apply to confirm. You can now use SetCurrentLocale Client Action in your app logic.

      SetCurrentLocale Client Action in Manage Dependencies

      Keep in mind that SetCurrentLocale Server Action doesn't work offline. Use SetCurrentLocale Client Action whenever possible.

    4. In the SetCurrentLocale Client Action, enter the code of the language (for example, "pt-PT") in the Locale property.

      SetCurrentLocale and the Locale property

      If you have translations from Static Entities, add Refresh Data after SetCurrentLocale. For more information see Working with Static Entities.

    5. Publish the app and select your link to change the language of the app.

    Editing existing translations

    Use the translation editor to edit existing translations. You can also export and import text for translation.

    Getting the identifier of the current language

    You can get information about the current language with the GetCurrentLocale built-in function.

    GetCurrentLocale function in the expression editor

    Working with Static Entities

    Follow these steps to translate the text in Static Entities and show the translation in the app.

    1. In the translation editor, search for the text you want to translate and set Behavior to Translate.

      Translation editor

    2. While still in the translation editor, enter the translation in the Translation in (language name) cell.

    3. In the logic to switch the locale, add Refresh Data just after the SetCurrentLocale action and select the Static Entity.

      Refresh of Static Entity

    Switching back to the default language

    To let users switch back to the default UI language, create a language switcher that sets the locale code to en-US.

    • Was this article helpful?