Customizing Document Manager

Document Manager is a complex widget created with Webix Jet, the MV* framework for Webix Library.

Jet App Nature and Class Map

Document Manager is built as a Jet app. A Jet app is an application module that can be used standalone or as a Webix widget. Each Jet app is created as a class that extends the JetApp class. You can read more about JetApp and its API on these pages of Jet docs:

The interface of Document Manager is split in parts. In code, this means that the app module is built from smaller modules called Jet views. One Jet view is one interface part. A Jet view is created as a class that extends the JetView class. You can read more about JetView and its API on these pages of Jet docs:

Jet Views in Document Manager

You can go to this page to see the list of all Jet views and where they are in the interface.

Advantages of Jet-based Approach

  • you can customize any part of Document Manager without the need to change the source
  • you can reuse any module (a view or a service) of Document Manager in your apps
  • customization is simple due to OOP
  • customization allows you to keep the UI and the logic of components together

Code for IE11 and Edge must be with different syntax.

How to Customize Jet Views in Document Manager

Document Manager customizations should follow same patters as File Manager customizations.

How to Make Changes to Views

First, you need to create you own view class and inherit it from one of the default views or from JetView:

class CustomTopView extends docManager.views.top {
    /* your logic that will override or extend the default one */
}

There are two JetView methods that you can safely override to customize views:

  • config() for changes in the UI
  • init() for changes in the UI and behavior
  • you can also add and call your own methods.
class CustomTopView extends docManager.views.top {
    init() {
        // default logic
        super.init();
        // custom logic below
        this.doSomething();
    }
    doSomething(){
        // do something on init
    }
}

Second, replace the default view with the new one:

webix.ui({
    view: "docmanager",
    url: "//localhost:3200/",
    override: new Map([[docManager.views.top, CustomTopView]]),
});

...or add it to the list of views:

webix.ui({
    view:"docmanager",
    url:"//localhost:3200/",
    views: { "custom.top": CustomTopView }
});

Related sample:  Document Manager: Custom View

For more info on customizing, go to File Manager Customization.

Back to top