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:
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);
// apply locale formating
var getFormatedValue = webix.Number.numToStr({
decimalDelimiter:webix.i18n.decimalDelimiter,
groupDelimiter:webix.i18n.groupDelimiter,
decimalSize : isInt?0:webix.i18n.groupSize
});
value = getFormatedValue(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];
return value+""+label;
},
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);
},
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 fa-"
+(common.icons[obj.type]||common.icons["file"])+"'></span>";
},
The "icons" collection allows specifying FontAwesome 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