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 jQuery and Flexmonster. Our sample is based on the jquery shim sample that is provided in the RequireJS docs.

Project structure

It’s important to follow the project structure and configure shim for jQuery and Flexmonster. 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
  - jquery.js – jQuery library
  - 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>jQuery+RequireJS Sample Page</title>
        <script data-main="js/app" src="js/lib/require.js"></script>
    </head>
    <body>
        <h1>jQuery+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"
    },
    "shim": {
        "flexmonster/flexmonster": ["jquery"]
    }
});

/* 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(["jquery", "flexmonster/flexmonster"], function($) {
    $("#fm-container").flexmonster({
    	componentFolder: "js/lib/flexmonster/",
	    width: "100%",
	    height: "500",
	    toolbar: true,
	    licenseKey: "XXX",
	    report: "http://www.flexmonster.com/download/report.xml"
    });
});