Getting started Configuration Translations
Monday, December 14, 2020 5:32 PMTranslations
Graphileon supports multilingual user interfaces. All Graphileon core texts can be translated into other languages, but also texts in any specific application built on top of Graphileon. This section will cover how to manage translations.
Namespaces
Translations are divided into namespaces, which are collections of translations. Graphileon comes with 2 built-in namespaces:
- core: Texts in the Graphileon core, such as built-in UI elements and errors.
- graphileon-logic: Texts in any part of the graphileon logic (Functions/Triggers,etc).
Custom namespaces can also be added, by defining them in the config.json:
"customLanguageNamespaces": ["my-namespace", "my-other-namespace"]
The array can contain any number of namespaces with any names.
Each namespace has its own .json file in persistent/languages. When migrating to another instance of Graphileon, copying the persistent directory will also migrate the translations.
Keys and translations
Each translation consists of a key and text for each language. For example:
- key: "Hello, how are you?"
- en: "Hello, how are you?"
- nl: "Hallo, hoe is het?"
Text will be translated by finding the key, and returning the corresponding text in the selected language.
In Graphileon logic (Functions/Triggers), text can be translated using translate
, e.g.:
"$someParameter": "translate('Hello, how are you?')"
The key can also be different from any of the translations, e.g.:
- key: "hello"
- en: "Hello, how are you?"
- nl: "Hallo, hoe is het?"
In this case, the translation will look like this:
"$someParameter": "translate('hello')"
Translations can even contain placeholders, e.g.:
- key: "hello"
- en: "Hello {{name}}, how are you?"
- nl: "Hallo {{name}}, hoe is het?"
The placeholders can be filled from the translate
call:
"$someParameter": "translate('hello', {name: 'James'})"
In the back, the translations are powered by the very versatile i18next. It supports interpolation, formatting, plurals, nesting, context, objects and arrays, all of which is well-documented on their website.
TranslateView
The TranslateView can be used to easily manage translations in a graphical way. It is an editable grid of translations, showing the key, namespace and translations in each language.
Translating the Core
The core namespace contains translations for all Graphileon built-in texts. In case a new language or custom texts are required for the built-in texts, it is recommended not to edit the core namespace directly, but rather 'override' it in a new namespace. Any key that is defined in both the core namespace and a custom namespace, will be translated using the custom namespace. Using this practice, the custom namespace is stored in persistent/languages and can be easily migrated to a new version or other instance of Graphileon.