Translating Your Application

Translate your app with Text Messages, Application Translations, bulk exports, and App Builder editing tools.

Use Text Messages and Application Translations to deliver your app in multiple languages. You can synchronize app translations at any time to replace inline text with references to Text Message components. While building pages, you can use existing messages easily in Page Designer with the Text Messages Picker. When ready, translate strings by exporting and importing them in bulk using standard formats. You can also edit translations in App Builder directly in a language-filterable grid.

• Exploring Woods HR Pages to Translate
  Review the Woods HR pages you will translate from the app’s primary language.
• Enabling the First Translation Language
  Enable text message-based translation and add the first translated language for your app.
• Understanding Initial Text Message Sync
  Understand how the first translation sync replaces inline text with Text Message references.
• Exporting and Importing Translations
  Export and import XLIFF files to translate Text Messages in bulk.
• Determining User's Preferred Language
  Choose how your app determines each user’s preferred language.
• Experiencing App in Another Language
  View the translated app experience driven by the user’s language preference.
• Translating Text as Your App Evolves
  Add new text directly or with Text Messages, then sync before the next bulk translation cycle.
• Synchronizing Text Messages Anytime
  Sync Text Messages to prepare newly added UI text for the next translation update.
• Editing Translations in a Filterable Grid
  Edit translations directly in a filterable grid for small in-house updates.
• Centralizing Reusable UI Text
  Centralize reusable UI text by converting it to Text Messages manually or in bulk.

Review the Woods HR pages you will translate from the app’s primary language.

You create an app in a primary language of your choice. The Woods HR app uses English. For simplicity, it contains only the Employee Directory page shown below with an Interactive Report region and related form page. However, translations work the same for apps of any size.

The companion Employee modal drawer page appears below. HR reps access it from the directory page to view and edit employee details.

Enable text message-based translation and add the first translated language for your app.

When you decide to add the first translated language, go to Shared Components > Globalization Attributes and enable the Translate Application switch as shown below. Use the Text Message-Based option. It's the simplest approach with best support in App Builder and Page Designer.

Next, go to Shared Components > Application Translations and click (Add Language). For example, if some of your end users need to use your app in Italian, you can add the Italian (Italy) (it) language as shown below.

The new language appears along with your application's primary language in the list of language translations your app now supports.

Understand how the first translation sync replaces inline text with Text Message references.

When adding the first app translation language, App Builder automatically creates a Text Message component for each unique translatable string it finds in all your pages. It also updates every place it found translatable text inline to instead reference a new corresponding text message. Lastly, it creates a mirrored entry for every text message in the new target language. This process is known as synchronizing your application's translatable text. It happens automatically when you add a language. You can also trigger it on-demand later when needed.

For example, the Employee Directory page's Title property started as the simple, inline text "Employee Directory". As shown below, after adding the first translatable language the Title property now references a new EMPLOYEE_DIRECTORY text message name using the syntax below. Page Designer shows the translated text "Employee Directory" just below in the Property Editor.

&{EMPLOYEE_DIRECTORY}.

Similarly, column headings on this page like HIREDATE's undergo the same transformation.

If the exact same text appears in multiple pages, all usages get updated to reference the same Text Message component. For example, the P3_HIREDATE page item on the Employee page now also uses the same DATE_OF_HIRE text message as shown below.

Export and import XLIFF files to translate Text Messages in bulk.

You could edit the Italian version of each message one by one to translate it. However, usually translation happens in bulk using industry-standard XML Localization Interchange Format (XLIFF) files. To export the Italian messages for translation in XLIFF format, use the Export as XLIFF option on the three vertical dots menu for that application language on the Application Translations page.

The name of the XLIFF file contains the application id, the source language and the target language. For example, for the Woods HR app with ID 154, the file for the English source and Italian target languages is named f154_en_it.xlf. It contains an XML format like the following with source and target strings. Before translation, each target language string has the same value as its corresponding source.

<?xml version="1.0"?>
<xliff version="1.0">
  <file original="f154_en_it.xlf"
        source-language="en"
        target-language="it"
        datatype="html">
    <trans-unit id="EMPLOYEE_DIRECTORY">
      <source>Employee Directory</source>
      <target>Employee Directory</target>
    </trans-unit>
    <trans-unit id="DATE_OF_HIRE">
      <source>Date of Hire</source>
      <target>Date of Hire</target>
    </trans-unit>
     ⋮
  </file>
