Get Free Trial
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    Save and restore the report

    All your configurations for Flexmonster are contained in a report. Each report can be saved and restored in the component.

    This guide contains the following sections:

    Note In Flexmonster, you can also export and share your report.

    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",
    	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",
    	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 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",
    	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.

    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.

    Configs that are not saved in the report

    The saved report can contain only configurations set in the ReportObject and GlobalObject. The configurations listed below are not saved:

    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.

    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: