Understand Translation Keys for Display Texts

To translate your application into other languages, you need to create translation bundles that store keys and values for the texts in your application’s UI.

When you save a string using the Translatable String popup in the Properties pane, the value for the string is externalized to the translation bundle, and the value of the string is bound to the key in the translation file in that bundle. If you open the page in the Code view you can see the name of the translation bundle and the key bound to the string value. For example, an input label in the Code view code might be similar to <oj-input-text label-hint="Name" id="oj-input-text--452490439-1" value="{{ $page.variables.authors.name }}"></oj-input-text>.

When you externalize the string, the value of the string is replaced with a string similar to the following that binds it to a key in the translation file:

[[ $application.translations.app.input_text_label_hint_daea ]]

The expression identifies the scope and name of the translation bundle, and the translation key, using the following syntax: <scope>.translations.<bundle-name>.<key>.

You can also include parameters in the expression by using the syntax <scope>.translations.format('<bundle>', '<key>', {params}). For example, if you use the expression [[ $application.translations.format('app', 'bind_text_value_372d', { region: $page.variables.Country.region }) ]] in the UI component, the key-value pair defined in the bundle might be "bind_text_value_372d": "(This country is in {region})". In this case, the string “This country is in “ would be translated, and region would be the value of the page variable.

When you open the translation file in the editor, the file contains a key and value pair similar to the following:

"input_text_label_hint_daea": "Name",
    "@input_text_label_hint_daea": {
        "description": ""
    }

By default, each key-value pair in the translation file contains a description field as part of the metadata for the pair that can be used to provide a description of the value, for example, to provide additional context for the string that can be useful when translating the string. You can modify the file in the editor to add description metadata and other metadata for each key-value pair.

Tip:

You can use the Code view to locate strings in a page that have not been externalized for translation and add the string to the translation bundle. You can use the Audits window to locate all the strings in the application that have not been externalized.

Description of the illustration page-designer-code-translate.png