Configuring Document Manager

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.

Basic Configuration

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
});

Reactive Configuration

Document Manager has same reactive properties as File Manager:

mode (string) - set the currently/initially visible tab. Possible values are "grid" (default), "cards" and "double"
path (string) - sets the currently/initially opened folder within "My files"
source - stores the current group folder ID ("files" - stands for "My files", "trash", "favorite", "recent" or "shared"); if source is not "files", path can be only "/"
selectedItem (array) - stores array of selected items (objects)
search (string) - stores text from the search input
clipboard (object) - stores clipboard data, e.g. { 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"}
}
*/

How to Listen to Changes of the Reactive Properties

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}"`));
    }
  }
});

In the sample above, the current state is accessed via JetApp instance which is available in the onInit event handler.