Need a special offer?Find out if your project fits.
+
All documentation
  • Introduction
  • Connecting to Data Source
  • Browser compatibility
  • Documentation for older versions
  • Save and restore the report

    All your configurations for Flexmonster are contained in a report. 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

    The configurations listed below are not saved:

    How to save the report

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

    • Via code
    • To the local file system
    • To a remote server

    Via code

    When getting a report via code, you can:

    • Edit the report programmatically at runtime: add, replace or remove some configurations.
    • Set the report for the component or save it with a custom saving function.

    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 the local file system

    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({ 
      filename: "report.json", 
      destination: "file"
    });

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

    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({ 
      filename: "report.json", 
      destination: "server", 
      url: "https://example.com/", 
      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.

    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.

    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:

    flexmonster.getReport({
      withGlobals: true,
      withDefaults: true
    });

    See a live sample on JSFiddle.

    How to restore the report

    To restore your component configurations, you can:

    • Set a report via code 
    • Open a local report
    • Load a remote report

    Set a report via code

    To restore a report via code, use the setReport() method:

    let report = {  
      // Your report
    };
    
    flexmonster.setReport(report);

    Check out an example on JSFiddle.

    Open a local report

    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.

    Load a remote report

    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.

    Examples

    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.

    What’s next?

    You may be interested in the following articles: