Кастомизация User Manager

User Manager это комплексный виджет, созданный с помощью MV* фреймворка Webix Jet.

Природа Jet приложения

User Manager разработан как Jet-приложение. Jet-приложение это модуль, который можно использовать обособленно или же как Webix виджет. Каждое Jet-приложение это класс, который в свою очередь наследуется от класса JetApp.
Более подробную информацию о JetApp и его API можно найти по этим ссылкам:

Интерфейс User Manager разделён по частям. Каждая часть это модуль (класс), который наследуется от класса JetView. Больше информации о JetView:

Jet Views в User Manager

На этой странице вы можете ознакомиться с полным списком Jet views, а также их расположением в интерфейсе.

Преимущества такого подхода

  • простая кастомизация благодаря ООП
  • возможность настраивать любую часть виджета не меняя исходный код
  • возможность повторно использовать любой модуль User Manager (компонент или сервис) в своем приложении
  • такой подход позволяет держать UI компонента и его логику вместе

Код для IE 11 и Edge должен иметь другой синтаксис.

Как кастомизировать Jet views в User Manager

Изменения компонентов

Прежде всего необходимо создать класс и наследовать его от view по умолчанию или от JetView:

class CustomToolbar extends userManager.views["users/toolbar"] {
    /* Переопределение или расширение логики по умолчанию */
}

У JetView есть два метода, которые можно безопасно переопределять:

  • config() для изменений в UI,
  • init() для изменений в UI и логике,
  • вы также можете создавать собственные методы.
class CustomToolbar extends userManager.views["users/toolbar"] {
    init() {
        // логика по умолчанию
        super.init();
        // пользовательская логика
        this.doSomething();
    }
    doSomething(){
        // какое-либо действие при инициализации
    }
}

Остаётся переопределить класс по умолчанию:

webix.ui({
    view: "usermanager",
    url: "https://docs.webix.com/usermanager-backend/",
    override: [userManager.views["users/toolbar"], CustomToolbar]
});

...или добавить его в список views:

webix.ui({
    view:"usermanager",
    url:"//localhost:3200/",
    views: { "custom.top": CustomToolbar }
});

Как изменить поведение компонента

Чтобы изменить поведение какого-либо view, достаточно добавить необходимые методы его классу:

  1. Создайте view класс;
  2. Опишите метод;
  3. Вызовите метод.
class CustomToolbar extends userManager.views["users/toolbar"] {
    config() {
        // доступ к интерфейсу
        const ui = super.config();
 
        // доступ к тулбару
        const mainToolbar = ui.rows[0].cols;
 
        // создание новой кнопки 
        const newButton = {
            view: "button",
            type: "icon",
            icon: "wxi-download",
            css: "webix_primary",
            label: "Export to Excel",
            autowidth: true,
            click: () => this.ExportUsers(),
        };
 
        //  добавление новой кнопки в интерфейс
        mainToolbar.splice(3, 0, newButton);
        return ui;
    }
 
    // новый метод
    ExportUsers() {
     // логика экспорта
    }
}

Related sample:  User Manager: Custom View

Наверх