Flexmonster()

new Flexmonster({
container: String,
componentFolder: String,
width: Number | String,
height: Number | String,
toolbar: Boolean,
licenseKey: String | String[],
licenseFilePath: String,
report: ReportObject | String,
global: GlobalObject,
accessibility: Object,
customizeCell: Function,
customizeChartElement: Function,
customizeContextMenu: Function,
customizeAPIRequest: Function,
sortFieldsList: Function,
shareReportConnection: ShareReportConnectionObject,
<event name>: Function
})

Embeds the component into the HTML page. This method allows you to insert the component into your HTML page and provide it with all the necessary information for the initialization. This is the first API call you need to know.

Note Do not forget to import flexmonster.js before you start working with it.

Parameters

Parameter/Type	Description
container String	The selector of the HTML element you would like to have as a container for the component.
componentFolder String	optional URL of the component's folder, which contains all necessary files. Also, it is used as a base URL for report files, localization files, styles, and images. Default value: "flexmonster/".
width Number | String	optional Width of the component on the page (pixels or percent). Default value: "100%".
height Number | String	optional Height of the component on the page (pixels or percent). Default value: 500.
toolbar Boolean	optional It indicates whether the toolbar is embedded or not. Default value: false (without the Toolbar).
licenseKey String | String[]	optional The license key. Can be set as a variable or an inline string. If you have multiple license keys for different environments, specify the licenseKey as an array of strings. The component will use the first valid key from the array. Note that setting multiple keys is available starting from version 2.9.68. To load a license key from a file or a server-side script, use the licenseFilePath property. Learn more about managing license keys.
licenseFilePath String	optional A URL to a file with the license key or to a server-side script that returns a license key. To set a license key as a variable or an inline string, use the licenseKey property. Learn more about managing license keys.
report ReportObject | String	optional A property to set a report. It can be an inline ReportObject or a URL to a report. Specify the report as a URL if your report is: Stored in a JSON file. Returned by a server-side script.
global GlobalObject	optional It allows you to preset configurations for all reports. These configurations can be overwritten for specific reports.
accessibility Object	optional Allows configuring accessibility in Flexmonster.
accessibility.keyboardMode Boolean	optional If set to true, the keyboard focus is visible on UI elements. Learn more about keyboard navigation in Flexmonster. Default value: false.
accessibility.highContrastTheme String	optional Contains a link to a CSS theme that will be used as a high-contrast one. Learn more about using the high-contrast theme in Flexmonster. Default value: "theme/accessible/flexmonster.min.css" (the path is relative to the componentFolder).
customizeCell Function	optional Allows customizing of separate cells. Have a look at customizeCell definition and examples.
customizeChartElement Function	optional Allows customizing separate chart elements in Flexmonster Charts. Have a look at the customizeChartElement definition and examples.
customizeContextMenu Function	optional Allows customizing the context menu. Have a look at customizeContextMenu definition and examples.
customizeAPIRequest Function	optional Allows adding custom properties to the request body before the request is sent to a server. Have a look at customizeAPIRequest definition and examples.
sortFieldsList Function	optional Allows setting custom sorting for Field List items. Have a look at sortFieldsList definition and examples.
shareReportConnection ShareReportConnectionObject	optional Contains configuration needed to load the shared report. This parameter is optional if the Data Server is used as a data source on the page. Otherwise, it is needed to define shareReportConnection. To learn more about report sharing, see the following guide: Share the report.
<event name> Function	optional Allows subscribing to Flexmonster events. <event name> is the event you want to subscribe to. The event’s handler should be specified as the parameter’s value Live example. You can subscribe to as many events via parameters as needed Live example. It is also possible to use the on() method to handle the events.

The only required property is container. If you run new Flexmonster({container: "pivotContainer"}), where "pivotContainer" is the selector of container HTML element, – an empty component without the toolbar will be added with the default width and height.

Returns

Object, the reference to the embedded pivot table. To work with multiple instances on the same page, use these objects. All API calls are available through them.

To get a reference to the component after initialization, use the uielement property of the component’s container:

const flexmonsterAPI = document.getElementById("flexmonsterContainer")
                       .uielement.flexmonster;

Flexmonster’s methods are available through this reference as well:

flexmonsterAPI.getReport();

Examples

1) Add the component instance to your webpage without the Toolbar:

<div id="pivotContainer">The component will appear here</div> 
<script src="flexmonster/flexmonster.js"></script>

<script>
  const pivot = new Flexmonster({
    container: "pivotContainer",
    componentFolder: "node_modules/flexmonster/",
    report: {
      dataSource: {
        filename: "data.csv"
      }
    },
    licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
  });
</script>

Live example

2) Add the component with the Toolbar:

<div id="pivotContainer">The component will appear here</div> 
<script src="flexmonster/flexmonster.js"></script>

<script>
  const pivot = new Flexmonster({
    container: "pivotContainer",
    componentFolder: "node_modules/flexmonster/",
    toolbar: true,
    report: {
      dataSource: {
        filename: "data.csv"
      }
    },
    licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
  });
</script>

Live example

3) Add and operate multiple instances:

<div id="firstPivotContainer">The component will appear here</div> 
<div id="secondPivotContainer">The component will appear here</div> 
<script src="flexmonster/flexmonster.js"></script>

<script>
  const pivot1 = new Flexmonster({
    container: "pivotContainer",
    componentFolder: "node_modules/flexmonster/",
    toolbar: true,
    report: {
      dataSource: {
        filename: "data.csv"
      }
    },
    licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
  });

  const pivot2 = new Flexmonster({
    container: "pivotContainer",
    componentFolder: "node_modules/flexmonster/",
    toolbar: true,
    report: {
      dataSource: {
        filename: "data2.csv"
      }    	
    },
    licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
  });
</script>

<button onclick="javascript: swapReports()">Swap Reports</button>
<script>
  function swapReports() {
    const report1 = pivot1.getReport();
    const report2 = pivot2.getReport();

    pivot1.setReport(report2);
    pivot2.setReport(report1);
  }
</script>

Live example

4) Set event handler via Flexmonster():

const pivot = new Flexmonster ({
  container: "pivotContainer",
  componentFolder: "node_modules/flexmonster/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data.csv"
    }    	
  },
  licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX",
  ready : function () {
    console.log("The component was created");
  }
});

Live example

5) Set multiple license keys:

const pivot = new Flexmonster ({
  container: "pivotContainer",
  componentFolder: "node_modules/flexmonster/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data.csv"
    }        
  },
  licenseKey: [
    // For the production environment
    "XXXX-XXXX-XXXX-XXXX-XXXX",
    // For the development environment
    "YYYY-YYYY-YYYY-YYYY-YYYY"
  ]
});

6) How to use customizeCell:

new Flexmonster({
  customizeCell: function(cell, data) {
    // change cell
  },
  ...
});

Live example

See also

List of events