Working with Server

Loading Data

Report Manager expects a backend server to fetch data. You can provide a link to it by the url setting:

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

Report Manager will load and save data using the next URLs:

modules (e.g. http://localhost:3200/api/modules) - get and save modules (reports);
queries (e.g. http://localhost:3200/api/queries) - get and save queries.
objects (e.g. http://localhost:3200/api/objects) - get reports data sources;
fields (e.g. http://localhost:3200/api/fields/{field_name}/options, http://localhost:3200/api/fields/{field_name}/suggest) - manipulate fields.

Sample backend for Report Manager is available for downloading.

If you do not have a backend server, you can customize the methods of the Backend service and provide client-side data as a promise.

Backend Service

Backend service is a server-side model that contains methods for sending requests. They are called by the Local service when data needs to be loaded or saved.

Check out the full list of methods below.

How to customize backend model

To change data requests, get and process the responses you can:

create your own backend service by extending the default one;
define and override the needed methods;
use custom backend service instead of the default one by including it into the override map.

class MyBackend extends reports.services.Backend {
    // define and override methods here
}
 
webix.ui({
    view: "reports",
    url:"https://docs.webix.com/reports-backend/",
    override: new Map([[reports.services.Backend, MyBackend]]),
});

Changing calls to server

You can send AJAX requests to your server by using the needed URLs, e.g.:

Saving a module

class MyBackend extends reports.services.Backend {
  saveModule(id, data) {
    return webix.ajax("//localhost:3200/modules", {id, data})
      .then(res => res.json());
  }
}

Parsing client-side data

Client-side data

class MyBackend extends reports.services.Backend {
    getModules() {
      return webix.promise.resolve(modules);
    }
  }
}

See the required format of the incoming data.

Backend Service methods

Below you can find descriptions of the following methods:

deleteModule()
deleteQuery()
getData()
getFieldData()
getModels()
getModules()
getOptions()
getQueries()
saveModule()
saveQuery()

getModules()

Is called upon widget initialization.

Returns: a promise that resolves with an array of modules (reports).

Request:

GET http://localhost:3000/api/modules

Response:

The server returns an array of module objects.

[
  {
    id: 22,
    name: "Company per region",
    text: "{
      "desc":"Created on 10/28/2020",
      "data":"companies",
      "joins":[...],
      "query":"",
      "columns":[{"id":"companies.region_id","name":"Region",...],
      "group":{"by":[{"id":"companies.region_id"}],"columns":[...]},
      "meta":{"freeze":1},"sort":null}",
    updated: "2020-10-29T12:38:14Z"
  },
  // other modules
]

saveModule(id, data)

Saves a new/updated module to the server.

Returns: a promise that resolves with a module ID object.

Request:

// new module
POST http://localhost:3000/api/modules
// updated module
PUT http://localhost:3000/api/modules/21
Form data
name: Persons per company
text: "{/* module config */}"

Response:

The server returns a module ID object.

{"id":21}

deleteModule(id)

Deletes a specified module.

Parameters:

id (number) - module ID.

Returns: a promise that resolves with a module ID object.

Request:

DELETE http://localhost:3000/api/modules/42

Response:

The server returns a module ID object.

{"id":42}

getQueries()

Is called when user opens the report queries tab.

Returns: a promise that resolves with an array of queries.

Request:

GET http://localhost:3000/api/queries

Response:

The server returns an array of query objects.

[
  {
      "id":20,
      "text":"{...query config}",
      "name":"My Filter"
  },
  {
      "id":29,
      "text":"{...query config}",
      "name":"Copy of My Filter"
  },
  // other queries 
]

saveQuery(id, data)

Saves a new/updated query to the server.

Returns: a promise that resolves with a query ID object.

Request:

// new query
POST http://localhost:3000/api/queries
// updated query
PUT http://localhost:3000/api/queries/32
Form data
name: New Query
text: {...query config}

Response:

The server returns a query ID object.

{"id":32}

deleteQuery(id)

Deletes a sprecified query.

Parameters:

id (number) - query ID.

Returns: a promise that resolves with a query ID object.

Request:

DELETE http://localhost:3000/api/queries/id

Response:

The server returns a query ID object.

{"id":14}

getModels()

Is called when user opens report settings.

Returns: a promise that resolves with a hash of data sources.

Request:

GET http://localhost:3000/api/objects

Response:

The server returns an object with the data sources for reports.

{
  companies: {id: "companies", name: "Companies",…}
  persons: {id: "persons", name: "Persons",…},
  products: {id: "products", name: "Products",…},
  sales: {id: "sales", name: "Sales",…}
}

getData(config)

Loads report data. The method is called when user clicks on a report.

Parameters:

config (object) - report configuration object.

Returns: a promise that resolves with an array of report data.

Request:

POST http://localhost:3000/api/objects/api/objects/sales/data
Form data
query: 
columns: ["companies.name","sum.products.price",...]
joins: [{"sid":"sales","tid":"products",...]
limit: 
group: ["companies.name","year.sales.when"]

Response:

The server returns report data.

[
  {
    "companies.name":"Beatty Group",
    "sum.products.price":"199884",
    "year.sales.when":"1900"
  },
  {
    "companies.name":"Beatty Group",
    "sum.products.price":"133256",
    "year.sales.when":"1901"
  },
  // other objects
]

getOptions(field)

Is called when user selects a data source.

Parameters:

field (array) - an array of columns the options are requested for.

Returns: a promise that resolves with an array of option objects.

Request:

GET http://localhost:3000/api/fields/persons.company_id/options

Response:

The server returns an array of option objects.

[
  {"id":"1","value":"South"},
  {"id":"2","value":"North"},
  // other options
]

getFieldData(field)

Is called when user selects a query field.

Parameters:

field (string) - field ID.

Returns: a promise that resolves with an array of field options.

Rquest:

GET http://localhost:3000/api/fields/persons.phone/suggest

Response:

The server returns an array of field options.

["1042288384","1053082574",...]