Translations
Container Compatibility
This feature is compatible with version 4.20 and later of the JourneyApps Container.

Edit Translations Files

A language can be added to your app via the Add language action in OXIDE. This initializes a YAML file for the language, which stores the language's translation strings.
The following languages are currently supported:
  • English (US)
  • German
  • Spanish (Latin America)
  • French
  • Italian
  • Japanese
  • Korean
  • Dutch
  • Portuguese (Brazil)
  • Russian
  • Swedish
  • Chinese (Simplified)
YAML files can be accessed in OXIDE via the command palette, or in the Languages section in the App Tree panel.
An example translation file is given below:
# translations/es-419.yml
Name: Español
NameShort: Esp.
common:
months:
January: Enero
February: Febrero
March: Marzo
April: Abril
May: Mayo
June: Junio
July: Julio
August: Agosto
September: Septiembre
October: Octubre
November: Noviembre
December: Diciembre
greeting: ¡Hola {name}!
YAML oddities
YAML has some standards that you might run into:
  1. 1.
    Words such as YES, yes, No, etc are reserved and will break your app if you use them
  2. 2.
    The colon (:) is a reserved symbol, so your translation needs to be surrounded by quotes if you have a colon in your string
  3. 3.
    Given the above, it's HIGHLY recommended that you always enclose your strings in quotes
  4. 4.
    Quotes themselves are reserved characters in YAML and need to be escaped using a quote. This means you may end up with a translation entry like this**:**
view.path.string: 'YAML has its quirks and it''s important to be aware of them.'

Call Translation Resources

Strings can be translated using the JavaScript/TypeScript t(key, params) function. The t function accepts a translation key and an optional string interpolation hash. The current locale is used to find the appropriate translation. If a translation cannot be found then key will be returned and a warning logged to the console.

Translations from JavaScript

Example view XML:
<view title="JS Translations">
<var name="name" type="text" />
<var name="month" type="text" />
<var name="greeting1" type="text" />
<var name="greeting2" type="text" />
<text-input bind="name" required="false" />
<info>month: {month}</info>
<info>greeting1: {greeting1}</info>
<info>greeting2: {greeting2}</info>
<button label="Demo Translations" on-press="$:foo()" validate="false" />
</view>
Example view JavaScript:
function foo() {
view.month = t("common.months.January");
view.greeting1 = t("greeting", {name: "Joe"});
view.greeting2 = t("greeting", {name: view.name});
}

Translations from XML

The translation function can also be accessed from view XML.
Example view XML:
<view title="XML Translations">
<var name="name" type="text" />
<text-input bind="name" required="false" />
<info>Month (XML): {$:t("common.months.February")}</info>
<info>Greeting 1 (XML): {$:t("greeting", {name: "Joe"})}</info>
<info>Greeting 2 (XML): {$:t("greeting", {name: view.name})}</info>
</view>

Enable a language for app users

To enable a language so that it is selectable by app users, fire the Enable language action via the command palette or by right-clicking on the YAML file in the App Tree panel.
Copy link
On this page
Edit Translations Files
Call Translation Resources
Translations from JavaScript
Translations from XML
Enable a language for app users