File Manager Structure

File Manager Layout

File Manager consists of several Webix views.

The main layout includes two rows: a row with a toolbar and the second row with a sublayout that contains Tree and mode views. Thus, the structure of File Manager is:

The layout of File Manager is rather flexible. It means that you can customize it according to your preferences.

For example, if you want to swap one toolbar element with another one or even to remove it, the functionality of File Manager will remain untouched.

You can find more information concerning the possibilities of customizing File Manager views in the article File Manager General How-Tos.

Toolbar

Toolbar is based on Webix Toolbar view.

{
    id:         "toolbar",
    css:        "webix_fmanager_toolbar",
    paddingX:   10,
    paddingY:   5,
    margin:     7,
    cols:[
       // buttons 
    ]
}

You can use the $$("toolbar") method to refer to its object:

var toolbar = $$("fmanager").$$("toolbar");

The Menu button is based on Webix Button control. It is used to activate the Actions menu.

{ 
   id:      "menu",
   view:    "button", 
   type:    "htmlbutton", 
   css:     "webix_fmanager_menu", 
   label:   "<div class='webix_fmanager_bar_icon'></div>",
   width:   37,
   tooltip: webix.i18n.filemanager.actions
}

You can get the reference to its object in the following way:

var menu = $$("fmanager").$$("menu");

Spacer

The spacer is used to separate buttons.

{
    id:     "menuSpacer", 
    width:  75
}

To refer to its object use the $$("menuSpacer") method:

var spacer = $$("fmanager").$$("menuSpacer");

Back and Forward buttons

The Back and Forward buttons are based on Webix Button. They let move back and forward through the navigation history.

//the Back button
{   
    id:      "back",
    view:    "button", 
    type:    "htmlbutton", 
    css:     "webix_fmanager_back",
    label:   "<div class='webix_fmanager_bar_icon'></div>", 
    width:   37,
    tooltip: webix.i18n.filemanager.back
}
 
//the Forward button
{ 
    id:     "forward",
    view:   "button", 
    type:   "htmlbutton", 
    css:    "webix_fmanager_forward",
    label:  "<div class='webix_fmanager_bar_icon'></div>", 
    width:  37,
    tooltip: webix.i18n.filemanager.forward
}

To refer to the object of the buttons, use the $$("back") and $$("forward") buttons, respectively:

//for the Back button
var bback = $$("fmanager").$$("back");
 
//for the Forward button
var bforward = $$("fmanager").$$("forward");

LevelUp button

The Level Up button is based on Webix Button. It selects the parent folder of the selected item (file/folder):

{
    id:      "up",
    view:    "button", 
    type:    "htmlbutton", 
    css:     "webix_fmanager_up",
    label:   "<div class=\"webix_fmanager_bar_icon \"></div>", 
    width:   37,
    tooltip: webix.i18n.filemanager.levelUp
}

You can get the reference to its object in the following way:

var levelUp = $$("fmanager").$$("up");

Path view

The Path view displays the path to the currently selected item (file/folder).

{ 
    id: "path"
    view: "path", 
    borderless: true
}

To refer to its object use the $$("path") method:

var path = $$("fmanager").$$("path");

The Search element is based on Webix Search control and allows searching for files and folders, the names of which contain the entered letter combinations:

{ 
    id:       "search", 
    view:     "search", 
    gravity:  0.3, 
    minWidth: 80, 
    css:      "webix_fmanager_search", 
    icon:     "webix_fmanager_icon" 
}

You can use the $$("search") method to refer to its object:

var search = $$("fmanager").$$("search");

Modes button

The Modes button presents a segmented button, based on Webix Segmented Button control. It lets switch between two modes of displaying folders and files: "Files" and "Table".

{ 
    id:      "modes", 
    view:    "segmented",
    width:   70,
    value:   settings.mode,
    css:     "webix_fmanager_modes",
    options: [
      // options
    ]
}

The options are specified as an array:

[
  {
    id: "files",
    width: 32,
    value: "<div class='webix_fmanager_bar_icon webix_fmanager_files_mode'></div>"
  },
  {
    id: "table",
    width: 32,
    value: "<div class='webix_fmanager_bar_icon webix_fmanager_table_mode'></div>"
  }
]

To refer to its object use the $$("modes") method:

var modes = $$("fmanager").$$("modes");

bodyLayout

bodyLayout includes 3 columns: a layout with Tree, Resizer view and a column with "Files" and "Tree" view modes.

treeLayout

treeLayout includes a treeToolbar and Tree.

treeToolbar

treeToolbar includes 4 elements: the hideTree button, the spacer, the expandAll and collapseAll buttons:

hideTree button

The hideTree button hides/shows the Tree panel.

{ 
   id:      "hideTree",
   view:    "button", 
   type:    "htmlbutton", 
   css:     "webix_fmanager_toggle",
   label:   "<div class="webix_fmanager_bar_icon"></div>", 
   width:   30,
   tooltip: webix.i18n.filemanager.hideTree
}

expandAll button

The expandAll button expands the collapsed Tree.

{ 
    id:      "expandAll",
    view:    "button", 
    type:    "htmlbutton", 
    css:     "webix_fmanager_expand",
    label:   "<div class='webix_fmanager_bar_icon'></div>", 
    width:   30,
    tooltip: webix.i18n.filemanager.expandTree
}

collapseAll button

The collapseAll button collapses the Tree remaining just the root folder visible.

{ 
    id:      "collapseAll",
    view:    "button", 
    type:    "htmlbutton", 
    css:     "webix_fmanager_collapse",
    label:   "<div class='webix_fmanager_bar_icon'></div>", 
    width:   30,
    tooltip: webix.i18n.filemanager.collapseTree
}

Tree

The Tree is based on Webix Tree. It displays the hierarchy of folders and allows navigating through them.

{
    id: "tree",
    width: 230,
    view: "filetree",
    select: true,
    filterMode:{
        showSubItems:false,
        openParents:false
    },
    type: "FileTree",
    // mouse navigation
    navigation: true,
    scroll: true,
    // editing options
    editor:"text",
    editable: true,
    // disable editing on double-click
    editaction: false,
    // drag-n-drop
    drag: true,
    // tab 'key' navigation
    tabFocus: true,
    // context menu
    onContext:{}
}

Tree uses "FileTree" data type that configures folder icons for nodes:

webix.type(webix.ui.tree,{
    name: "FileTree",
    folder: function(obj, common){
        if (obj.icon)
            return "<div class='webix_icon icon fa-folder'></div>";
        if (obj.$count && obj.open)
            return "<div class='webix_icon icon fa-folder-open'></div>";
        return "<div class='webix_icon icon fa-folder'></div>";
    }
});

You can get the reference to tree object in the following way:

var tree = $$("fmanager").$$("tree");

Resizer view

Resizer is a draggable border between the Tree and the File views. It is based on Webix Resizer.

{
    view:"resizer", 
    width:2
}

View modes

These are 2 modes of viewing files of the selected folder: "Files" and "Table". By default, the "Table" mode is active.

Files mode

"Files" mode is based on Webix DataView.

{
    id: "files",
    view: "fileview",
    type: "FileView",
    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:{}
}

"Table" mode is based on Webix DataTable component.

{
    id: "table",
    view: "filetable",
    css: "webix_fmanager_list",
    columns: "columns",
    // editing options
    editable: true,
    // disable editing on double-click
    editaction: false,
    select: "multiselect",
    // drag-n-drop
    drag: true,
    // mouse navigation
    navigation: true,
    resizeColumn:true,
    // tab 'key' navigation
    tabFocus: true,
    // context menu
    onContext:{}        
}

Actions menu

The Actions menu displays actions that can be applied to selected files or folders. It appears by clicking the Menu button or by clicking the right mouse button:

The Actions menu is based on Webix ContextMenu. That's why you can operate its items via TreeStore API.

To refer to the Actions menu, you can apply the getMenu() method to File Manager:

var actions = $$("fmanager").getMenu();

By default, the Actions menu contains the following data array:

[
    {
        id: "copy", 
        method: "markCopy",  
        icon: "copy", 
        batch:"item",
        value: webix.i18n.filemanager.copy // "Copy"
    },
    {
        id: "cut", 
        method: "markCut", 
        icon: "cut", 
        batch:"item",
        value: webix.i18n.filemanager.cut // "Cut"
    },
    {
        id: "paste", 
        method: "pasteFile", 
        icon: "paste", 
        value: webix.i18n.filemanager.paste // "Paste"
    },
    {   $template:"Separator" },
    {
        id: "create", 
        method: "createFolder", 
        icon: "folder-o", 
        value: webix.i18n.filemanager.create // "Create Folder"
    },
    {
        id: "remove", 
        method: "deleteFile", 
        icon: "times", 
        batch:"item",
        value: webix.i18n.filemanager.delete // "Delete"
    },
    {
        id: "edit", 
        method: "editFile",  
        icon: "edit", 
        batch:"item",
        value: webix.i18n.filemanager.rename // "Rename"
    },
    {
        id: "upload", 
        method: "uploadFile", 
        icon: "upload", 
        value: webix.i18n.filemanager.upload  // "Upload"
    }
]

The properties of actions are the following:

  • id - {string} the id of an action
  • method - {string} the name of the method that is used to implement the action
  • icon - {string} an icon from the Font Awesome collection used for the action
  • batch - {string} group that menu item belongs to. Possible value are:
    • "item" - the item will be seen only for data items not empty space;
    • "root" - the item will be seen for the root item only;
    • if batch is not set, the item will be shown for empty space and all items other than root
  • value - {string} the action title

You can reload data using the following approach:

var actions = $$("fmanager").getMenu();
actions.clearAll();
var newData = [{id: "copy", ...},...];
actions.parse(newData);

The add method allows adding a new action to menu:

actions.add({id: "myAction", icon: "file", value: "My Action"});

It is possible to set a click handler for the added action using onItemClick event handler:

actions.attachEvent("onItemClick", function(id){
   if(id == "myAction"){
       // some code here
   }
});

To remove an existing action, you can call the remove method for it:

actions.remove("upload");

It is possible to customize the Actions menu with the help of menuFilter function that can filter menu items before showing a menu on the page.

view:"filemanager",
id: "fmanager",
menuFilter:function(obj){
    //obj - menu item obj
 
    var context = $$("fmanager").getMenu().getContext();
    //dataId - id of the clicked data item
    var dataId = context.id;
 
    if(..some condition ..)
        return false;
    return true;  
}

The function should return true to show the item, false to hide it.

Back to top