Configuring File Manager

As a complex widget, File Manager consists of many stand-alone Webix views with its own API.
You can redefine inner views and also you can work with the specific File Manager settings.

Basic Configuration

You can use the following settings to provide the basic config of the widget:

  • id (string, number) - the ID of a widget;
  • url (string, function, object) - the URL for loading data;
  • locale (object) - name of the language in use;
  • width (number) - widget width;
  • height (number) - widget height.

Reactive Configuration

In addition, File Manager has a specific reactive properties that store global app state and let developers track its changes:

  • mode (string) - set the currently/initially visible tab. Possible values are "list" (default), "cards" and "double";
  • path (string) - sets the currently/initially opened folder;
  • selectedItem (array) - stores array of selected items;
  • search (string) - stores text in the search input;
  • clipboard (string) - stores clipboard contents.

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:"filemanager", id:"fm",
    mode:"cards"
});
 
var state = $$("fm").getState();
/*
{
    mode:"cards", path:"/Docs/Test files",
    selectedItem:[ ], search:"", clipboard:null
}
*/

How to Listen to Changes of the Reactive Properties

You can use $observe handler to listen to changes and provide custom handlers for them:

webix.ui({
    view:"filemanager",
    on: {
        onInit: app => {
            const state = app.getState();
 
            //log path and selectedItem
            state.$observe("path", v => $$("path").setValue(v));
            state.$observe("selectedItem", v =>
                $$("files").setValue(v.map(a => a.id).join(", "))
            );
        },
    }
});

Related sample:  File Manager: Listening to States

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

Back to top