LogoLogo
What's NewDeveloper CommunitySupportStatus
  • 🚀Get Started
    • What is JourneyApps Platform?
    • Tutorial: Build your First App
      • 1. Introduction
      • 2. Create a new App
      • 3. OXIDE IDE Overview
      • 4. Hello World app
      • 5. The Data Model
      • 6. View Components
      • 7. Queries and Data Sync
      • 8. Simple Navigation
      • 9. View Stack
      • 10. Input Validation
      • 11. View Parameters
      • 12. Data Manipulation
      • 13. Responsive Apps
      • 14. Styling
      • 15. Lists
      • 16. GPS Capturing
      • 17. Relationships
      • 18. Multiple User Roles
      • 19. Deployment and Users
      • 20. Version Control
      • 21. CSV and APIs
      • 22. Conclusion
    • JourneyApps Platform Fundamentals
      • Creating a New App
        • Git-enabled Apps
      • What are Views?
      • What is the Data Model?
      • JourneyApps Syntax Basics
      • Access the Database (DB)
        • Manipulate DB Objects
        • Query DB Objects
      • View Navigation
        • Deep Linking
      • CloudCode Overview
      • OXIDE (Online IDE)
  • 💻Build your App
    • JourneyApps Syntax
      • Syntax Basics
      • Access the DB
      • View Navigation
      • Async & Await
      • TypeScript Apps (Beta)
        • runtime-build package
        • TypeScript App Troubleshooting
      • What's New in V4
        • Updating to the V4 API
    • Configure your Data Model
      • What is the data model?
      • Reference: model
        • field
        • belongs-to
        • has-many
        • index
      • Data Rules
        • Data Buckets
        • Sync Rules - Limit data synced to devices
        • Data ACLs - Limit access to data
        • Real-world example for Data Rules
        • ❔FAQs
        • Migrate to Data Rules
      • App Indexes
      • Webhooks
    • UI Components
      • All UI Components
        • actionSheet
        • Attachments
        • button
        • button-group
        • capture-coordinates
          • marker
          • marker-query
        • capture-file
        • capture-photo
        • capture-signature
        • card
          • accent
          • action
        • columns
          • column
        • component
        • context-menu
          • divider
          • item
        • CSV
        • date-input
        • datetime-input
        • dialog
          • body
        • display-3d-model
          • 📖display-3d-model Guides
            • Guide 1: Initialize and layout a 3D model in a view
            • Guide 2: Control playback position
            • Guide 3: Troubleshooting controls
        • display-coordinates
        • display-file
        • display-image
        • display-photo
        • display-signature
        • heading
        • html
          • HTML Advanced Topics
          • ❔HTML FAQs
          • 📖Guide: HTML & JourneyApps iFrame Client
        • icons
        • info
        • info-table
          • row
        • journey.photos (capture multiple photos)
        • JourneyPrinter (print PDFs)
        • grid
          • cell
          • 📖grid Examples
        • list
          • list-item
            • accent
            • asset
            • pills
              • pill
            • action
        • multiple-choice-checklist
        • navigation (Navigation drawer)
          • general-section
            • item
          • section
            • item
              • item
          • ❔navigation FAQs
        • notification
        • object-dropdown
        • object-list
          • action
        • object-repeat
        • object-table
          • action
          • column
            • action
            • edit-boolean
            • edit-date
            • edit-datetime
            • edit-integer
            • edit-number
            • edit-select
            • edit-text
            • edit-time
            • edit-typeahead
              • action
            • header-action
          • column-group
          • empty-action
          • 📖object-table Guides
            • Actions
            • Cell callouts
            • Column groups
            • Columns
            • Controlled object-table
            • Controls
            • Copy & paste data
            • Edit cells
            • Filters
            • Frozen columns
            • Fullscreen object-table
            • Mode
            • State
            • Styles
        • optionList
        • PhotonSync (transfer data offline)
        • power-bi
          • 📖Guide: PowerBI Embedding
        • scan-barcode
        • shortcut
        • sidebar
        • single-choice-dropdown
        • single-choice-radio
        • template
        • text-input
        • time-input
        • toggle
        • view
      • JS/TS Events
      • Show / Hide UI Components
      • View Templates
      • XML Fields (Attributes)
        • align-content
        • align-controls
        • align-label
        • bind
        • clear-button-visibility
        • control-order
        • disabled
        • error-message
        • icon-position
        • id
        • hide-if
        • modifier-text
        • label
        • label-case
        • label-color
        • on-change
        • on-press
        • placeholder
        • required
        • show-if
    • JS / TS APIs
      • Attachment
      • Bluetooth (Beta)
      • Broadcast
      • component
      • CSV
      • DB
      • HardwareBarcode
      • journey
        • journey.config
        • journey.container
        • journey.device
        • journey.diagnostics
        • journey.dialog
        • journey.files
        • journey.hardware
        • journey.photos
        • journey.runtime
        • journey.sensors
        • journey.viewStack
      • JourneyPrinter
      • KeyboardBarcode
      • LocalDB
      • NFC
      • OnlineDB
      • PhotonSync
      • SerialPort
      • ShortcutManager
      • TCPSocket
      • user
    • Extend your App with Custom Code
      • App packages
        • App packages overview
        • PDF report package
        • TypeScript library & unit tests
        • Manage External Dependencies
      • Custom HTML
    • Style & Customize your App
      • Style & configure UI components
        • Overview
        • Understand extendable themes
        • Use themes on a view
        • Theme specific components on a view
        • Examples
        • Debugging
        • ❔FAQs
      • Change your App Font
      • Custom Branding
        • Custom Container Features
        • Special Requirements for iOS Containers
    • Integrate your App
      • Backend integrations with CloudCode
      • Barcode Scanning
        • Barcode Scanning using Keyboard Emulation
        • Hardware Barcode Scanning
        • scan-barcode
      • Bluetooth Low Energy (BLE)
      • Broadcast API
      • HTTP requests (Fetch API)
      • JourneyApps Print (Android)
      • Maps and navigation
      • NFC
      • Opening external links/apps
      • Serial Port
      • TCP Sockets
    • Design Intuitive Apps
      • UX Guidelines
      • Write Effective Copy
  • 📱App Features
    • RealWear® Voice Control
      • Automatic Voice Commands
        • Automatic Voice Commands - Advanced
      • Manual Voice Commands
    • App, Runtime and Container Updates
    • Batch Operations (App)
    • Call JS/TS Functions from XML
    • Capture GPS Locations
    • Push Notifications
    • Translations
    • XML Format Strings
    • Webhooks (External)
  • 🌐CloudCode
    • CloudCode Overview
    • Trigger a CloudCode Task
      • Trigger CC with a Schedule
      • Trigger CC via a Webhook
      • Trigger CC from an App
      • Trigger CC from Another Task
      • Trigger CC via HTTP
    • Attachments in CloudCode
    • Timezones
    • Advanced CloudCode Topics
      • Access Multiple DBs in CloudCode Tasks
      • Batch API (CloudCode)
      • CloudCode Dependencies
      • Configure HTTPS in CloudCode
      • Deployment environment variables
      • Local CloudCode Development
      • PDF Reports using CloudCode
      • Shared CloudCode Tasks
      • Translations in CloudCode
  • 📥Backend API
    • Introduction
    • API Reference
      • Retrieve All Objects
      • Query Objects
      • Sort Results
      • Limit and Skip
      • Count Objects
      • Create a New Object
      • Retrieve a Single Object
      • Update a Single Object
      • Delete a Single Object
      • Batch Operations (v4 API)
      • Oplog API
      • Retrieve the App Data Model
      • Manage App Users and Sessions
      • Field Representation
      • Error Responses
    • API Limits
    • Update to the V4 API
  • ⚙️Technical
    • Data Synchronization Priority
    • Device Diagnostics
    • JSON1 Query Engine
    • Improve App Performance
    • Security Measures
    • Supported Platforms
      • Web Container
      • Windows Installer
    • Domain Whitelist
  • 🖥️OXIDE
    • Get started with OXIDE
      • OXIDE Overview
      • Components of OXIDE
    • Configure Testing Deployments
    • Edit and Manage Files
      • How to Navigate to a Function
      • Manage External Dependencies
    • Create and Manage App Containers
    • Debugging & Troubleshooting
      • Common Troubleshooting Pointers
      • App Diagnostics Reports
      • Build Logs
    • OXIDE Workspaces
      • OXIDE Trees
  • ❕Deprecated Features
    • Deprecated Features and Components
