Skip to main content

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

 

 
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. These instructions are part of the technical preview for translating Reactive Web and Mobile Apps. See Technical Preview: Multilingual apps for more information.

    Quick start

    Hers 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

    These instructions are part of the technical preview for translating Reactive Web and Mobile Apps. See Technical Preview: Multilingual apps for more information.

    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 select OK. The translations editor opens.

      Select new language

      Note the language code, as you need it later. For example, for Portuguese (Portugal) the code is pt-PT.

    3. In the translations editor, select 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 on Done when you finish.

      Translation in the translation editor

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

    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. Then, 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 like Button or Dropdown.

    2. Select the Link widget and in the 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. Select (System); then, in the right pane under Client Actions, select SetCurrentLocale. Click on the 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, in the Locale property, enter the code of the language. For example, "pt-PT".

      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 translation

    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. Still in the translation editor, enter the translation in the Translation in (language name) cell.

    3. In the logic to switch the locale, just after the SetCurrentLocale action, add Refresh Data 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.

    Sending feedback

    If you experience issues with this technical preview, let us know by posting a new question with the technical preview tag in Forums.