Localization

Available from version 2.1.0 onwards.

Localization support is available for all components that render text, including components that rely on dynamic data sources. The user's locale is automatically determined based on their system language.

Defining Messages

After including the sdpi-components library, an i18n instance is accessible on the top-level SDPIComponents object. Here you can defines supported locales, and their messages.

Defining Supported Locales

SDPIComponents.i18n.locales = {
    en: {
        name: 'Name',
        showName: 'Show name',
        title: 'Title'
    },
    es: {
        name: 'Nombre',
        showName: 'Mostrar nombre',
        title: 'Título'
    },
    fr: {
        name: 'Nom',
        showName: 'Afficher le nom',
        title: 'Titre'
    }
    // de, ja, ko, etc.
};

Rendering Messages

A message can be referenced in components using the following format, __MSG_{messageName}__, for example:

Property Inspector HTML

<sdpi-item label="__MSG_name__">
    <sdpi-textfield setting="name"></sdpi-textfield>
</sdpi-item>

<sdpi-item label="__MSG_display__">
    <sdpi-checkbox setting="showName" label="__MSG_showName__"></sdpi-checkbox>
</sdpi-item>

English

Spanish

French

tip

To render raw localized messages, use the <sdpi-i18n> component.

Fallback

When a message is not defined for a locale, sdpi-components attempts to fallback to the English (en) message. If there is no English message defined, the raw message key (e.g. __MSG_other__) is displayed.

Retrieving Messages

Messages can be accessed directly from the i18n instance using the getMessage(messageName) function; when available the localized message for the user's preferred locale will be returned, otherwise the English message, otherwise undefined.

const msg = SDPIComponents.i18n.getMessage('name');
// "Name", "Nombre", "Nom", or undefined, based on the user's locale.