Document Manager is a complex widget that consists of many stand-alone Webix views with its own API. You can redefine inner views and also you can work with the specific Document Manager settings.
The basic configuration for Document Manager is the same as for File Manager.
Basic configuration
const dm = webix.ui({
view: "docmanager",
id: "docmanager",
url: "https://docs.webix.com/docmanager-backend/",
locale: { lang: "ru" },
width: 700,
height: 450
});
Document Manager has same reactive properties as File Manager:
{ files: [{date: dateValue, id: "/Data.xlsx", size: 55215, type: "document", value: "Data.xlsx"}], mode: "copy"}
.Only path and mode properties can be set initially.
You can get the current state of the widget with the help of the getState() method:
webix.ui({
view:"docmanager",
id:"dm"
});
var state = $$("dm").getState();
/*
{
mode: "grid",
selectedItem: [],
search: "",
path: "/",
source: "files",
clipboard: {files: [{...}], mode: "copy"}
}
*/
You can use the $observe handler of a reactive state to listen to changes of its properties and provide custom handlers for them:
webix.ui({
view: "docmanager",
url: "https://docs.webix.com/docmanager-backend/",
on: {
onInit: function(app) {
const state = app.getState();
// log current path
state.$observe("path", v => $$("paths")
.setValue(`The current path is "${v}"`));
// log current source
state.$observe("source", v => $$("sources")
.setValue(`The current source is "${v}"`));
}
}
});
Related sample: Document Manager: Listening to State Changes
In the sample above, the current state is accessed via JetApp instance which is available in the onInit event handler.
Back to top