1.Integration with RequireJS

This tutorial will help you to integrate Pivot Table Component with RequireJS framework. The main purpose of this tutorial is to show the process of setting up RequireJS project with Flexmonster.

Project structure

Let’s overview the sample folder structure:

js/ – folder that contains all JavaScript files
- app/ – folder that contains application JS files
  - main.js – main application JavaScript file
- lib/ – folder that contains project dependencies
  - flexmonster/ – folder with Flexmonster pivot table files
  - require.js – RequireJS library
- app.js – main RequireJS file, contains configuration
app.html – main HTML file, the entry point for your project

Please find contents of key files below.

app.html

<!DOCTYPE html>
<html>
    <head>
        <title>RequireJS Sample Page</title>
        <script data-main="js/app" src="js/lib/require.js"></script>
    </head>
    <body>
        <h1>RequireJS+Flexmonster Sample Page</h1>
        <div id="fm-container"></div>
    </body>
</html>

js/app.js

/* Place third party dependencies in the lib folder.
Configure loading modules from the lib directory, except 'app' ones. */

requirejs.config({
    "baseUrl": "js/lib",
    "paths": {
      "app": "../app"
    }
});

/* Load the main app module to start the app */
requirejs(["app/main"]);

js/app/main.js

/* Please note, licenseKey is your license or trial key, 
so you should replace XXX with an actual key. */

define(["flexmonster/flexmonster"], function() {
    new Flexmonster({
	    container: "fm-container",
    	componentFolder: "js/lib/flexmonster/",
	    width: "100%",
	    height: "500",
	    toolbar: true,
	    licenseKey: "XXX",
	    report: "https://cdn.flexmonster.com/reports/report.json"
    });
});