Translation Setup

Key points to set up new or to override existing translations

Creating a New Locale #

For a complete code snippet, visit the Internationalization page in the showcase.

Create the translation file #

By default, ActiveUI will look for translation files in the locales folder next to the index.html serving the application. Thus, if you add a new translation file, you should put it in this locales folder.

To create a new translation file such as es-ES.json copy an existing translation file and update all the keys with the new translation.

(using an online JSON formatter can help to make the starting file more readable)

Update the values with the new translation #

{
  "...": "...",
  "popup": {
    "submit": "Submit",
    "cancel": "Cancel",
    "...": "..."
  }
}

{
  "...": "...",
  "popup": {
    "submit": "Enviar",
    "cancel": "Cancelar",
    "...": "..."
  }
}

Initialization #

Setting the locale to be used on startup:

const activeUI = ActiveUI.initialize({
  defaultSettings: {'global.locale': 'es-ES'}
});

Adding the locale to the list of available locales:

const activeUI = ActiveUI.initialize({
  additionalLocales: [{caption: 'Español', value: 'es-ES'}]
});

Altering translation files #

This code will add a new path 'customTitle' and will edit an existing one at 'popup.close'

const activeUI = ActiveUI.initialize({
  fetchTranslation(locale, defaultFetchTranslation) {
    // Use the default behavior: fetching the translation file in the locales folder next to index.html
    return defaultFetchTranslation().then(translation => {
      if (locale === 'fr-FR') {
        // add new key
        translation.customTitle = 'Traduction Personnalisée';
        // override an existing key
        translation.popup.close = 'Fermeture Personnalisée';
      } else {
        translation.customTitle = 'Custom Translation';
        translation.popup.close = 'Custom Close';
      }
      return translation;
    });
  }
});

Loading the translation files at a custom location #

const activeUI = ActiveUI.initialize({
  fetchTranslation(locale, defaultFetchTranslation, fetch) {
    return fetch(`http://my.app/locales/${locale}.json`)
      .then(response => response.json())
      .then(translation => {
        // Translation can also be modified here if needed.
        return translation;
      });
  }
});

Create an internationalized bookmark #

It is possible to define translations for the name and description attributes of a bookmark.

To set up translations for a bookmark:

Go to your content server UI page
Under ui > bookmarks > content: find the ID of your bookmark (for example 2de).

Under ui > bookmarks > content > $bookmarkId: define the content of your bookmark, (name, description, value…). These will be the default values for the name and descriptions.

{
  "description": "Default description",
  "name": "Alert List 311",
  "type": "container",
  "value": {
    "showTitleBar": false,
    "containerKey": "activemonitor-alert-list",
    "body": {
      "...": "..."
    }
  }
}

For each locale name (en-US, fr-FR, …) you want a translation for, define the name and the description to use for that locale. Example for adding French translations for a bookmark with ID 2de:

Under ui > bookmarks > i18n > fr-FR > 2de:
```
{
  "name": "Une super liste d'alertes!",
  "description": "Description française"
}
```

Current limitations: #

For Dashboard bookmarks, only the main title and description of the bookmark can be translated, not the titles and descriptions of the child widgets it contains.
When a custom translation for a bookmark’s name or description exists, it is not possible to edit that field of that bookmark from ActiveUI. The name and description fields in the UI become disabled (greyed out), as we don’t want the user to edit one translation without editing the others.

< Prev