What You Will Need
- ActiveReportsJS
- Visual Studio Code
Controls Referenced
Tutorial Concept
Learn how to seamlessly integrate a JavaScript Report Viewer intro your web application. Allow your users to interact with dynamic reports with ActiveReportsJS, a client-side JavaScript reporting tool.
The shift towards web and cloud-based applications has empowered users with access to business-critical information anytime, anywhere. ActiveReportsJS extends this convenience to company reports, allowing users to easily view and analyze data from any device with a web browser.
ActiveReportsJS is a client-side reporting tool with highly interactive features. It provides both report viewer and report designer components that can be easily integrated into JavaScript applications as well as applications that use any of the major frameworks.
In this blog, we’ll learn how to add a JavaScript Report Viewer component to your JavaScript application by following the steps below:
- Set Up the JavaScript Application in VS Code
- Reference ARJS Dependencies
- Add the Host Element for the Viewer Component
- Create a Report File
- Initialize the Viewer Component
- Run the Project
You can also follow along with the video below:
Set Up the JavaScript Application in VS Code
If you haven’t already created a JavaScript project, 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, select File > Open Folder within VS Code and select ARJS-viewer-app to open the directory. Now that we’re in the right place, we can run 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 JavaScript Viewer Application</title>
<meta name="description" content="JavaScript Report Viewer" />
<meta name="author" content="MESCIUS" />
</head>
<body></body>
</html>
Reference 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 referencing the MESCIUS CDN. We will include scripts referencing 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.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css"
type="text/css"
/>
<link
rel="stylesheet"
href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css"
type="text/css"
/>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-html.js"></script>
When working with larger or more complex applications, the references can be installed through the node package manager. For more information, please read our installation documentation.
Add the Host Element for the Viewer Component
We will now add a div element to our HTML to host the viewer component. For this example, let’s paste the following code inside of our body tags:
<div id="viewer-host"></div>
We can also add styling for this element to take up the entire 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>
Create a Report File
Since ARJS uses report files with 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 using our Core API. For this tutorial, we will create our file and paste in some JSON. To start, run the following command into the VS Code terminal:
touch report-test.rdlx-json
As mentioned before, we can 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"
}
]
}
}
Initialize 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 the JavaScript code. At the bottom of the index.html file’s body element, add the following script tag:
<script>
var viewer = new ActiveReports.Viewer("#viewer-host");
viewer.open("report-test.rdlx-json");
</script>
This will tell the report viewer to bind itself to the div with the id of viewer-host, as well as what report to render to the browser.
Run 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, you will find 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.
Conclusion
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 to create a report through code, or check out the localization options we offer.
Top comments (0)