Tutorial - Translate your application
How to translate applications with UI Framework.
In this section, we use translations to change a component title into another word.
This is a code block taken from a form component. In the title field, we placed "exampleUI.customizedForm". The "exampleUI.customizedForm" is translated into Edit SDLDemoMachine.
1
{
2
"type": "UiSdlConnected<UiSdlForm>",
3
"component": {
4
"title": {
5
"title": "exampleUI.prefilledForm"
6
},
7
...
8
}
Copied!

Step 1 - Create English Translation

We must create the Translation folder and then create an en.csv file to write our translation. If you want to translate into another language, you would create a <language>.csv (i.e., fr.csv) to write your translation.

Create Translation through csv files

Inside the en.csv:
1
id,locale,key,value
2
en.exampleUI.prefilledForm,en,exampleUI.prefilledForm,Edit SDLDemoMachine
Copied!
To learn more about Translations, go to Understand Translations.

Create Translation through Static console

When Translations are created in the static console, the modified or new values will be created and replaced on the next provisioning.
To create Translations in the static console, run:
1
Translation.upsert({
2
id: 'en_US.someTranslation',
3
key: 'someTranslation',
4
locale: { id: 'en_US' },
5
value: 'Translated value'
6
});
Copied!

View the Output

Provision and bundle your changes.
Once provision and bundle has been completed, see your changes on UI IDE.