Documentation

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 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");

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

{ 
    id:     "menu", 
    view:   "button", 
    type:   "iconButton", 
    css:    "webix_fmanager_back", 
    icon:   "bars", 
    width:  37 
}

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

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

Spacer

The spacer is used to separate the Menu and Back buttons.

{
    id:     "menuSpacer", 
    width:  65
}

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:   "iconButton", 
    css:    "webix_fmanager_back", 
    icon:   "angle-left", width: 37
}
 
//the Forward button
{ 
    id:     "forward",
    view:   "button", 
    type:   "iconButton", 
    css:    "webix_fmanager_forward", 
    icon:   "angle-right", 
    width:  37
}

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:       "iconButton", 
    css:        "webix_fmanager_up", 
    icon:       "level-up", 
    disable:    true, 
    width:      37
}

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 
}

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",  
   value:   settings.mode,
   options: [
      // options
   ]
}

The options are specified as an array:

[
    {
        id: "files",
        width: 32,
        value: "<span class=\"webix_fmanager_mode_option webix_icon fa-th\"></span>"
    },
    {
        id: "table",
        width: 32,
        value: "<span class=\"webix_fmanager_mode_option webix_icon fa-list-ul\"></span>"
    }
]

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

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

bodyLayout

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

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 $$("actions") method to File Manager:

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

By default, actions menu contains the following data array:

[
    {
        id: "copy", 
        method: "markCopy",  
        icon: "copy", 
        value: webix.i18n.filemanager.copy // "Copy"
    },
    {
        id: "cut", 
        method: "markCut", 
        icon: "cut", 
        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: "deleteFile", 
        method: "deleteFile", 
        icon: "times", 
        value: webix.i18n.filemanager.delete // "Delete"
    },
    {
        id: "edit", 
        method: "editFile",  
        icon: "edit", 
        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
  • value - {string} the action title

You can reload data using the following approach:

var actions = $$("fmanager").$$("actions");
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");
Back to top