Customizing File Manager

File 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.

Jet App and Inner Modules

File Manager is built as a Jet App and wrapped into a Webix view, so you can initialize it in either of the ways.

Views

The interface of File 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 File Manager and where they are in the interface.

Models/Services

File Manager models contain the logic for loading, storing and caching data, uploading files, displaying progress of save operations, etc. They are defined as Jet Services.

The sources for models (Jet Services) are located in the sources/models folder.

models
  Backend.js
  Cache.js
  Local.js
  Operations.js
  Progress.js
  Upload.js

Service methods are called by the UI and can be called by a programmer as:

$$('fm').getService('operations').remove(selected);

Customizing Views

• you can override the config() method for changes in the UI
• you can override the init() for changes in the UI and behavior
• you can override any existing method but with a caution
• you can add and call your own methods

Firstly, create you own view class by inheriting it from one of the default views or from filemanager.views.JetView:

class CustomTopBar extends fileManager.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: 'filemanager',
    url: 'https://docs.webix.com/filemanager-backend/',
    override: new Map([[fileManager.views.topbar, CustomTopBar]]),
});

Single Display Mode

To show a particular tab ("cards", "table", "total") without the ability to switch between them, hide the Tabbar component from fileManager.views.topbar class:

class CustomTopBar extends fileManager.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:"filemanager",
    mode: "cards", //show any tab other than "table"
    override: new Map([[fileManager.views.topbar, CustomTopBar]]),
}

Related sample:  File Manager: Single Mode

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 fileManager.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:

• using the $$(id) method of JetView.

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

• using queryView if localId is not defined.

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

Customizing Jet Services

• you can add and call your own methods
• you can override any existing method but with a caution

Firstly, create your own service class and inherit it from one of the default services:

class MyBackend extends filemanager.services.Backend {
    folders() {
        // client-side data
        return webix.promise.resolve(folders);
    }
}

Secondly, replace the default service via the override map:

webix.ui({
    view: 'filemanager',
    url: 'https://docs.webix.com/filemanager-backend/',
    override: new Map([[filemanager.services.Backend, MyBackend]]),
});

Related sample:  File Manager: Local Data

You can find more information about File Manager Backend service in the Working with Server article.

Backward Compatibility

File Manager is extremely flexible when it comes to customizations: you can change almost anything in it. However, keep in mind the following:

• The inner logic of File Manager modules may change in future releases.
• We will try to maintain method signatures, but breaking changes might happen if they are necessary for further development of the widget.

Back to top