Localizing User Manager

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

names of actions ("Reset", "Delete", etc.)
labels of the main sections ("Users", "Roles", "Rules")
labels of the user fields ("status", "last visited", etc.)
labels on the buttons

The User 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

User Manager titles are stored in the following object:

export default {
    Active: "Active",
    "Add credentials": "Add credentials",
    "Are you sure to delete credentials?": "Are you sure to delete credentials?",
    "Add new user": "Add new user",
    "Are you sure to delete this user?": "Are you sure to delete this user?",
    Audit: "Audit",
    Avatar: "Avatar",
    Cancel: "Cancel",
    "changes by": "changes by",
    "changes to": "changes to",
    Color: "Color",
    Credentials: "Credentials",
    Delete: "Delete",
    Deleted: "Deleted",
    "Delete credentials": "Delete credentials",
    Details: "Details",
    Done: "Done",
    "Enter password": "Enter password",
    "Enter user name": "Enter user name",
    "Error: no email": "Error: no email",
    "Full Name": "Full Name",
    General: "General",
    "Generate password": "Generate password",
    Description: "Description",
    Email: "Email",
    "Last seen": "Last seen",
    "Last visited": "Last visited",
    logins: "logins",
    Members: "Members",
    "Members assigned": "Members assigned",
    Modify: "Modify",
    Name: "Name",
    New: "New",
    "New password": "New password",
    "Not active": "Not active",
    "No members": "No members assigned",
    "No rules": "No rules assigned",
    Operation: "Operation",
    "Please submit an email first!": "Please submit an email first!",
    Registered: "Registered",
    "Reset password": "Reset password",
    Rules: "Rules",
    "Rules assigned": "Rules assigned",
    "Rule Matrix": "Rule Matrix",
    Save: "Save",
    Search: "Search",
    Status: "Status",
    Target: "Target",
    Unknown: "Unknown",
    "Unknown user": "Unknown user",
    "Upload new photo": "Upload new photo",
    "User Manager": "User Manager",
    Users: "Users",
    When: "When",
    Who: "Who",
 
    // used if Roles feature enabled
    "Add new role": "Add new role",
    "All assignments": "All assignments",
    "Are you sure to delete this role ?": "Are you sure to delete this role?",
    "Assigned directly": "Assigned directly",
    "Enter role name": "Enter role name",
    "No roles": "No roles assigned",
    Role: "Role",
    Roles: "Roles",
    "Roles assigned": "Roles assigned",
    "Role Matrix": "Role Matrix",
};

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

// Russian translations
userManager.locales.ru = {
    Delete: "Удалить",
    "Name": "Имя"
};

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

webix.ready(function() {
    // use custom scrolls, optional
    webix.CustomScroll.init();
 
    webix.ui({
        view: "usermanager",
        url: "https://docs.webix.com/usermanager-backend/",
        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:

userManager.locales.ru = {  // Russian
    Users: "Пользователи", "Rules": "Права доступа", ...
};
 
userManager.locales.zh = {  // Chinese
    Users: "用户", "Rules": "规则", ...
};

2. Switch between languages using User Manager "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:"usermanager", id:"um1" }
  ]
}

How to Synchronize User Manager and Webix Locale

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

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