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.
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:
|
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.
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();
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>
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>
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>
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"); } });
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 }, ... });