Skip to main content

Web Module Internationalization

Modules Internalization development is based on i18n standard.

Message file organization

Each module containing UI messages should contain an i18n directory inside src catalog. i18n directory should contain catalogs for specific languages, for example: en_US.

  • For simple module, language directory should contain a single JSON file. These messages will be available in the module namespace: <module_name>/<filename>/KEY, eg. sabre-ngv-sample/translations/KEY.

  • For more complex modules, language directory can contain any number of JSON files and subdirectories. These messages will be available in the module namespace further organized in a reflecting way of the directory structure: <module_name>/<subdirectory>/<filename>/KEY.

Example

sabre-ngv-sample
├───build
├───core
├───src
│ ├───code
│ ├───i18n
│ │ ├───en_US
│ │ │ │ translations.json
│ │ │ └───subdir
│ │ │ file1.json
│ │ │ file2.json
│ │ ├───pl_PL
│ │ │ …​
│ │ …​
│ ├───styles
│ │ …​
│ …​

Usage

Usage in TypeScript view

It is reasonable to avoid globals inside of the modules. This is why there is no global t function in modules. t function has to be explicitly defined in module.

Example

import getService = app.getService;
import I18nService = app.services.impl.I18nService;
const t = getService(I18nService).getScopedTranslator('sabre-ngv-sample/translations');
export class Main extends Module {
    init() {
        const drawerConfig = new LargeWidgetDrawerConfig(SampleTile, "smapleData",
       {
            title: t('AMENITIES_CAPTION')
        });
    }
}

Usage in templates

To use _t helper in handlebar templates used in modules, it has to be registered in view.

Example

import getService = app.getService;
import I18nService = app.services.impl.I18nService;
const i18nService: I18nService = getService(I18nService);
@Initial<AbstractViewOptions>({
    templateOptions: {
        helpers: {
            _t: i18nService.getScopedHelper('sabre-ngv-sample/translations')
        }
    }
})