Pricing changes are coming in January. Contact our Sales team to secure the current price for your desired license.

Get Free Trial

Save and restore the report

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.

Which configs are saved in the report

The saved report can contain only configurations set in the ReportObject and GlobalObject, for example:

Mapping
Expands and drill-downs
Sorting
Filters
Number and conditional formatting
Localization
Table sizes

The configurations listed below are not saved:

Toolbar customization via beforetoolbarcreated.
Grid customization via customizeCell().
Chart customization via customizeChartElement().
Context menu customization via customizeContextMenu().
Request customization via customizeAPIRequest().
Custom member sorting via sortingMethod().

How to save the report

Reports are saved in JSON format. You can save your report:

To the local file system
To a remote server
As a ReportObject

To the local file system

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 a remote server

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.

As a ReportObject

When saving the report as a ReportObject, you can:

Add, replace, or remove some report configurations before saving the report.
Implement a custom approach to save the report to any location (e.g., the browser's local storage).

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
}

Saving the report with default and global configs

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
});

Using the saved report as a preset

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:

How to restore the report

You can restore a report in the following ways:

From the local file system
From a remote server
From a ReportObject

From the local file system

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.

From a remote server

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.

From a ReportObject

When restoring the report from a ReportObject, you can:

Add, replace, or remove some report configurations before restoring the report.
Implement a custom approach to load the report from any location (e.g., the browser's local storage).

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);
}

Examples

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.

What’s next?

You may be interested in the following articles: