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:
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 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.
To change data requests, get and process the responses you can:
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]]),
});
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());
}
}
Client-side data
class MyBackend extends reports.services.Backend {
getModules() {
return webix.promise.resolve(modules);
}
}
}
Related sample: Report Manager: Local Data
See the required format of the incoming data.
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
]
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}
Deletes a specified module.
Parameters:
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}
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
]
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}
Deletes a sprecified query.
Parameters:
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}
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",…}
}
Loads report data. The method is called when user clicks on a report.
Parameters:
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
]
Is called when user selects a data source.
Parameters:
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
]
Is called when user selects a query field.
Parameters:
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",...]
Back to top