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
  • You can add other languages to your app and translate the text in the app, to support users in languages other than the default.

    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

    Service Studio has tools to translate your app. To let the users use your app in their language, you need to:

    1. Add a new language and then translate the text in the module by using the Service Studio translation editor. An app may have more than one module with user interface elements, and you need to translate all such modules.
    2. Create a language switcher to let users change the language in the app.

    Add a new language and translate 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. See Translating with the translation editor for more information on how to use the editor.

      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

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

      Translation in the translation editor

    When you're happy with the translation, move on to creating a language switcher.

    Create a language switcher

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

    A language switcher lets your users change the UI language. To create a link to switch language in the app, 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

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

      Be careful with SetCurrentLocale Server Action in the Reactive Web and Mobile Apps UI logic, as this server action requires connection to the server and doesn't work offline. Use SetCurrentLocale Client Action whenever possible.

    4. In the SetCurrentLocale Client Action you just added, in the Locale property, enter the code of the language. For example, "pt-PT".

      SetCurrentLocale and the Locale property

      To let users switch back to the default UI language, create a language switcher with SetCurrentLocale Client Action set to the default locale code (en-US).

    5. Publish the app and select on the link you just created. The language in the app switches after you select the links, but you can use other UI elements to create the switcher, for example a combo box or buttons.

    Edit existing translation

    Use the translation editor to edit existing translations. In Service Studio, go to the Data tab, right-click on the Multilingual Locales, then select Edit Translations.

    You can also export and import text for translation.

    Get 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

    Send feedback

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