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 Font Awesome 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" collection allows specifying Font Awesome icons for the templateIcon. You can specify icons that correspond to the loaded file types. If the collection does not contain an icon for the loaded type, FileManager will set the "default" icon type.

By default, the following icons are set:

icons: {
    folder: "folder",
    doc: "file-word-o",
    excel: "file-excel-o",
    pdf: "file-pdf-o",
    pp: "file-powerpoint-o",
    text: "file-text-o",
    video: "file-video-o",
    image: "file-image-o",
    code: "file-code-o",
    audio: "file-audio-o",
    archive: "file-archive-o",
    file: "file-o"
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.