How to Add a React Report Viewer to Your Web Application

ActiveReportsJS is a client-side reporting solution that can be used in a variety of different front-end frameworks and libraries. From vanilla JavaScript to NuxtJS, ARJS is extremely flexible when designing your application and using its components. In this article, we will discuss how to simply add and customize the viewer component in your React application through Visual Studio Code, following these steps:

  1. Installing the Dependencies
  2. Importing the Styles
  3. Creating a Report File
  4. Integrating the Viewer Component to our App
  5. Running the Application

Ready to Try ActiveReportsJS in Your Web Application? Download Your Free 30-Day Trial!

Installing the Dependencies

If you already have a react app created, let’s start by installing the @grapecity/activereports-react package in your app through the terminal in Visual Studio Code with the following command:

npm install @grapecity/activereports-react

If you don’t have a react app created, please create one first using the following command:

npm init react-app arjs-viewer-app

Importing the Styles

Once the dependencies are installed into our project, we can add the styles to our App.css file to ensure the viewer component displays nicely. We will also style the #viewer-div element that will be hosting our viewer:

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css"; 

#viewer-host {
  width: 100%;
  height: 100vh;
}

Creating a Report File

For the next step, we want to add an ARJS report file to our application. For now, let’s do this either by creating one through code or by dragging a designer-created report into our project folder. Either way, let’s put the report file into the /public directory within our app.

Since our reports use the .rdlx-json extension, we can format the properties and controls that will display within our report by using JSON syntax. For example, we can create a new file through the solution explorer by right-clicking the public folder and selecting 'New File'. Let’s name it ‘report-test.rdlx-json’. Within that file, add the following code:

{
  "Name": "report-test",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Testing the textbox!",
        "Style": {
          "FontSize": "20pt"
        },
        "Width": "8.5in",
        "Height": "1.5in"
      }
    ]
  }
}

If you’d like information on creating a report through our API, look deeply at our documentation here to see what can be added to a report at runtime.

Integrating the Viewer Component to our App

Now in the App.js file, let’s add the following code to get the viewer component to show on our page. This will also link the report we just made to our viewer component.

import React from "react";
import "./App.css";
import { Viewer } from "@grapecity/activereports-react";

function App() {
  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: 'report.rdlx-json' }} />
    </div>
  );
}

export default App;

Running the Application

Occasionally, we will encounter an error that blocks us from using ‘npm start’ while debugging our project. To fix this, change the start script in the package.json file to the following:

"start": "react-scripts --max_old_space_size=8192 start"

Run the project with the ‘npm start’ command in the terminal. If all goes well, you will see the viewer component on your page and the report file embedded within it. If you run into further issues or errors, please open a ticket with our support team for more assistance.

Theme Editor

If you want to customize the report viewer's colors, fonts, and themes, you can do so by using the theme editor found on our website. Select which settings you’d like to use and preview the viewer component on our page. Once you find a theme you love, download the CSS styles from the button at the bottom of the page. Afterward, move the files into the styles folder within your application (node_modules/@grapecity/activereports/styles) to overwrite the default viewer theme. If you would instead use pre-created themes, there is a wide selection that you can learn about here.

Theme Editor

Final Points

After following the steps in this walkthrough, you should know how to add the viewer component to your ARJS react application. The viewer will be great for your reporting needs, given the rich API, customization techniques, and language translation options that ARJS provides. If you have questions regarding more complex use cases, please read through our documentation.

Thanks for using ActiveReportsJS!

Ready to Try ActiveReportsJS in Your Web Application? Download Your Free 30-Day Trial!

Christian Wirt

Technical Engagement Engineer
comments powered by Disqus