How-tos

You can read about general customization rules in the corresponding article.

Filtering reports list

1. Create a custom class (CustomModules) and inherit it from the default reports.views["modules"] one. Inside the config method add a button that triggers filtering:

class CustomModules extends reports.views["modules"] {
    config() {
        let ui = super.config();
        const newButton = {
            view: "icon",
            localId: "myFilterIcon",
            icon: "mdi mdi-filter",
            click: e => this.showMyPopup(e),
        };
 
        /* add new icon button */
        ui.rows[0].cols.splice(2, 0, newButton);
        return ui;
    }
}

2. Define the getMyPopupConfig method that returns a popup with filtering options:

//...inside CustomModules class
getMyPopupConfig() {
    return {
        view: "popup",
        body: {
            view: "list",
            borderless: true,
            css: "webix_rpt_popup_menu",
            width: 160,
            autoheight: true,
            template: "#value#",
            data: [
                { id: "all", value: "Show all" },
                // other options
            ],
            click: (id, e) => this.myFilter(id, e),
        },
    };
    }

3. To implement filtering logic itself create the myFilter method that filters reports according to their types:

// list filtering by report type
myFilter(id) {
    if (id == "all") this.$$("list").filter();
    else
        this.$$("list").filter(module => {
            const config = module.parsed;
            return config.type == id;
        });
    this.MyPopup.hide();
}

4. Define the showMyPopup method to show the popup with filtering options upon clicking the icon:

// icon click handler shows popup
showMyPopup(e) {
    if (!this.MyPopup) this.MyPopup = this.ui(this.getMyPopupConfig());
    webix.delay(() => {
        this.MyPopup.show(webix.$$(e).$view);
    });
}

Finally, do not forget to override the default class with the new one.

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

Related sample:  Report Manager: Filtering Report List

Changing the toolbar color

  • Create a custom class (CustomToolbar) and inherit it from the default reports.views["toolbar"] one;
  • Inside the config method get the toolbar UI and apply custom css styles via the css field:
class CustomToolbar extends reports.views["toolbar"] {
    config() {
        let ui = super.config();
        ui.css = "webix_dark";
        return ui;
    }
}

Do not forget to override the default class with the new one.

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

Related sample:  Report Manager: Dark Toolbar

Adding richselect to the toolbar

Create a custom class (CustomToolbar) and inherit it from the default reports.views["toolbar"] one. Inside the config method add a new element to the JSON configuration as the following:

class CustomToolbar extends reports.views["toolbar"] {
  config() {
    let ui = super.config();
    let elements = ui.elements;
 
    // adding richselect to the toolbar elements array
    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;
  }
}

Do not forget to override the default class with the new one.

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

Related sample:  Report Manager: Adding Richselect

Back to top