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

JavaScript Adding New Mode With the programming example below you can create a custom mode of displaying files in File Manager. The piece of code is free. Don't miss out on the opportunity to use Webix coding samples to build your business web apps.

JS Code

// create 'filelist' view based  on 'list' view
// and extend it with EditAbility module
webix.protoUI({
  name:"filelist"
}, webix.EditAbility, webix.ui.list);

webix.ready(function(){
  webix.ui({
    view:"filemanager",
    id:"files",
    mode:"custom",
    modes:["files","table","custom"],
    structure:{
      "custom": {
        view: "filelist",
        template: function(obj,common){
          return common.templateIcon(obj,common)+obj.value;
        },
        select: "multiselect",
        // editing options
        editable:true,
        editor:"text",
        editValue:"value",
        // disable editing on double-click
        editaction: false,
        // drag-n-drop
        drag: true,
        // mouse navigation
        navigation: true,
        // tab 'key' navigation
        tabFocus: true,
        // context menu
        onContext:{}
      }
    },
    on:{
      "onViewInit": function(name, obj){
        if (name == "modes"){
          obj.width += 32;
          obj.options.push({
            id: "custom",
            width: 32,
            value: "<span class=\"webix_fmanager_mode_option webix_icon mdi mdi-file-outline\"></span>"
          });
        }
      }
    }
  });

  $$("files").load("https://docs.webix.com/samples/64_file_manager/common/data.php");

});

HTML Code

<link rel="stylesheet" type="text/css" href="//cdn.materialdesignicons.com/2.7.94/css/materialdesignicons.css">