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’ll break down how to add and customize the Report Viewer component in your React application. We’ll be covering the following 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

Installing the Dependencies

First, you’ll need to create a React application; to create one, run the following command:

    npm install @grapecity/activereports-react

Once you’ve created your React application, we’ll need to install the ActiveReportsJS React package. We’ll be using NPM to install ActiveReportsJS. To do so, run the following command:

    npm init react-app arjs-viewer-app

Importing the Styles

Once we’ve installed the React packages, we can import the ActivReportsJS Report Viewer styles files. We’ll also style a div element that we’ll use to host the Report Viewer component:

    @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

Next, we’ll need to add an ActiveReportsJS report file to our application. For the purposes of this demo, we’ll manually create a report, however you can feel free to use a report created with the Report Designer component.

Since ActiveReportsJS reports use the .rdlx-json extension, we can format the properties and controls of the report via JSON syntax. Add a new file to your application’s public folder and name it report-text.rdlx-json. Within that file, add the following JSON:

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

This will create a report that contains a textbox that reads “Testing the textbox!”.

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;

Here, we import the Viewer component from the ActiveReportsJS React module. We then initialize it in markup, and bind the report that we created to the report property.

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 rather use pre-created themes, there is a wide selection that you can learn about here.

Final Points

After following the steps in this walkthrough, you should now be able to add the React Report Viewer component to your 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!