All your configurations for Flexmonster are contained in a report. Each report and its configurations can be saved and restored in the component.
This guide contains the following sections:
Note 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:
When getting a report via code, you can:
To get your report via code, use the getReport() method:
let pivot = new Flexmonster({
container: "pivotContainer",
componentFolder: "node_modules/flexmonster/",
toolbar: true,
report: {
// some report
}
});
let report = flexmonster.getReport();
// parse, change or save the report for later use
Check out an example on JSFiddle.
To save your report to the local file system, select Save on the Toolbar or use the save() method:
let pivot = new Flexmonster({
container: "pivotContainer",
componentFolder: "node_modules/flexmonster/",
toolbar: true,
report: {
// some report
}
});
flexmonster.save();
See a live sample on JSFiddle.
If you need to edit the report before saving it, we recommend implementing a custom saving function using the getReport() method.
To save your report to a remote server, use the save() method. This method creates an XMLHttpRequest object and sends it in a POST request.
Your server should accept and handle this request. Then the report can be saved to the server or any other location.
Here is an example:
let pivot = new Flexmonster({
container: "pivotContainer",
componentFolder: "node_modules/flexmonster/",
report: {
// some report
}
});
flexmonster.save("https://example.com/");
If you need to edit the report before saving it, we recommend implementing a custom saving function using the getReport() method.
Note In Flexmonster, you can also export your report or share it with other users.
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:
flexmonster.getReport({
withGlobals: true,
withDefaults: true
});
See a live sample on JSFiddle.
To restore your component configurations, you can:
To restore a report via code, use the setReport() method:
let report = {
// Your report
};
flexmonster.setReport(report);
Check out an example on JSFiddle.
To load a report from the local file system, select Open > Local report on the Toolbar or use the open() method:
flexmonster.open();
See the full code on JSFiddle.
To load a report from the specified URL, select Open > Remote report or use the load() method:
flexmonster.load("report.json");
See a live sample on JSFiddle.
Note The load() method can load both reports stored in a file and returned by a server-side script.
1) Save the report with global configurations:
flexmonster.save({
withGlobals: true
});
See an example on JSFiddle.
2) Save the initial report and restore it when needed:
let report;
let pivot = new Flexmonster({
container: "pivot-container",
report: {
// some report
},
reportcomplete: () => {
report = flexmonster.getReport();
flexmonster.off("reportcomplete");
}
});
function restoreInitialConfiguration() {
flexmonster.setReport(report);
}
See a live sample on JSFiddle.
3) Restore the report when refreshing the page.
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: