User Manager это комплексный виджет, разработанный с помощью MV* фреймворка Webix Jet. Это готовое приложение с минимальной конфигурацией и специальным API для переопределения логики внутренних модулей.
Кастомизация компонентов и моделей подразумевает работу с исходным кодом.
User Manager построен как Jet приложение в обёртке Webix компонента, поэтому вы можете инициализировать его любым из двух способов.
Интерфейс User Manager разбит по частям (компонентам). Каждый компонент, это класс, который наследуется от класса JetView и имеет свои методы и конфигурацию.
Исходный код частей интерфейса (компонентов Jet) находится в папке sources/views.
views
roles
users
audit.js
details.js
...
На странице карты классов представлен список используемых компонентов, а также их расположение в интерфейсе.
В моделях User Manager описана логика для работы с основными сущностями (users/roles/rules), с окнами и индикатором прогресса. В Webix Jet модели называются сервисами.
Исходный код для моделей (сервисов Jet) находятся в папке sources/models.
models
Local.js
Operations.js
Backend.js
Prompt.js
Progress.js
Методы сервисов вызываются самим интерфейсом, но также могут быть вызваны программистом напрямую:
$$('um').getService('operations').addUser(obj);
Для начала создайте класс и наследуйте его от класса по умолчанию или от userManager.views.JetView:
class CustomToolbar extends userManager.views["users/toolbar"] {
config(){
// получаем JSON объект с конфигурацией
const ui = super.config();
// изменения конкретного компонента
ui.height = 60;
return ui;
}
init() {
// вызываем логику по умолчанию
super.init();
// а это уже пользовательский метод
this.doSomething();
}
doSomething(){
// делаем что-то при инициализации
}
}
Затем переопределите компонент (класс) по умолчанию с помощью свойства override:
webix.ui({
view: 'usermanager',
url: 'https://docs.webix.com/usermanager-backend/',
override: new Map([[userManager.views['users/toolbar'], CustomToolbar]]),
});
Чтобы добавить столбец в сетку пользователей, необходимо изменить её JSON конфигурацию:
class UserGrid extends userManager.views["users/grid"] {
config() {
const grid = super.config();
const formatDate = webix.Date.dateToStr("%M %d, %Y %H:%i:%s");
// добавляем столбец "last visited"
const newColumn = {
id: "visited",
header: "Last seen",
fillspace: 2,
template(obj, type, value, column, index) {
// парсим дату формата ISO 8601 и применяем форматирование
let date = new Date(value);
return formatDate(date);
},
};
grid.columns.push(newColumn);
return grid;
}
}
Related sample: User Manager: Adding an Extra Column
Больше примеров кастомизации смотрите в практических руководствах.
Рекомендации
1. Мы не рекомендуем удалять компоненты из интерфейса, т.к. внутренняя логика может всё ещё обращаться к ним. Вы можете скрывать компоненты.
class CustomToolbar extends userManager.views["users/toolbar"] {
init(view) {
// логика по умолчанию
super.init(view)
// прячем тогл-контрол "Role Matrix"
view.queryView("toggle", "all")[0].hide();
}
}
2. Получить экземпляр компонента внутри Jet можно следующими способами:
Метод работает для внутреннего компонента, у которого определён локальный ID (localId).
init() {
// исходная логика
super.init();
// получаем экземпляр компонента с localId = "list"
const form = this.$$("list");
}
init(view) {
// исходная логика
super.init();
// получаем экземпляр списка
const list = view.queryView("list");
}
3. С помощью кода ниже можно определить, в компактном ли режиме приложение в данный момент:
const compact = this.getParam('compact', true);
Метод доступен из любого компонента или сервиса.
4. Чтобы получить текущее состояние приложения и его реактивные свойства воспользуйтесь одним из способов ниже:
const state = this.app.getState();
// или
const state = this.getParam("state");
Методы доступен из любого компонента или сервиса.
Прежде всего создайте свой класс сервиса и наследуйте его от класса сервиса по умолчанию:
class MyBackend extends userManager.services.Backend {
users() {
// клиентские данные
return webix.promise.resolve(users);
}
}
Затем переопределите класс по умолчанию вашим с помощью свойства override:
webix.ui({
view: 'usermanager',
override: new Map([[userManager.services.Backend, MyBackend]]),
});
Related sample: User Manager: Local Data
Больше информации о сервисе Backend в User Manager читайте в этой статье.
User Manager - это очень гибкий виджет в отношении кастомизаций: вы можете менять в нём практически всё, что угодно. Однако следует помнить о следующих моментах:
Обратите внимание, что у кода для Edge Сhromium должен быть другой синтаксис.