Powered by GitBook
On this page
  • Edit Translations Files
  • Call Translation Resources
  • Translations from JavaScript
  • Translations from XML
  • Enable a language for app users
  • Developer notes for Arabic
  1. App Features

Translations

PreviousPush NotificationsNextXML Format Strings

Last updated 2 years ago

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:

  • Arabic (since version 4.86.1 of the JourneyApps Runtime - see the section below).

  • English (US) - default

  • Chinese (Simplified)

  • Dutch

  • French

  • German

  • Italian

  • Japanese

  • Korean

  • Portuguese (Brazil)

  • Russian

  • Spanish (Latin America)

  • Swedish

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. Words such as YES, yes, No, etc are reserved and will break your app if you use them

  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. Given the above, it's HIGHLY recommended that you always enclose your strings in quotes

  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:

main.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:

main.js
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:

main.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.

Developer notes for Arabic

Version compatibility

  • Arabic was introduced as a supported app language in version 4.86.1 of the JourneyApps Runtime.

  • For TypeScript apps the JourneyApps Runtime Build version needs to be 2.1.5 or greater. This version can be configured in your app's package.json file. You need to run the Update yarn.lock action in OXIDE after making updates to this file.

Arabic differs from all other supported app languages in that it is displayed from right-to-left. Right-to-left language support was added to the JourneyApps Runtime in version 4.86.1 so that there is almost no additional configuration that the developer is required to implement when adding Arabic as a language.

