Provide localized strings for Here™ Core UI Components

Here™ Core UI Components v17.2 or later provides some support for localization. Translated strings for UI text in Here Core UI Browser for the following languages are provided:

• en-US - English (United States)

• ja-JP - Japanese

• zh-CN - Chinese (Simplified)

• ko-KR - Korean

• ru-RU - Russian

• de-DE - German

• zh-Hant - Chinese (Traditional)

United States English (en-US) is the default.

How it works

A language property is available in the WorkspacePlatformInitConfig interface.

You can also provide translations for any custom text strings you add to Browser, for context menu options or for tooltips for custom buttons. To do this, you provide your own language dictionary for the strings, and override the setLanguage(locale) and getLanguage methods of the WorkspacePlatformModule interface. See the examples in this article.

Only string translation is supported. Localization of numbers, dates, currencies, and other formats is not supported.

How to do it

To implement a provided translation, set the language.initialLanguage property when you initialize your Workspace platform:

await WorkspacePlatform.init({
  browser: {
     title: "My Browser"
  },
  language: {
     initialLanguage: 'ru-RU'
  }
});

To provide translations of strings for custom items:

• Create your language dictionary:

  import * as WorkspacePlatform from '@openfin/workspace-platform';
  
  /*
  Example only.
  Organize your dictionary and specify locales as your requirements determine.
  */
  // Hypothetical Dictionary
  const dictionary = {
    "en-US": {
      "sample-custom-action-name.tooltip": "Custom Button 1",
      "sample-custom-action-name.customData.message": "Button has been clicked",
      // etc...
    },
    "de-DE": {
      "sample-custom-action-name.tooltip": "Benutzerdefinierte Schaltfläche 1",
      "sample-custom-action-name.customData.message": "Schaltfläche wurde angeklickt",
      // etc...
    }
  };

• Set language for custom buttons and tooltips:

  const setToolbarLanguage = (language = 'en-US') => {
    return {
      buttons: [{
        type: 'Custom',
        tooltip: dictionary[language]['sample-custom-action-name.tooltip'],
        disabled: false,
        iconUrl: 'https://www.openfin.co/favicon.ico',
        action: {
          id: 'sample-custom-action-name',
          customData: {
            message: dictionary[language]['sample-custom-action-name.customData.message'],
          }
        }
      }] 
    }
  };
  
  const createWindow = () => {
    const language = WorkspacePlatform.getLanguage();
    const createWindow = {
      workspacePlatform: {
        pages: [...],
        toolbarOptions: setToolbarLanguage(language);
      }
    };
    WorkspacePlatform.getCurrentSync().createWindow(createWindow);
  }
  
  const updateWindowToolbar = (language) => {
  
    const customButtons = setToolbarLanguage(language);
    WorkspacePlatform
      .getCurrentSync()
      .Browser.getAllWindows().then(windows => 
      windows.map(window => {
        window.wrapSync(identity).replaceToolbarOptions(customButtons);
      }
  }
  
  //implement our setLanguage() override 
  setLanguage = async (language) => {
    await updateWindowToolbar(language);
    return super.setLanguage(language);
  }
  
  createWindow(); 

• Set language for custom options in the global context menu:

  openGlobalContextMenu = () => {
    const language = await WorkspacePlatform.getCurrentSync().getLanguage();
    const globalContextMenu = {
      // etc...
      label: customerProviderDictionary[language],
    }
  }