Customizing File Manager

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

Jet App Nature and Class Map

File Manager 7.2 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 File 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 File 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 File Manager without the need to change the source
  • you can reuse any module (a view or a service) of File Manager in your apps
  • customization is simple due to OOP
  • customization allows you to keep the UI and the logic of components together

However, flexibility comes with responsibility.

Code for IE11 and Edge must be with different syntax.

How to Customize Jet Views in File Manager

You can customize anything in File Manager (within reasonable limits). For example, you can:

Now let's turn to some common tasks with examples.

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 CustomTopBar extends fileManager.views.topbar {
    /* 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 CustomTopBar extends fileManager.views.topbar {
    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: "filemanager",
    url: "//localhost:3200/",
    override: new Map([[fileManager.views.topbar, CustomTopBar]]),
});

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

webix.ui({
    view:"filemanager",
    url:"//localhost:3200/",
    views: { "custom.topbar": CustomTopBar }
});

Changing the UI of Views

We do not recommend to remove anything from the user interface as the inner logic might still try accessing this component. As a result, you might end up with an error. So we recommend to just hide the components.

One of the ways to get to a component is using the $$() method of JetView. The method requires id or localId of a component. Some inner components in Jet views are assigned local IDs. Local IDs are visible only in the scope of the Jet views that contain these components. So the plan is the following:

  1. Before the init of File Manager (either as Webix widget or as a Jet app), extend the Jet view.
  2. Override init() of the view and hide the component.
class CustomTopBar extends fileManager.views.topbar {
    init() {
        // default logic
        super.init();
        // removing components can cause errors
        // hiding components is safe
        this.$$("modes").hide();
    }
}
var app = new fileManager.App({
    url: "//localhost:3200/",
    mode: "cards",
    override: new Map([[fileManager.views.topbar, CustomTopBar]]),
});
 
app.render(document.body);

If the component you want to hide doesn't have localId, you can use queryView instead of this.$$().

const toHide = this.getRoot().queryView(v => {
    // the criteria for search here
});

Related sample:  File Manager: Single Mode

Defining Custom Behavior

You can change the behavior of a view by adding methods to view classes. Follow these steps:

  1. Create a view class.
  2. Define the method.
  3. Call it.
class CustomTopBar extends fileManager.views.topbar {
    config(){
        // get the original ui
        const ui = super.config();
 
        // add a button that will be used to call the custom method
        ui.cols.push({
            view: "button",
            value: "Info",
            // call the custom method
            click: () => this.ShowInfo(),
            width: 100,
        });
 
        return ui;
    }
    ShowInfo() {
        webix.message("Custom button clicked");
    }
}
webix.ui({
    view: "filemanager",
    url: "//localhost:3200/",
    override: new Map([[fileManager.views.topbar, CustomTopBar]]),
});

Related sample:  File Manager: Custom View

Adding Views

New views can be inherited from JetView. Define config() to set up the UI of the view:

// a new mode for browsing directories
class SpaceChartView extends fileManager.views.JetView {
    config() {
        return {
            view: "treemap",
            localId: "space",
            template: a => a.value,
            value: a => a.size,
        };
    }
}

Define init() to change the UI or set up the behavior of the view:

class SpaceChartView extends fileManager.views.JetView {
    config(){ /* the ui */ }
    init(){
        // your custom behavior for the view,
        // e.g. parse files from the current directory into the new view
        const state = this.getParam("state");
        this.on(state.$changes, "path", v => {
            this.app
                .getService("local")
                .files(v)
                .then(fs => this.$$("space").sync(fs));
        });
    }
}

To add the new view into File Manager, use the views property:

var app = new fileManager.App({
    url: "//localhost:3200/",
    mode: "space",
    views: { "custom.space": SpaceChartView },
});
 
app.render(document.body);

Related sample:  File Manager: Custom Mode

Flexibility is Responsibility

Very Important!

File Manager 7.2 is extremely flexible when it comes to customizations. However with flexibility comes great responsibility for your code. Please, keep in mind the following:

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

Overriding Class Methods

You can tune the behavior of views either by creating new methods or by overriding the methods of parent classes. While there is absolutely no problem with new methods, some caution is advised when you override methods. Only two methods are safe to override:

  • init()
  • config()

You can override other methods of view classes, but please keep in mind that their signatures and inner logic might change in the future.

class CustomTop extends fileManager.views.top {
    // "top" has this method, here we'll override it
    ShowMode(value, old) {
        const state = this.getParam("state");
 
        if (value === "space") {
            this.Tree.show();
            this.show("custom.space", {
                target: "center",
                params: { state },
            });
        } else {
            super.ShowMode(value, old);
        }
    }
}

Related sample:  File Manager: Custom Mode

Back to top
If you have not checked yet, be sure to visit site of our main product Webix best ui framework and page of javascript file explorer product.