Localize Portal Text

Overview

Localizing the text that displays in the portal depends on how the text entered the portal.

The text displayed in the portal can come from three sources.

• Custom components: Texts were added through customized components.
• Menu: Texts displayed in the main menu.
• Forms: Texts displayed in the pages added with workflow forms. 

For a list of the cultures supported by Cora Orchestration, see this article.

Localize text in custom components

To localize text entered with customized components, you need to create a new folder for the customized component, with two files:

• index.tsx
• translation.json (see structure below)

Translation JSON file structure

The example shows text localized in two languages: American English (en-US) and France French (fr-FR).

{
"component": "navigator-tabs",
"translations": [
    {
      "culture": "en-US",
      "keys": {
        "closeMessage": "Tab was closed.",
        "customMessage": "Thank you"
      }
    },
    {
      "culture": "fr-FR",
      "keys": {
        "closeMessage": "L'onglet a été fermé.",
        "customMessage": "Thank you"
      }
    }
  ]
}

Where component is the same name as the component folder name.

Procedure

Before you begin, make sure that the translation.json file is ready.

1. In the template project, open the module /src/components.
2. Create a new folder and then, add an index.tsx file and the translation.json file to it.
3. In the component markup, import the following:

   import { TranslationService } from 'services/translation-service';
   import './translation.json';

4. In the component code call:

   const { t } = TranslationService().UseTranslation();

Now you can use the localized text in the component markup or code.

Note the convention in the following examples:

alert(t('navigator-tabs.closeMessage'));

or

<span className="ct-tabs-message">
    {t('navigator-tabs.customMessage)}
</span>

Localize text in the menu

There are properties for localizing text and menu item tooltips. These properties can use translations provided by expressions.

For example: Text="{$resources.Cases}"

Localize text in forms

Similar to plugins, all customizations related to the portal’s pages and components load at runtime. 

You can have multiple customizations in different folders.

For more details on how to create a multilingual form, see this article.