Provide localized strings in Workspace

Workspace v17.2 or later provides some support for localization. Translated strings for UI text in Workspace 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 Workspace 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 an OpenFin-provided UI text 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],
  }
}