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

Report Manager это комплексный виджет, разработанный с помощью MV* фреймворка Webix Jet. Это готовое приложение с минимальной конфигурацией и специальным API для переопределения логики внутренних модулей.

Jet приложение и внутренние модули

Report Manager построен как Jet приложение в обёртке Webix компонента, поэтому вы можете инициализировать его любым из двух способов.

Компоненты

Интерфейс Report Manager разбит по частям (компонентам). Каждый компонент, это класс, который наследуется от класса JetView и имеет свои методы и конфигурацию.

Исходный код частей интерфейса (компонентов Jet) находится в папке sources/views.

views
  menu.js
  editor
    column.js
  ...

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

Модели/Сервисы

В моделях Report Manager описана логика для работы с отчётами, чартами, моделями и др. В Webix Jet модели называются сервисами.

Исходный код для моделей (сервисов Jet) находятся в папке sources/models.

models
  Backend.js
  Charts.js
  Local.js
  Helpers.js

Методы сервисов вызываются самим интерфейсом, но также могут быть вызваны программистом напрямую:

$$("reports").getService("helpers").findOptions(collection, regexp);

Кастомизация компонентов

• вы можете переопределять метод config() для изменений в UI
• вы можете переопределять метод init() для изменений в UI и поведении компонентов
• вы можете переопределять любой метод, но с осторожностью
• вы можете создавать и вызывать свои методы

Для начала создайте класс и наследуйте его от класса по умолчанию или от reports.views.JetView:

class CustomToolbar extends reports.views.toolbar {
  config(){
    // получаем JSON объект с конфигурацией
    const ui = super.config();
    // изменения конкретного компонента
    ui.height = 60;
    return ui;
  }
  init() {
    // вызываем логику по умолчанию 
    super.init();
    // а это уже пользовательский метод
    this.doSomething();
  }
  doSomething(){
    // делаем что-то при инициализации
  }
}

Затем переопределите компонент (класс) по умолчанию с помощью свойства override:

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

Как добавить richselect на тулбар

Чтобы добавить richselect на тулбар, создайте класс (CustomToolbar) и наследуйте его от класса по умолчанию (reports.views["toolbar"]). Внутри метода config добавьте новый элемент в конфиг JSON, как в примере ниже:

class CustomToolbar extends reports.views["toolbar"] {
  config() {
    let ui = super.config();
    let elements = ui.elements;
 
    // добавляем richselect в массив элементов тулбара
    elements.push({
      view: "richselect",
      value: "en",
      options: [{ id: "en", value: "en" }, { id: "ru", value: "ru" }],
      width: 65,
      on: {
        onChange: value => {
          webix.alert("'" + value + "' locale selected");
        },
      },
    });
    return ui;
  }
}

Related sample:  Report Manager: Adding Richselect

Рекомендации

1. Мы не рекомендуем удалять компоненты из интерфейса, т.к. внутренняя логика может всё ещё обращаться к ним. Вы можете скрывать компоненты.

class CustomToolbar extends reports.views.toolbar {
  init(view) {
    // стандартная логика
    super.init();
    // прячем кнопку "New+"
    view.queryView("button", "all")[1].hide();
  }
}

2. Получить экземпляр компонента внутри Jet можно следующими способами:

• с помощью метода $$(id) у JetView.

Метод работает для внутреннего компонента, у которого определён локальный ID (localId).

init() {
    // стандартная логика
    super.init();
    // получаем экземпляр компонента с localId = "list" 
    const reports = this.$$("list");
}

• с помощью queryView, если localId не определён.

init(view) {
    // стандартная логика
    super.init();
    // получаем экземпляр первой кнопки
    const button = view.queryView("button");
}

3. С помощью кода ниже можно определить, в компактном ли режиме приложение в данный момент:

const compact = this.getParam('compact', true);

Метод доступен из любого компонента или сервиса.

4. Чтобы получить текущее состояние приложения и его реактивные свойства воспользуйтесь одним из способов ниже:

const state = this.app.getState();
// или
const state = this.getParam("state");

Метод доступен из любого компонента или сервиса.

Кастомизация сервисов Jet

• вы можете добавлять и вызывать свои методы
• вы можете переопределять любые существующие методы, но с осторожностью

Прежде всего создайте свой класс сервиса и наследуйте его от класса сервиса по умолчанию:

class MyBackend extends reports.services.Backend {
  getModules(){
    // клиентские данные
    return webix.promise.resolve(modules);
  }
}

Затем переопределите класс по умолчанию вашим с помощью свойства override:

webix.ui({
    view: 'reports',
    url: 'https://docs.webix.com/reports-backend/',
    override: new Map([[reports.services.Backend, MyBackend]]),
});

Related sample:  Report Manager: Local Data

Больше информации о сервисе Backend в Report Manager читайте в этой статье.

Обратная совместимость

Report Manager - это очень гибкий виджет в отношении кастомизаций: вы можете менять в нём практически всё, что угодно. Однако следует помнить о следующих моментах:

• Внутренняя логика модулей Report Manager может меняться в последующих релизах.
• Мы сделаем всё, чтобы оставить сигнатуры методов без изменений, но в случае необходимости возможны критические изменения.

Наверх