Locale packs

English is built into every component. German, French, Spanish and Chinese are shipped as separate files: smart.industrial.locale.de.js, .fr.js, .es.js and .zh.js. Each pack is available in two forms: as a plain script next to the bundle (about 40 KB), for a page that loads the bundle with a script tag, and as a self-contained ES module under source/modules/ for use with a bundler. Each pack covers every message of every Industrial component: labels, button text, hints, empty states and the text read by assistive technology. The test suite compares each pack against the English messages of each component, so a pack cannot ship with a missing key.

Switching a screen

<script src="node_modules/smart-industrial/source/smart.industrial.js"></script>
<script src="node_modules/smart-industrial/source/smart.industrial.locale.de.js"></script>
<script src="node_modules/smart-industrial/source/smart.industrial.locale.fr.js"></script>

<script>
    const visited = Smart.Industrial.applyLocale(document.body, 'de');   //how many components it visited
    Smart.Industrial.availableLocales();                                //['de', 'fr']
    Smart.Industrial.applyLocale(document.body, 'en');                  //back to each element's own pack
</script>

applyLocale(root, locale) visits every Industrial component under root, merges the messages of the pack into the component's messages property and sets its locale. It returns the number of components it visited, which is 0 when no pack for the locale is loaded. Components added to the page later need another call, or their locale and messages properties set directly.

The packs register themselves on the Smart.Industrial namespace, so the order of the scripts matters: a pack loaded before the bundle logs a warning and registers nothing. The ES module form does not have this requirement, because the module includes the namespace.

Merging messages

Assigning element.messages = { de: {...} } replaces the whole object, including the built-in en block, so the component has no English messages to fall back to. The problem appears when the locale is switched back to English: the component shows raw message keys and undefined. applyLocale() merges the packs instead of assigning them, and an application that sets messages directly should do the same: 

//By hand, for one element: merge, then select.
banner.messages = Object.assign({}, banner.messages, { de: Smart.Industrial.locales.de['smart-alarm-banner'] });
banner.locale = 'de';

Writing a pack

A pack is keyed by tag name and then by message key, with the {{token}} placeholders kept as in English. The German pack can be used as a template; its structure is: 

Smart.Industrial.locales.pl = {
    'smart-alarm-banner': {
        'critical': 'Krytyczny',
        'warning': 'Ostrzeżenie',
        'advisory': 'Informacja',
        'acknowledge': 'Potw.',
        'empty': 'Brak aktywnych alarmów',
        'bannerLabel': 'Aktywne alarmy',
        'acknowledgeAlarm': 'Potwierdź {{tag}}',
        'returned': 'Powrót do normy'
    },
    'smart-annunciator': { /* ... */ }
    /* one block per component; the keys are each component's messages.en */
};

The keys of a component are the English block of its messages property, listed on the component's API page. A pack can cover a subset of the components; the components it does not include keep their English messages.

Numbers, dates and units

  • Values are displayed as the application supplies them. Where a component formats a number itself (the control chart statistics, the alarm grid timestamps, the trend readout), it uses the browser's Intl formatting.
  • The time axis of the trend uses a fixed 24-hour day-month format with English month abbreviations (01 Oct), so a record reads the same on every station of a plant that spans two locales.
  • Units are not translated; °C and m³/h are the same in every language. Conversion between unit systems is handled by the Units module.
  • Audit entries and signatures are stamped in ISO 8601 with the local UTC offset and displayed through Audit.formatStamp(), so the record and its display always agree.

The localization screen shows the same five panels in all five languages and switches between them at run time.