Save and restore the 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:

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  report: {
    // Report configuration
  }
});

pivot.save({ 
  filename: "report.json", 
  destination: "file"
});

Live example

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:

const pivot = new Flexmonster({
  container: "pivotContainer",
  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:

• 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:

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  report: {
    // Report configuration
  }
});

function customSaveFunction() {
  let report = pivot.getReport();
  // Parse, change, or save the report to a custom location
}

Live example

To save reports with default settings, use the withDefaults: true saving option:

pivot.save({
  withDefaults: true
});

Note You can also use withDefaults for the getReport() API call.

In the saved report, Flexmonster includes default values for configurations that are not defined in the ReportObject:

{
  "dataSource": {
    "type": "csv",
    "browseForFile": false,
    "filename": "data/data-fr.csv",
     // Other dataSource properties with default values
  },
  "slice": {
    // Slice configs, including the ones with default values
  },
  "options": {
    "viewType": "grid",
    "grid": {
      "showGrandTotals": "rows",
      // Other grid options with default values
    },
    "chart": {
      // Chart options with default values
    },
    "filter": {
      // Filter options with default values
    },
    "readOnly": false,
    "configuratorActive": false,
    "configuratorButton": true,
    // Other options with default values
  }
}

Live example

To save reports with global settings, use the withGlobals: true saving option:

pivot.save({
  withGlobals: true,
});

Note You can also use withGlobals for the getReport() API call.

Check out the structure of the saved report:

{
  "dataSource": {
    "type": "csv",
    "filename": "data/data-fr.csv"
  },
  "slice": {
    // Slice configs
  },
  "options": {
    "grid": {
      "showGrandTotals": "rows"
    },
    "defaultHierarchySortName": "desc"
  },
  "localization": "loc/fr.json"
}

The report configurations are saved based on the following principles:

• If a configuration is set globally but not specified in the report, the global value will be included in the saved report (e.g., options.defaultHierarchySortName in the report above).
• If a configuration exists both globally and in the report, the report-level value will be saved (e.g., localization in the report above).
• If the report overrides a global configuration with a value that matches the configuration’s default value, this setting will not be included in the saved report (e.g., options.readOnly in the report above). 
• If the global config matches the default value, it will not be saved (e.g., options.grid.showHeaders in the report above).

Live example

To save reports with both default and global settings, use the withDefaults: true and withGlobals: true saving options:

pivot.save({
  withGlobals: true,
  withDefaults: true
});

The saved report will look as follows:

{
  "dataSource": {
    "type": "csv",
    "browseForFile": false,
    "filename": "data/data-fr.csv",
     // Other dataSource properties with default values
    },
  "slice": {
    // Slice configs, including the ones with default values
  },
  "options": {
    "viewType": "grid",
    "grid": {
      "showGrandTotals": "rows",
      "showHeaders": true,
      // Other grid options with default values
    },
    "chart": {
      // Chart options with default values
    },
    "filter": {
      // Filter options with default values
    },
    "defaultHierarchySortName": "desc",
    "readOnly": false,
    "configuratorActive": false,
    "configuratorButton": true,
    // Other options with their default values
  },
  "localization": "loc/fr.json"
}

In the saved report:

• localization is defined in the report, so the global configuration is ignored.
• options.readOnly is defined in both global and report configs, but the report-specific value is saved.
• options.defaultHierarchySortName is only set globally, so it’s saved from the global config.
• options.grid.showGrandTotals is defined only in the report and will be saved accordingly.
• All other options are saved with their default values because withDefaults: true is used.

Live example

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:

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

Live example