Menu
Download Free Trial
Table of contents

Integration with PhoneGap

This tutorial will help you to integrate Pivot Table Component with PhoneGap. Follow the steps to setup a simple PhoneGap project with Flexmonster Pivot Table:

Step 1. Create new PnoneGap project

  1. Open PhoneGap. If it is not installed, download and install PhoneGap using very detailed step by step instructions here.
  2. Click File. filephonegap
  3. Choose Create new project. newprojectphonegap
  4. Choose Hello World template and click Next. templatephonegap
  5. Enter local path, app name and click Create project. createprojectphonegap
  6. Your project will run automatically. See it by clicking on the IP address at the bottom of PhoneGap window. openprojectphonegap
  7. Make sure you see the default page in the browser. defaultpagephonegap

Step 2. Add Flexmonster files

Copy flexmonster/ from the download package to www/ folder. flexmonsterfolderphonegap

Step 3. Add Flexmonster dependencies to www/index.html

Inside www/index.html find where cordova.js is included. Add jQuery and Flexmonster libraries before cordova.js.

<script type="text/javascript" src="flexmonster/lib/jquery.min.js"></script>
<script type="text/javascript" src="flexmonster/flexmonster.js"></script>
<script type="text/javascript" src="cordova.js"></script>

Step 4. Create Pivot Table

  1. Open www/index.html and create <div> container for the component inside <p class="event received"></p>. Also, remove class="blink" from <div id="deviceready" class="blink">.
    <div class="app">
      <h1>PhoneGap</h1>
        <div id="deviceready">
          <p class="event listening">Connecting to Device</p>
          <p class="event received">
            <div id="pivotContainer" 
            style="position:absolute !important; left:0px; top:0px;"></div>
          </p>
        </div>
    </div>
    
  2. Open www/js/index.js and add simple script to embed the component inside receivedEvent function. Please note, licenseKey is your license or trial key, so you should replace XXX with an actual key.
    // Update DOM on a Received Event
    receivedEvent: function(id) {
      var parentElement = document.getElementById(id);
      var listeningElement = parentElement.querySelector('.listening');
      var receivedElement = parentElement.querySelector('.received');
    
      listeningElement.setAttribute('style', 'display:none;');
      receivedElement.setAttribute('style', 'display:block;');
    
      console.log('Received Event: ' + id);
    
      var pivot = flexmonster.embedPivotComponent(
        "flexmonster/", "pivotContainer", "100%", "100%", 
        { 
          filename: "http://www.flexmonster.com/download/data.csv",
          licenseKey: "XXXX-XXXX-XXXX-XXXX-XXXX"
        }, true
      );
    }
    
  3. See Pivot Table embedded into the project by clicking the IP address at the bottom of PhoneGap window. openprojectphonegap

Open www/css/index.css to configure the style of the component. For example, remove text-transform:uppercase; and letters will become normal sized.

You can download the full example here.