Get Free Trial
API reference
Table of contents

Flexmonster()

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

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

  • container – String. The selector of the HTML element you would like to have as a container for the component.
  • componentFolder – String. 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. Width of the component on the page (pixels or percent). Default value: 100%.
  • height – Number. Height of the component on the page (pixels or percent). Default value: 500.
  • toolbar – Boolean. It indicates whether the toolbar is embedded or not. Default value: false (without the Toolbar).
  • licenseKey – String. The license key. Learn more about managing license keys.
  • report – ReportObject | String. A property to set a report. It can be inline ReportObject or URL to report JSON.
  • globalGlobalObject. It allows you to preset options for all reports. These options can be overwritten for specific reports.
  • accessibility – Object. Allows configuring accessibility in Flexmonster. Has the following properties:
  • customizeCell – Function. Allows customizing of separate cells. Have a look at customizeCell definition and examples.
  • customizeChartElement – Function. Allows customizing separate chart elements in Flexmonster Charts. Have a look at the customizeChartElement definition and examples.
  • customizeContextMenu – Function. Allows customizing the context menu. Have a look at customizeContextMenu definition and examples.
  • customizeAPIRequest – Function. 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. Allows setting custom sorting for Field List items. Have a look at sortFieldsList definition and examples.
  • shareReportConnectionShareReportConnectionObject. 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 handlers can also be set as properties for the Flexmonster object. Check the list here.

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>
	var pivot = new Flexmonster({
		container: "pivotContainer",
		report: {
			dataSource: {
				filename: "data.csv"
			}
		},
		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
	});
</script>

Check out the example on JSFiddle.

2) Add the component with the Toolbar:

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

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

Try the example on JSFiddle.

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>
	var pivot1 = new Flexmonster({
		container: "pivotContainer",
		toolbar: true,
		report: {
			dataSource: {
				filename: "data.csv"
			}
		},
		licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
	});

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

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

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

Try the example on JSFiddle.

4) Set event handler via Flexmonster():

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

Open this example on JSFiddle.

5) How to use customizeCell:

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

Check out the full example on JSFiddle.

See also

List of events