The Runtime automatically displays all UI components and runtime elements as right-to-left when a user selects Arabic as their language. Often this means that the specified default for an alignment or positioning attribute is different in Arabic than it is for other languages.

Here is a summary of updates the JourneyApps Runtime makes when a user selects Arabic as their app language:

  1. The app font changes to Noto Sans if installed on the user's device

  2. UI components and other runtime elements switch to right-to-left mode:

    1. Text is generally right-aligned

    2. Icons, radio buttons, checkboxes, etc, are generally aligned to the right of text

    3. An example runtime element update is the app header, which is mirrored in Arabic:

    4. Runtime-level directional icons are mirrored: e.g. the navigational “Back” button switches from < to >

User-defined directional icons

Developers will need to update user-defined directional icons when implementing Arabic, e.g:

<button label="Navigate Back" icon="fa-arrow-left" validate="false" />

Which looks as follows in English:

Will update to the following in Arabic by the runtime (the icon position updates to the right of the text):

main.view.xml
<button label="Navigate Back" icon="$:mirrorIcon()" validate="false" />
main.js
function mirrorIcon() {
    if (journey.locale == "ar") {
        return "fa-arrow-right";
    }
    else {
        return "fa-arrow-left"
    }
}

As an example, let's look at the attribute where the default value is left. In Arabic, the default icon-position for components is right, since elements are read from left to right. This value can still be overwritten in Arabic as with any other language by setting/updating the attribute.

There are some exceptions: e.g. button labels. The developer can manually right align this text if required on an app, view or component level (using ).

User-defined icons (e.g. icon=“fa-arrow-right”) are not updated by the Runtime. The developer would need to do this for directional icons - see the .

However, the icon itself should most likely also . For this developers could use journey.locale to dynamically update icons based on the user's language:

📱
icon-position
component configuration
be mirrored
developer notes
section below