Localizing Desktop

By default, all labels in Desktop are defined in English, but you can provide custom translations.

The Desktop widget package includes only en-US locale. Check our Locales repository for the language you need or create your own locale. Feel free to contribute your successful translation.

Locale Structure

Desktop titles are stored in the following object:

export default {
    App: "App",
    "Close all": "Close all",
}

Specifying Custom Locale

To change the default locale, you need to perform the following steps:

1. Set custom translations by creating the needed locale (below it is "ru") within the desktop.locales object:

// Russian translations
desktop.locales.ru = {
    App: "Приложение",
    "Close all": "Закрыть все",
};

2. Define the current locale for Desktop. For these purposes, set the locale property of Desktop in its constructor:

webix.ui({
    view: "desktop",
    locale: {
        lang: "ru"
    },
    ...
 });

How to Switch Locales at Runtime

You can change languages dynamically, e.g. by clicking related switch buttons in the toolbar.

1. First, set custom translations to the desired labels:

desktop.locales.ru = {  // Russian
    App: "Приложение",
    "Close all": "Закрыть все"
};
 
desktop.locales.zh = {  // Chinese
    App: "附錄",
    "Close all": "關閉所有"
};

2. Switch between languages using Desktop "locale" service and its setLang method:

{
  rows: [
    {
      view: "segmented", options: ["en", "ru", "zh"],
      click: function() {
        const locale = $$("um1").getService("locale");
        locale.setLang(this.getValue()); // zh, ru or en
      }
    },
    { view:"desktop", id:"d1" }
  ]
}

How to Synchronize Desktop and Webix Locale

The built-in labels of Webix components within the Desktop, as well as date and number localization depend on the current Webix locale in use. To synchronize localizations of Desktop and Webix, define webix parameter in the locale setting of the Desktop constructor:

{
    view:"desktop",
    ...
    locale: {
      lang: "en",
      webix: {
        // switch Webix the selected locale
        en: "en-US",
        zh: "zh-CN"
      }
    }
}