Localization

Common Canvas displays a number of labels and messages to the user. For example, the placeholder text in the palette search field is displayed like this:

If Elyra Canvas components to display text without error, <CommonCanvas> and <CommonProperties> should be wrappered in an <IntlProvider> object.

English Only

If only English is required the application can just do this:

import { IntlProvider } from "react-intl";

class App extends React.Component {

    render() {
        <IntlProvider locale="en">
            {Add your <CommonCanvas/> or <CommonProperties/> element here.}
        </IntlProvider>
    }
}

Translated Text

For displaying translated text, the translated messages must be bundled together and passed to the <IntlProvider>. The application can use the sample code from below. this.locale should be set to indicate which language should override English. The default locale will be used if this.locale is set to a language which is not currently supported.

import { IntlProvider } from "react-intl";

import CommandActionsBundles from "@elyra/canvas/locales/command-actions/locales";
import CommonCanvasBundles from "@elyra/canvas/locales/common-canvas/locales";
import CommonPropsBundles from "@elyra/canvas/locales/common-properties/locales";
import PaletteBundles from "@elyra/canvas/locales/palette/locales";
import ToolbarBundles from "@elyra/canvas/locales/toolbar/locales";

class App extends React.Component {

    constructor() {
        this.locale = "en";
        // Create messages object once (here in constructor) - do not create messages
        // in the render method, otherwise unnecessary renders inside
        // common-canvas/common-properties will be performed.
        this.messages = this._getMessages(
            this.locale,
            [CommandActionsBundles, CommonCanvasBundles, CommonPropsBundles,
            PaletteBundles, ToolbarBundles]
        );
    }

    _getMessages(locale, bundles) {
        const messages = {};
        for (const bundle of bundles) {
            Object.assign(messages, bundle[locale]);
        }
        return messages;
    }

    render() {
        <IntlProvider locale={this.locale} defaultLocale="en" messages={this.messages}>
            {Add your <CommonCanvas/> or <CommonProperties/> element here.}
        </IntlProvider>
    }
}

Bundling the application’s text

If the application needs to provide its own text, and translations of that text, it can import its own bundles and load them into this.messages along with the common-canvas and common-properties text. Then, the <IntlProvider/> should be moved so that it wrappers the application’s React objects as well as <CommonCanvas/> and/or <CommonProperties>.

Customizing text displayed by Elyra Canvas components

If the application’s design requires text or messages, displayed by Elyra Canvas components, to be shown with different text, the application can override the text string by setting a new string in the messages object before it is passed to the <IntlProvider>.

For example, if the palette-search placeholder text (shown above) should be displayed as “Find nodes” instead of “Find palette nodes” do the following:

• Locate the text in the one of the bundles: the text is in “@elyra/canvas/locales/palette/locales”
• Find the key for the text: the key is “palette.flyout.search.placeholder”
• Override the default text by setting the new text in this.messages

    this.messages.palette.flyout.search.placeholder = "Find nodes";

If the application is displaying a different language to English, the appropriate language would need to be used for the override text.