</xliff>

You would typically provide this file to a translation service. They return a file with the <target> element text updated with Italian language translations like this:

<?xml version="1.0"?>
<xliff version="1.0">
  <file original="f154_en_it.xlf"
        source-language="en"
        target-language="it"
        datatype="html">
    <trans-unit id="EMPLOYEE_DIRECTORY">
      <source>Employee Directory</source>
      <target>Elenco dipendenti</target>
    </trans-unit>
    <trans-unit id="DATE_OF_HIRE">
      <source>Date of Hire</source>
      <target>Data di assunzione</target>
    </trans-unit>
     ⋮
  </file>
</xliff>

To apply the Italian language translation to your app, go to the Application Translations page. As shown below, click Import Text Messages and supply the XLIFF file name to import.

Choose how your app determines each user’s preferred language.

For example, as shown below, selecting Browser infers the language to use based on the user's browser language settings.

View the translated app experience driven by the user’s language preference.

If Susan the HR Rep logs into the app with her browser set to prefer Italian, she sees the login page in Italian.

When she accesses the navigation menu and visits the Employee Directory page, everything is now in Italian as well.

When she edits an employee like ALLEN she also sees the Employee details page in Italian.

Add new text directly or with Text Messages, then sync before the next bulk translation cycle.

Then, at any time, you can Sync Text Messages to automatically prepare all new text for translation.

• Adding a New Text Message
  Create the Text Message first to choose a meaningful key for new translatable UI text.
• Using the Text Messages Picker
  Pick a Text Message reference for translatable page properties.
• Entering New Text Directly Inline
  Enter new UI text inline and let the next sync create its Text Message automatically.

Sync Text Messages to prepare newly added UI text for the next translation update.

Edit translations directly in a filterable grid for small in-house updates.

You can export the XLIFF any time to have an external translation service provide the missing Italian translations. However, the Grid Edit task in the Text Messages page is handy for in-house translation. You can edit the translated text of multiple messages at once.

After filtering on language, as shown below, you can enter the Italian translations for the three new text messages and click (Save) to apply the changes.

After saving the Italian translations for the latest text you added, a user like Susan running in Italian sees the updates to the page in her preferred language.

Centralize reusable UI text by converting it to Text Messages manually or in bulk.

Using Text Messages to centralize reusable UI text is useful, even if your application does not require translation. Convert each reusable string as needed to a Text Message SOMENAME. Then use &{SOMENAME}. to replace the original text. In Page Designer, you can also click the globe button. For more information, see Using the Text Messages Picker.

Alternatively, you can automatically convert all text values of translatable properties to Text Messages in bulk. On the Text Messages page in Shared Components, click the Convert Application Text link in the Tasks section as shown below. When you click (Convert Text Messages) in the Convert to Text Messages dialog, App Builder creates any new Text Messages required and replaces each original text with the appropriate substitution.

Create the Text Message first to choose a meaningful key for new translatable UI text.

Imagine you are asked to add a new (Increase Salary) button to the Employee page. You can start by creating a new Text Message INCREASE_SALARY as shown below with the text Increase Salary in the primary language.

Pick a Text Message reference for translatable page properties.

You can use the INCREASE_SALARY text message as a new button's label in the Employee page. Start by ensuring the Text Messages Picker is enabled. It's a button with a globe icon that appears next to every property containing translatable text. If you don't see the globe buttons, as shown below, enable them using the wrench toolbar dropdown menu option Show > Text Messages Picker.

Once enabled, you can click the globe icon as shown below to search for and select the text message you want to use.

The Text Messages Picker automatically includes the selected message using the appropriate substitution syntax as shown below and the translated string appears just below: Increase Salary.

Your salary increase is %pct percent, and starts %date

Enter new UI text inline and let the next sync create its Text Message automatically.

You can also continue entering literal text into your page. For example, imagine a requirement emerges to add an info box about data privacy to the top of the Employee form as shown below. You can enter the Title and HTML Code directly into the page as shown below. The figure shows the Data Privacy static content region selected in the component tree and highlights that both its Title and HTML Code contain literal text the developer entered in the application's base language.