Skip to main content

​
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"