Adding New Mode, JavaScript Programming Example of Adding New Mode in File Manager

webix.ready(function() {
  webix.CustomScroll.init();

  class SpaceChartView extends fileManager.views.JetView {
    config() {
      return {
        view: "treemap",
        localId: "space",
        template: a => a.value,
        value: a => a.size,
      };
    }
    init() {
      const state = this.getParam("state");
      this.on(state.$changes, "path", v => {
        this.app
          .getService("local")
          .files(v)
          .then(fs => this.$$("space").sync(fs));
      });
    }
  }

  // customize the top bar, to use the above new mode
  class CustomTop extends fileManager.views.top {
    ShowMode(value, old) {
      const state = this.getParam("state");

      if (value === "space") {
        const folders = this.$$("folders");
        folders.showBatch("tree");
        this.show("custom.space", {
          target: "center",
          params: { state },
        });
      } else {
        super.ShowMode(value, old);
      }
    }
  }

  // add new option to modes selector
  class CustomTopBar extends fileManager.views.topbar {
    config(value, old) {
      const ui = super.config();
      const cols = ui.cols[1].rows[0].cols;
      const modes = cols[cols.length - 1];
      modes.width += 42;
      modes.options.push({
        value: "<span class='space_option'>S</span>",
        id: "space",
      });
      return ui;
    }
  }

  webix.ui({
    view:"filemanager",
    url: "https://docs.webix.com/filemanager-backend/",
    mode: "space",
    views: { "custom.space": SpaceChartView },
    override: new Map([
      [fileManager.views.top, CustomTop],
      [fileManager.views.topbar, CustomTopBar],
    ]),
  });
});