Data Visualization in File Manager

Data items visualization in File Manager is rather flexible, so you can easily customize it by means of redefining the corresponding templates.

Thus, it's possible to specify the necessary date format, set desired icons or change an item's name presentation.

The following templates are available:

• templateName - the template applied for the folder/file's name;
• templateSize - the template applied for the file size;
• templateDate - the template applied for the format of folder/file's date of modification;
• templateCreate - the template for a newly created folder;
• templateIcon - the template for icons used in "Files" and "Table" view modes. The icons are customizable;
• templateType - the template for the type of a file;
• icons - an array of icons. The icons are taken from the File Manager collection.

templateName

Specifies how the folder/file's name will be displayed in File Manager.

templateName: function(fileObj,common){
    return fileObj.value
}

templateSize

Specifies the file size.

templateSize: function(obj,common){
    var value = obj.size;
    var isInt = (parseInt(value,10) == value);
 
    // get size label
    var labels = webix.i18n.filemanager.sizeLabels; // ["B","KB",...]
    var sizeIndex = 0;
    while(value/1024 >1){
        value = value/1024;
        sizeIndex++;
    }
    var label = labels[sizeIndex];
 
     // locale format
    var getFormatedValue = webix.Number.numToStr({
        decimalDelimiter:webix.i18n.decimalDelimiter,
        groupDelimiter:webix.i18n.groupDelimiter,
        decimalSize : isInt?0:webix.i18n.groupSize
    });
 
    return getFormatedValue(value)+""+label;
},

templateDate

Specifies the format of folder/file's date of modification.

templateDate: function(obj){
    var date = obj.date; // 'date' property is Unix time
    if(typeof(date) != "object"){
        date = new Date(parseInt(obj.date,10)*1000);
    }
    return webix.i18n.fullDateFormatStr(date);
},

templateCreate

Specifies properties for a newly created folder.

templateCreate: function(){
    return {value: "newFolder", type: "folder", date: new Date()};
},

templateType

Specifies the type of a file.

templateType: function(obj){
   var types = webix.i18n.filemanager.types;
   return types&&types[obj.type]?types[obj.type]:obj.type;
}

templateIcon

A customizable template for icons in "Files" and "Table" view modes.

templateIcon: function(obj,common){
    return "<span class='webix_icon webix_fmanager_icon fm-"
        +(common.icons[obj.type]||common.icons["file"])+"'></span>";
}

Related sample:  Icons

Icons

The "icons" object contains the File Manager icons collection for templateIcon. It specifies icons that correspond to the loaded file types:

icons: {
    folder: "folder",
    excel: "file-excel",
    pdf: "file-pdf",
    pp: "file-powerpoint",
    text: "file-text",
    video: "file-video",
    image: "file-image",
    code: "file-code",
    audio: "file-audio",
    archive: "file-archive",
    doc: "file-word",
    file: "file"
}