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.


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

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


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;
    var label = labels[sizeIndex];
     // locale format
    var getFormatedValue = webix.Number.numToStr({
        decimalSize : isInt?0:webix.i18n.groupSize
    return getFormatedValue(value)+""+label;


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

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


Specifies properties for a newly created folder.

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


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;


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

templateIcon: function(obj,common){
    return "<span class='webix_icon webix_fmanager_icon fm-"

Related sample:  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"
Back to top
If you have not checked yet, be sure to visit site of our main product Webix mvc library and page of html5 file manager product.