Customizing menus, JavaScript Programming Example of Customizing menus in File Manager

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

  class CustomAddNewMenu extends fileManager.views["menus/addnewmenu"] {
    init(view) {
      // default logic
      super.init();

      // remove 'upload' from the menu
      view.queryView("menu").remove("upload");
    }
  }

  // numbers in 'mode' mean that this option will be shown
  // 1) for files only 2) only in the right part of FM
  // (will not be shown if the menu is opened for the left tree)
  const mode = 0x02;
 class CustomMenuBody extends fileManager.views["menus/menubody"] {
  config() {
    const menu = super.config();
    const RIGHT = 0x80; 
        const ITEMS = 0x100;
 
    //add option to the JS config
    menu.data.push({
      id: "clone", value: "Clone",
      show: RIGHT | ITEMS, icon: "wxi-plus",
    });
    return menu;
  }
}
  class Operations extends fileManager.services.Operations {
    initEvents() {
      super.initEvents();

      this.app.attachEvent("app:action", (name, info) => {
        if (name === "clone") {
          this.addToClipboard("copy");
          this.paste();
        }
      });
    }
  }

  var app = new fileManager.App({
    url: "https://docs.webix.com/filemanager-backend/",
    override: new Map([
      [fileManager.views["menus/menubody"], CustomMenuBody],
      [fileManager.views["menus/addnewmenu"], CustomAddNewMenu],
      [fileManager.services.Operations, Operations],
    ]),
  });

  app.render(document.body);
});