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 {
    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",
    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)",
    "Manage Tags": "Manage Tags",
    "Press Enter to create a new tag": "Press Enter to create a new tag",
    "Click Add to create a new tag": "Click Add to create a new tag",
    "Open tag settings": "Open tag settings",
    "Type to search a tag": "Type to search a tag",
    "Show version history": "Show version history",
    "Last edited at": "Last edited at",
    "Last edited on": "Last edited on",
    "Back to editor": "Back to editor",
    "Version history": "Version history",
    "Show changes": "Show changes",
    "Restored from": "Restored from",
    "Restore this version": "Restore this version",
    // inherited from the File Manager
    Save: "Save",
    "Save all": "Save all",
    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?",
    "Save before closing?": "Save before closing?",
    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",
    "Upload folder": "Upload folder",
    folder: "folder",
    file: "file",
    archive: "archive",
    audio: "audio",
    image: "image",
    video: "video",
    code: "code",
    document: "document",
    of: "of",
    used: "used",
    "Open item location": "Open item location",
    "Are you sure you want to delete": "Are you sure you want to delete",
    "these items:": "these items:",
    "this item:": "this item:",
    "Delete files": "Delete files",
    and: "and",
    "more file(s)": "more file(s)",
    "Close the editor": "Close the editor",
    "Close this file": "Close this file",
};

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 docManager.locales object:

// Russian translations
docManager.locales.ru = {
  Files: "Файлы",
  "My Files": "Моя полка",
  Favorite: "Избранные",
    Recent: "Недавние",
    Shared: "Общие",
    Trash: "Корзина",
};

2. 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
  webix.CustomScroll.init();
 
  const dm = {
    view: "docmanager",
    url: "https://docs.webix.com/docmanager-backend/",
    locale: { lang: "ru" },
  };
 
  webix.ui(fm);
})

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:

docManager.locales.ru = {  // Russian
    Files: "Файлы", "My Files": "Моя полка", ...
};
 
docManager.locales.zh = {  // Chinese
    Files: "檔案", "My Files": "我的檔案", ...
};

2. 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" }
  ]
}

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"
      }
    }
}