Document Manager is a complex widget created with Webix Jet, the MV* framework for Webix Library. It is a ready-to-use application with minimum configuration settings but has API for redefining the logic of inner modules.
You will need to study the source code to customize views and models.
Document Manager is built as a Jet App and wrapped into a Webix view, so you can initialize it in either of the ways.
The interface of Document Manager is split into parts (views). Each view is a class that extends the JetView class and has own handlers for setting the configuration and logic.
The sources for interface parts (Jet Views) are located in the sources/views folder.
views
cards.js
editor.js
menus
addnewmenu.js
...
Go to the Class Map page to see the list of all Jet views in Document Manager and where they are in the interface.
Document Manager models contain the logic for loading, storing and caching data, working with file versions, manipulating comments and tags, etc. They are defined as Jet Services.
The sources for models (Jet Services) are located in the sources/models folder.
models
Backend.js
LocalData.js
LocalTags.js
LocalUsers.js
Operations.js
Tags.js
Users.js
Versions.js
Service methods are called by the UI and can be called by a programmer as:
$$('dm').getService('versions').restore(id, version);
Firstly, create you own view class by inheriting it from one of the default views or from docmanager.views.JetView:
class CustomTopBar extends docManager.views.topbar {
config() {
// get JSON object with configuration
const ui = super.config();
// exact changes depend on a particular view
ui.height = 50;
return ui;
}
init() {
// call default logic
super.init();
// custom logic below
this.doSomething();
}
doSomething() {
// do something on init
}
}
Secondly, replace the default view via the override map:
webix.ui({
view: 'docmanager',
url: 'https://docs.webix.com/docmanager-backend/',
override: new Map([[docManager.views.topbar, CustomTopBar]]),
});
To show a particular tab ("cards", "grid", "double") without the ability to switch between them, hide the Tabbar component from docManager.views.topbar class:
class CustomTopBar extends docManager.views.topbar {
init() {
// default logic
super.init();
// removing components can cause errors
// hiding components is safe
this.$$('modes').hide();
}
}
Then, replace the default class with a custom one via the override map:
{
view:"docmanager",
mode: "cards", //show any tab other than "grid"
override: new Map([[docManager.views.topbar, CustomTopBar]]),
}
Related sample: Document Manager: Single Mode
You can find more use cases in the How-tos article.
Notes
1. We do not recommend to remove any component from the interface as the inner logic might still try accessing it. Instead, hide the components.
class CustomTopBar extends docManager.views.topbar {
init() {
// default logic
super.init();
// removing components can cause errors
// hiding components is safe
this.$$('modes').hide();
}
}
2. You can access component instances within a Jet view by:
It works for an inner component that is assigned the localId setting.
init() {
// default logic
super.init();
// get instance of the component with "form" localId
this.$$("form").hide();
}
init(view) {
// default logic
super.init();
// get instance of the first segmented button
view.queryView("segmented").hide();
}
3. You can find out whether the app is currently compact from any view or service method as:
const compact = this.getParam('compact', true);
4. You can get state properties from any view or service method as:
const state = this.app.getState();
// or
const state = this.getParam('state');
Firstly, create your own service class and inherit it from one of the default services:
class MyBackend extends docManager.services.Backend {
folders() {
// client-side data
return webix.promise.resolve(folders);
}
}
Secondly, replace the default service via the override map:
webix.ui({
view: 'docmanager',
url: 'https://docs.webix.com/docmanager-backend/',
override: new Map([[docmanager.services.backend, MyBackend]]),
});
Related sample: Document Manager: Data Source
You can find more information about Document Manager Backend service in the Working with Server article.
Document Manager is extremely flexible when it comes to customizations: you can change almost anything in it. However, keep in mind the following:
Code for Edge Сhromium must be with different syntax.