Integration with Electron.js

This tutorial describes how to integrate Flexmonster Pivot with Electron.js – a JavaScript framework that allows creating cross-platform desktop applications.

Prerequisites

Node.js
Flexmonster CLI
Install it with the following command:
```
npm install -g flexmonster-cli
```

Run a sample project from GitHub

Create the sample project with the following CLI command:

flexmonster create electron -r

The flexmonster create electron command does the following:

Downloads a .zip archive with the sample Electron project from GitHub.
Automatically unpacks the files in the current folder — as a result, the flexmonster-electron-project/ folder will appear in your working directory.

The -r option, which is short for --run:

Installs all the npm dependencies described in package.json.
Compiles the application and runs it.

Once the command is executed, a desktop application with the pivot table embedded will be launched.

Integrate Flexmonster into an Electron application

This guide is based on the Electron quick start tutorial. Follow the steps below to integrate Flexmonster Pivot into a new Electron.js application.

Step 1. (optional) Create an Electron application

Skip this step if you already have an Electron app.

Step 1.1. Create an empty folder for the new Electron application (e.g., pivot-electron) and run the following command from this folder:

npm init

This command will ask you several questions to generate a basic package.json file. For simplicity, press Enter each time to choose the default options.

The newly created package.json file should look similar to the following:

{
  "name": "pivot-electron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Step 1.2. Install Electron.js in the project by running the following command in the console:

npm install electron

Step 1.3. By default, the npm start command runs the application with Node.js. To run the application with Electron, add the following start script to package.json:

"scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
}

Step 1.4. HTML files define the Electron application’s user interface. Create an HTML file (e.g., index.html) with a simple markup:

<!DOCTYPE html>
<html>
    <head>
        <title>Pivot table for Desktop</title>
    </head>
    <body>
    </body>
</html>

Step 1.5. As specified in the package.json file, the entry point for the application is the index.js file. Create a simple index.js file that waits for the application to be ready and then opens the window:

const { app, BrowserWindow } = require('electron')

function createWindow () {
    // create the browser window
    let win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })
    
    // load the previously created index.html file
    win.loadFile('index.html')
}

// open the window when the application is ready
app.whenReady().then(createWindow)

Step 2. Install Flexmonster

Install Flexmonster by running this CLI command inside your Electron.js project:

flexmonster add js-flexmonster

The add command installs the flexmonster npm package to node_modules/ and adds it as an npm dependency to package.json.

Step 3. Add a container for Flexmonster

In the index.html file, add a container for Flexmonster inside the <body> tag:

<body>
    <div id="pivotContainer"></div>
</body>

Step 4. Create a file with a Flexmonster instance

Create a new .js file (e.g., pivot.js) for Flexmonster. Include the Flexmonster npm module into it and create a new Flexmonster instance:

require('flexmonster');

const pivot = new Flexmonster({
  container: "pivotContainer",
  toolbar: true,
  report: "https://cdn.flexmonster.com/github/demo-report.json"
});

Step 5. Add Flexmonster to the index.html file

Include the script to embed Flexmonster to the index.html file:

<body>
    <div id="pivotContainer"></div>
    <script src="./pivot.js"></script>
</body>

Step 6. Include Flexmonster styles

Include Flexmonster styles into the index.html file as follows:

<head>
    <title>Pivot table for Desktop</title>
    <link rel="stylesheet" type="text/css" 
     href="node_modules/flexmonster/flexmonster.min.css"
    />
</head>

Step 7. Run the project

Run the project from the console with the following command:

npm start

A desktop application with the embedded pivot table will be launched.

To shut down the application, close the application window or press Ctrl + C (Control + C on macOS) in the console.

What’s next?

You may be interested in the following articles:

Changes to Flexmonster Software License Agreement