Menu
Free Trials
Table of contents

Integration with AngularJS

This tutorial will help you to integrate Pivot Table Component with AngularJS framework. Follow the steps to set up a simple project:

Step 1: Create a new AngularJS project

    1. Create a new folder for the project, i.e. my-angular-project/.
    2. Copy flexmonster/ folder into your project folder. You can find flexmonster/ inside of the package you have downloaded from the site.
    3. Create index.html file inside my-angular-project/ with simple angular app inside:
<!DOCTYPE html>
<html ng-app="App">
<head>
    <title>My AngularJS/Flexmonster Project</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script type="text/javascript">angular.module("App", [ ]);</script>
</head>
<body>
</body>
</html>

    Step 2: Add Flexmonster dependencies

    Add jQuery and Flexmonster libraries to the index.html:

    <!DOCTYPE html>
    <html ng-app="App">
    <head>
        <title>My AngularJS/Flexmonster Project</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
        <script type="text/javascript">angular.module("App", [ ]);</script>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script src="flexmonster/flexmonster.js"></script>
    </head>
    <body>
    </body>
    </html>
    

    Step 3: Initialize Pivot Table

    Add flexmonster module to App and use fm-pivot directive to add FM pivot table to the index.html. After that, an empty grid will be shown. Please note, fm-license-key is your license or trial key, so you should replace XXX with an actual key:

    <!DOCTYPE html>
    <html ng-app="App">
    <head>
        <title>My AngularJS/Flexmonster Project</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
        <script type="text/javascript">angular.module("App", ["flexmonster"]);</script>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script src="flexmonster/flexmonster.js"></script>
    </head>
    <body>
    
    <div fm-pivot 
         fm-toolbar="true" 
         fm-license-key="XXX">
    </div>
    
    </body>
    </html>
    

    Step 4: Load sample report

    To see some data on grid add fm-report attribute with report URL:

    <!DOCTYPE html>
    <html ng-app="App">
    <head>
        <title>My AngularJS/Flexmonster Project</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
        <script type="text/javascript">angular.module("App", ["flexmonster"]);</script>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
        <script src="flexmonster/flexmonster.js"></script>
    </head>
    <body>
    <div fm-pivot 
         fm-toolbar="true" 
         fm-report="'http://www.flexmonster.com/download/report.xml'"
         fm-license-key="XXX">
    </div>
    </body>
    </html>
    

    Properties

    Please note, that every attribute for fm-pivot directive is set either as a string value or as an angular variable. List of available attributes:

    • fm-toolbar – parameter to embed the toolbar or not. Default value is false – without the toolbar.
    • fm-license-key – the license key.
    • fm-width – width of the component on the page (pixels or percent). The default value for width is 100%.
    • fm-height – height of the component on the page (pixels or percent). The default value for height is 500.
    • fm-component-folder – 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. The default value for componentFolder is flexmonster/.
    • fm-report – property to set a report. It can be inline report JSON, URL to report JSON or URL to report XML.
    • fm-global – object that allows you to preset options for all reports. These options can be overwritten for concrete reports. Object structure is the same as for report.

    Event handlers for fm-pivot directive:

    • fm-ready
    • fm-report-complete
    • fm-report-change
    • fm-update
    • fm-cell-click
    • fm-cell-doubleclick
    • fm-filter-open
    • fm-fields-list-open
    • fm-fields-list-close

    All attributes are equal to those which are passed to $.flexmonster(). The only difference is that fm- prefix was added to each of them.

    Examples

    Please find more examples on GitHub of Pivot Table Component integration with AngularJS framework.