Localization

HUB Client has built-in support for multiple locales and an easy way to manage translations.

All translation keys are being stored in src/translates folder under appropriate YAML files: {LANG}.yml and should be described in index.yml project configuration file:

defaultLocale: "en"
translates:
  en: !include ./translates/en.yml

Translations can be stored under nested keys, e.g.

# translates/en.yml
welcome:
  text: "Automated real-time identity authentication & decisioning."
  button: "Lets get started"

otp:
  title: "Enter your confirmation code"
  text: "We've sent a confirmation code to your phone number"

...

# Page configuraion
- !component as: Heading
  items: !t "welcome.text"
- !component as: SubmitButton
  text: !t "welcome.button"

In order to use translation key with some parameter, the following notation can be used:

# translates/en.yml
welcome:
  text: "Some text with {param}"

...

# Page configuraion
!t text: "welcome.text"
param: "Zenoo"

# Expression can be used as well
!t text: "welcome.text"
param: !expression "flow.export.param"

There are two ways to use translations in YAML:

Use the !t function. It can value for any property in any object.
Use !expression and call the function t.

To change locale, use the action changeLocale, in which the first parameter is target locale name.

Examples:

# Evaluate translation for given translation key
- !t translation_key

# Evaluate translation for dymanic translation key (e.g. error coming from Backend)
- !expression t(flow.export.translation_key)

Markdown and HTML content in translations

Translation key value can have string, HTML or Markdown as a value:

welcome:
  string: "Welcome"
  text1: !html |
    <h1>Welcome to our <b>website</b></h1>
    <br />
    Please provide some information
  text2: !markdown |
    # Welcome to our **website**

    Please provide some information

In order to use Markdown/HTML you need to use !te tag instead of !t:

# String
- !component as: Paragraph
  items: !t "welcome.string"

# Markdown
- !component as: Paragraph
  items: !te "welcome.text1"

# HTML
- !component as: Paragraph
  items: !te "welcome.text2"