Translate Application
How to translate applications with UI Framework.
The UI Framework supports the ability to use ICU formatted strings and substitute parameters with both static and state driven values. This functionality is provided by the Translate React component and the ReactIntl.useTranslate React hook leveraging the UiDynamicValueSpec type.
Translations can be used in many ways. In order to create a translation file, you must create a Translation folder under the seed directory. The Translation folder holds your translation CSV files.

Locale

The Locale#id should be a valid POSIX/C locale. For example:
  • en: English (International)
  • en_US: American English
  • en_GB: British English
  • fr: French
  • sr_ME: Serbian (Cyrillic script, Montenegro)
  • [email protected]: Serbian (Latin script, Montenegro)
  • [email protected]: Uzbek (Cyrillic script, Uzbekistan)
See GNU – Locale Names for more information.

Translation

As noted in Translating UI and data components, by convention, the id of a Translation is its locale and key joined by a period: locale.key. The key is a identifier for a message that can be translated into multiple languages.
By convention, the key for UI Translation metadata indicates to which component the Translation applies and its usage within the component, and so the key is structured Component ID.Path to Usage.

Create the translation files

Under the seed folder, create a subfolder named Translations. In the Translation folder, we create the translation file. To translate your application to English, create a file en.csv. If you were to translate the application in French, you would create a fr.csv. An example en.cvs:
1
id,locale,key,value
2
en.exampleUI.prefilledForm.title.title,en,exampleUI.prefilledForm.title.title,Edit SDLDemoMachine: {{id}}
Copied!
For example, myNewPackage/seed/Translation/en.csv would have
1
id,locale,key,value
2
en.myNewPackage.MyNewModal.header.text,en,myNewPackage.MyNewModal.header.text,Enter your detailed text
Copied!
and myNewPackage/seed/Translation/fr.csv would then have
1
id,locale,key,value
2
fr.myNewPackage.MyNewModal.header.text,fr,myNewPackage.MyNewModal.header.text,Entrez votre texte détaillé
Copied!
While the Translation seed data can follow any file structure you'd like, providing one Translation seed file per locale is a good starting point. This approach makes it simple to extract your application's Translation set and distribute it to an external translation service for translating into other languages.
In order to use the Translation in the UI, the UI component references the Translation.key. For example, myNewPackage/ui/c3/meta/myNewPackage.MyNewModal.json would have
1
{
2
"type": "UiSdlConnected<UiSdlModal>",
3
"component": {
4
"header": {
5
"text": "myNewPackage.MyNewModal.header.text"
6
}
7
}
8
}
Copied!
In this example for displaying text in a modal header, the UI Framework uses the Translation.value that corresponds to the Translation whose id matches the application's current locale and whose key is myNewPackage.MyNewModal.header.text.
Export as PDF
Copy link