How to Use a JavaScript Reporting Tool within an Express.js Application

ActiveReportsJS is a 100% client-side reporting tool with zero server dependencies. It means that you can use ActiveReportsJS together with any web framework, including Express.js. This article contains a simple yet thorough tutorial on integrating ActiveReportsJS with an Express.js application. By the end, you will be able to do the following:

• Create a new Express.js application
• Create an app route to retrieve the data from a SQLite database in JSON format
• Create an ActiveReportsJS report to visualize the retrieved JSON data
• Create a static HTML page to host the ActiveReportsJS Report Viewer component and display the report

Ready to Use JavaScript Reporting Tools? Download ActiveReportsJS today!

Prerequisites 

The following content assumes that you have ActiveReportsJS installed on your machine. You can obtain it from the ActiveReportsJS website if you don't have it. Node.js is required to be installed as well. 

Create an Express.JS application

To create a new Express.js application, run the following command from a terminal or command prompt.

mkdir ReportingOnNode
cd ReportingOnNode
npm init -y
# if you prefer using yarn:
# yarn init -y if you prefer using yarn
npm i express better-sqlite3
# if you prefer using yarn:
# yarn add express better-sqlite3

Then open the newly created ReportingOnNode directory in your favorite code editor, such as Visual Studio Code.

Add Application Data

In this article, we will be using the Chinook SQLite database. Create the “data” folder in the application's root, and download and unpack the content of the chinook.zip file into that folder. Then add the "services" folder in the application's root and create the "services/customers.js" file with the following content.

const sqlite = require('better-sqlite3');
const path = require('path');
 
const db = new sqlite(path.resolve('data/chinook.db'), {fileMustExist: true});
 
function getCustomers(){
    var query = "SELECT CustomerId, FirstName, LastName, Country FROM customers";
    return db.prepare(query).all();
}
 
module.exports = getCustomers;

Next, add the "routes" folder into the application's root and create the "routes/customers.js" file with the following content.

const express = require('express');
const router = express.Router();;
const getCustomers = require('../services/customers');
 
router.get('/', function(req, res, next) {
  try {
    res.json(getCustomers());
  } catch(err) {
    console.error(`Error while getting customers `, err.message);
    next(err);
  }
});
 
module.exports = router;

Finally, create the "index.js" file in the application root and add the code that runs the application and initializes the "customers" route.

const express = require('express');
const app = express();
const port = 3000 || process.env.PORT;
const customersRouter = require('./routes/customers');
 
app.use(express.static('static'))
 
app.use('/customers', customersRouter);
 
app.listen(port, () => {
  console.log(`The app listening at http://localhost:${port}`);
});

Run the website locally using the "node index.js" command and open the http://localhost:3000/customers URL in a browser. You can see the customer list in JSON format.

Create an ActiveReportsJS Report

Let's create a report that visualizes these data from the GraphQL API.

In the Standalone Report Designer Application, click the File menu and select the Continuous Page Layout template for a newly created report.

Open the Data panel of the property inspector and click the Add button.

In the Data Source editor dialog, type "Chinook" for the NAME field, http://localhost:3000/customers for the ENDPOINT field, and click the Save Changes button.

Click the + icon near DataSource in the Data panel.

In the Data Set Editor dialog, type Customers in the NAME field and $.* in the JSON Path field.

Click the Validate button, ensure that the DataBase Fields section displays [4 items] text, and click the Save Changes button.

Drag and Drop the Customers dataset from the data panel into the report body. It will automatically create a Table data region consisting of the Column Headers Row and the Detail Row.

Select each column header and set the Font Weight to Bold using the corresponding button on the toolbar.

Set the Text Alignment of the textbox that displays the CustomerId to Left.

The table design could look like in the following picture:

Click the File menu and save the newly created report in the static folder (it needs to be created) of the application under the name Customers.rdlx-json.

Create an HTML page to display the report

Add the "customers.html" file into the newly created "static" folder with the following content.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customers Report</title>
    <link
    rel="stylesheet"
    href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-ui.css"
    type="text/css"
  />
  <link
    rel="stylesheet"
    href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-viewer.css"
    type="text/css"
  />
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-core.js"></script>
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-viewer.js"></script>
  <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-pdf.js"></script>
  <style>
    #viewer-host {
      width: 100%;
      height: 100vh;
    }
  </style>      
</head>
  
<body>
    <div id="viewer-host"></div>
    <script>
        var viewer = new ActiveReports.Viewer("#viewer-host");
        viewer.open('Customers.rdlx-json');
      </script>  
</body>
</html>

Now you can visit the http://localhost:3000/customers.html URL in the browser, and the page will display the Customers report.

Ready to Use JavaScript Reporting Tools? Download ActiveReportsJS today!