How to Add a JavaScript Report Viewer to Your Web Application

September 30 2022

Prerequisites

This article assumes you are using Visual Studio Code as your text editor.

In this blog, we will show you How to Add a VanillaJS Viewer Component to your ARJS Application, following these steps:

Setting Up the Vanilla JS Application in VS Code
Installing the ARJS Dependencies
Adding the Host Element for the Viewer Component
Creating a Report File
Initializing the Viewer Component
Running the Project

Introduction

ActiveReportsJS is a 100% client-side reporting solution that you can easily integrate into your front-end application, regardless of its framework. This article provides a simple yet comprehensive guide on integrating the ActiveReportsJS Viewer component into a Vanilla JS application.

Ready to deliver customized, professional reports in no time? Download ActiveReportsJS Today!

Setting Up the Vanilla JS Application in VS Code

If you don’t already have a JavaScript project created, you can start by creating a folder named ARJS-viewer-app. If you’d like to do this through the Visual Studio Code terminal, you can create the folder by running the following command:

mkdir ARJS-viewer-app

Afterward, within VS Code, select File > Open Folder and select ARJS-viewer-app to open the directory. Now that we’re in the right place, we can type this command to create the index.html file:

touch index.html

Now that we have the file created, we can paste the following boilerplate code into it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>ARJS VanillaJS Viewer Application</title>
    <meta name="description" content="VanillaJS Report Viewer" />
    <meta name="author" content="GrapeCity" />
  </head>
  <body></body>
</html>

Installing the ARJS Dependencies

Since we just created a simple HTML page for this walkthrough, the easiest way to include the ActiveReportsJS dependencies is by adding script tags that reference the GrapeCity CDN. We will include scripts that reference ar-js-core, ar-js-viewer, and other export packages to make everything function correctly. We will also include links to the CSS styles used for the default viewer and UI components. Paste the following code into the head of your HTML:

<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/3.2.0/styles/ar-js-ui.css"
  type="text/css"
/>

<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/3.2.0/styles/ar-js-viewer.css"
  type="text/css"
/>

<script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-viewer.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-pdf.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/3.2.0/dist/ar-js-html.js"></script>

When working with larger or more complex applications, it is possible to install the references through the node package manager. For more information, please read through our installation documentation.

Adding the Host Element for the Viewer Component

We will now add a div element to our HTML that will host the viewer component. For now, let’s paste the following code inside of our body tags:

<div id="viewer-host"></div>

We can also add styling for this element so that it takes up the full width and height of the browser window. For this tutorial, we can just add the CSS in the head tag at the top of the page:

<style>
  #viewer-host {
    width: 100%;
    height: 100vh;
  }
</style>

Creating a Report File

Since ARJS uses report files that have the .rdlx-json extension, we can design a report through the Standalone Report Designer, create a file and structure it with JSON syntax, or programmatically generate one by using our Core API. For this tutorial, we will create our file and paste in some JSON. To start, paste the following command into the VS Code terminal:

touch report-test.rdlx-json

As mentioned before, we can now use JSON syntax to create the structure of our report. Let’s start with the following code to create a basic report file:

{
  "Name": "Report-test",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "textBox1",
        "Value": "Thanks for reading the article!",
        "Style": {
          "FontSize": "20pt"
        },
        "Width": "8.5in",
        "Height": "1in"
      }
    ]
  }
}

Initializing the Viewer Component

Now that we have added the #viewer-host div to our file and the appropriate styling, the next step is to initialize the report viewer component within JavaScript code. At the bottom of the index.html file’s body element, add this script. This will tell the viewer where to live on the page, as well as what report to render to the browser:

<script>
  var viewer = new ActiveReports.Viewer("#viewer-host");
  viewer.open("report-test.rdlx-json");
</script>

Running the Project

Per our documentation, you can use the http-server package to test the application on localhost. To install the npm package globally, run the following command in the same VS Code terminal:

npm install -g http-server

After it’s installed, run the ‘http-server’ command to create a local server on your machine. In the terminal, there will be a guide on how to access your file with a specific port number. In a web browser, navigate to the provided URL, such as ‘localhost:80’.

If all goes well, you should see the viewer component on the page and the report you created through JSON.

Final Points

If something didn’t go as expected during this guide, please browse our JavaScript integration guide or open a ticket with our support team. Now that you have created this run-of-the-mill ARJS viewer application, you can experiment further with our viewer themes and toolbar customization, read through our in-depth API for steps on how to create a report through code, or check out the localization options we offer.

As always, thank you so much for using ActiveReportsJS!

Ready to deliver customized, professional reports in no time? Download ActiveReportsJS Today!