Localizing Document Manager

By default, all labels in Document Manager are defined in English, but you can provide custom translations for:

  • names of actions ("Open", "Delete", etc.)
  • column titles
  • date formats
  • button labels
  • folder labels

The Document Manager 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

Document Manager titles are stored in the following object:

export default {
 Save: "Save",
    Rename: "Rename",
    Open: "Open",
    Edit: "Edit",
    Delete: "Delete",
    Folder: "Folder",
    "Add New": "Add New",
    "My Files": "My Files",
    Size: "Size",
    Date: "Date",
    "back to parent folder": "back to parent folder",
    Download: "Download",
    Type: "Type",
    Information: "Information",
    Files: "Files",
    Table: "Table",
    Cards: "Cards",
    Total: "Total",
    "Are you sure ?": "Are you sure ?",
    Details: "Details",
    "Enter a new name": "Enter a new name",
    Add: "Add",
    "Select something": "Select something",
    "Download file": "Download file",
    Preview: "Preview",
    Refresh: "Refresh",
    "Are you sure you want to exit without saving?":
        "Are you sure you want to exit without saving?",
    Copy: "Copy",
    Cut: "Cut",
    Paste: "Paste",
    "Deleting...": "Deleting...",
    "Copying...": "Copying...",
    "Moving...": "Moving...",
    Folders: "Folders",
    "Search results": "Search results",
    "Search results in": "Search results in",
    "Search files and folders": "Search files and folders",
    "Add new file": "Add new file",
    "Add new folder": "Add new folder",
    "Upload file": "Upload file",
    folder: "folder",
    file: "file",
    archive: "archive",
    audio: "audio",
    image: "image",
    video: "video",
    code: "code",
    document: "document",
    of: "of",
    used: "used",
 
 
    Favorite: "Favorite",
    Recent: "Recent",
    Shared: "Shared",
    Trash: "Trash",
    "Add to favorites": "Add to favorites",
    "Remove from favorites": "Remove from favorites",
    Share: "Share",
    Tags: "Tags",
    Comments: "Comments",
    "Can view": "Can view",
    "Can edit": "Can edit",
    "Share File": "Share File",
    "Invite someone...": "Invite someone...",
    Invite: "Invite",
    "Email expected, but found:": "Email expected, but found:",
    Restore: "Restore",
    "Delete from trash": "Delete from trash",
    "Restoring...": "Restoring...",
    "Empty trash": "Empty trash",
    "back to ": "back to ",
    "Select a user": "Select a user",
    "Add a tag": "Add a tag",
    "No comments yet": "No comments yet",
    "No users": "No users",
    "Available to": "Available to",
    "user(s)": "user(s)",
};

Specifying Custom Locale

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

  • Set custom translations by creating the needed locale (below it is "ru") within the docManager.locales object:
// Russian translations
docManager.locales.ru = {
  Files: "Файлы",
  "My Files": "Моя полка",
  Favorite: "Избранные",
    Recent: "Недавние",
    Shared: "Общие",
    Trash: "Корзина",
};
  • Define the current locale for Document Manager. For these purposes, set the locale property of Document Manager in its constructor:
webix.ready(function() {
  // use custom scrolls, optional
  if (!webix.env.touch && webix.env.scrollSize) webix.CustomScroll.init();
 
  const dm = {
    view: "docmanager",
    url: "https://docs.webix.com/docmanager-backend/",
    locale: { lang: "ru" },
  };
 
  webix.ui(fm);
};

Related sample:  Document Manager: Custom Locale

How to Switch Locales at Runtime

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

  • First, set custom translations to the desired labels:
docManager.locales.ru = {  // Russian
    Files: "Файлы", "My Files": "Моя полка", ...
};
 
docManager.locales.zh = {  // Chinese
    Files: "檔案", "My Files": "我的檔案", ...
};
  • Switch between languages using Document Manager "locale" service and its setLang method:
{
  rows: [
    {
      view: "segmented", options: ["en", "ru", "zh"],
      click: function() {
        const locale = $$("dm").getService("locale");
        locale.setLang(this.getValue()); // zh, ru or en
      }
    },
    { view:"docmanager", id:"dm" }
  ]
}

Related sample:  Document Manager: Switching Locales

How to Synchronize Document Manager and Webix Locale

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

{
    view:"docmanager",
    id:"dm",
    url: "https://docs.webix.com/docmanager-backend/",
    locale: {
      lang: "en",
      webix: {
        // switch Webix the selected locale
        en: "en-US",
        zh: "zh-CN"
      }
    }
}

Related sample:  Document Manager: Switching Locales

Back to top