Configuring Report Manager

As a complex widget, Report 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 Report Manager settings.

Basic Configuration

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

id (string, number) - optional, the ID of a widget;
url (string) - the URL for loading and saving data;
moduleId (string) - the ID of the report currently being viewed;
mode (string) - view mode with possible values:
- "list" - the list of reports opened;
- "view" - a report is opened and "list" closed;
- "edit" - editing form for a report is opened;
toolbar (boolean) - if false hides the toolbar. true by default;
readonly (boolean) - sets Report Manager to a read-only mode. false by default.
locale (string, object) - name of the language in use, or object with locale settings;
width (number) - widget width;
height (number) - widget height.

webix.ui({
  view:"reports",
  url: "https://docs.webix.com/reports-backend/",
  mode: "edit",
  toolbar: false
});

Reactive Configuration

The moduleId, mode, readonly and toolbar properties are also accessible as reactive via the state. They store global app state and let developers track its changes. The state object also contains a couple of read-only properties:

module (object) - JSON that contains module settings ( data source, columns, ...);
saved (boolean) - if true the selected module is saved. false if the module settings are edited but not saved.

You can get the current state of the widget with the help of the getState() method:

webix.ui({
    view:"reports", 
    id:"myReports",
    url: "https://docs.webix.com/reports-backend/"
});
 
const state = $$("myReports").getState();
/*
{
  mode: "edit",
  module: {...report config},
  moduleId: 20,
  readonly:false,
  saved: true,
  toolbar: false 
}
*/

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: "reports",
  url: "https://docs.webix.com/reports-backend/",
  on: {
    onInit: app => {
      const state = app.getState();
      state.$observe("moduleId", id => {
        if(id) webix.message(`ID of this report is ${id}`);
      });
    }
  }
});

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