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);
// 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;
},
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 fm-"
+(common.icons[obj.type]||common.icons["file"])+"'></span>";
}
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