All your configurations for Flexmonster are contained in a report. In this guide, you can learn how each report and its configurations can be saved and restored in the component.
In Flexmonster, you can also export, share, or print your report.
The saved report can contain only configurations set in the ReportObject and GlobalObject, for example:
The configurations listed below are not saved:
Reports are saved in JSON format. You can save your report:
To save your report to the local file system, select the Save Toolbar tab or call the save() method with the destination: "file" parameter:
let pivot = new Flexmonster({
container: "pivotContainer",
componentFolder: "node_modules/flexmonster/",
toolbar: true,
report: {
// Report configuration
}
});
pivot.save({
filename: "report.json",
destination: "file"
});
If you need to edit the report before saving it, we recommend getting the report as a ReportObject. Switch to the As a ReportObject tab to learn more.
To save your report to a remote server, call the save() method with the destination parameter set to "server" and the url parameter set to the server's address:
let pivot = new Flexmonster({
container: "pivotContainer",
componentFolder: "node_modules/flexmonster/",
report: {
// Report configuration
}
});
pivot.save({
filename: "report.json",
destination: "server",
url: "https://example.com/save-report",
serverContentType: "application/json"
});
Notice serverContentType: "application/json" — we recommend adding this configuration since it allows saving large report files and simplifies parsing of the report on the server.
When the save() method is called, Flexmonster creates an XMLHttpRequest object and sends it in a POST request to the server you specified in the url parameter. Your server must handle the request and save the report. Here is an example of getting the report on the server using Node.js and Express:
server.post("/save-report", async (req, res) => {
// You can save the report to the database, the server, etc.
console.log("Flexmonster report:");
console.log(req.body);
res.json("Success!");
});
If you need to edit the report before saving it, we recommend getting the report as a ReportObject. Switch to the As a ReportObject tab to learn more.
When saving the report as a ReportObject, you can:
To get the report as a ReportObject, use the getReport() method:
let pivot = new Flexmonster({
container: "pivotContainer",
componentFolder: "node_modules/flexmonster/",
toolbar: true,
report: {
// Report configuration
}
});
function customSaveFunction() {
let report = pivot.getReport();
// Parse, change, or save the report to a custom location
}
In Flexmonster, you can save reports with default or global settings. It can be done using the following saving options:
withDefaults — allows saving the report with default configs.withGlobals — allows saving a report with global configs.These options are available for both getReport() and save() methods.
Here is an example:
pivot.getReport({
withGlobals: true,
withDefaults: true
});
You can use the saved report file as a preset for Flexmonster so the component is loaded with a certain report configuration.
To preset the report configuration, copy the content of the saved report file and paste it into the report property when initializing the component. Watch our video tutorial that gives a general overview of this approach:
You can restore a report in the following ways:
To load a report from the local file system, select Open > Local report on the Toolbar or call the open() method:
pivot.open();
See an example with the open() method on JSFiddle.
To load a report from a remote server, select Open > Remote report on the Toolbar or call the load() method:
pivot.load("https://example.com/get-report");
See an example with the load() method on JSFiddle.
Note The load() method can be used to load a report from a file on a server or from a server-side script that returns the report as a JSON object.
When restoring the report from a ReportObject, you can:
To set the report as a ReportObject, use the setReport() method:
function customRestoreFunction() {
// Get report from any location
let report = {
// Your report configuration
};
pivot.setReport(report);
}
1) Save the report with global and default configurations:
pivot.save({
withGlobals: true,
withDefaults: true
});
2) Save the initial report and restore it when needed:
let report;
let pivot = new Flexmonster({
container: "pivot-container",
report: {
// Report configuration
},
reportcomplete: () => {
report = pivot.getReport();
pivot.off("reportcomplete");
}
});
function restoreInitialConfiguration() {
pivot.setReport(report);
}
3) Save the report to the local storage and restore it on a page refresh.
This example shows how to save component configurations to the browser’s local storage and restore them on page reload.
Other examples of saving and restoring the report can be found on the Examples page.
You may be interested in the following articles: