How to Add a React Report Viewer to Your Web Application

As businesses increasingly move to web and cloud-based solutions, users now expect seamless access to important information wherever they are. ActiveReportsJS meets this need by making company reports easily accessible and analyzable on any device with a web browser.

ActiveReportsJS is a powerful client-side reporting tool packed with interactive features. It includes both a report viewer and a report designer, which can be smoothly integrated into React applications, as well as any of the other major frameworks, making it a flexible choice for modern development environments.

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:

• Setting Up the React Application in VS Code

• Installing the ActiveReportsJS Library with NPM or Yarn

• Importing the Viewer and CSS Files

• Creating an ARJS Report File

• Initializing the React Report Viewer Component

• Running the Application

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

Setting Up the React Application in VSCode

First, you’ll need to create an application using React to load the React Report Viewer. In this article, we’ll be using Vite to set up our React application. To create the application, run the following command:

npm init vite arjs-vite-react-app -- template react

If you’re using Yarn, you can accomplish the same with the following command:

yarn create vite arjs-vite-react-app --template react

This will walk you through the process of scaffolding your React application. Once that’s complete, we can move on to installing the ActiveReportsJS library.

Installing the ActiveReportsJS Library with NPM or Yarn

To include the Angular Report Viewer Component in our project, we’ll need to start by installing the ARJS packages through NPM. For this to work, make sure that you open the freshly created project folder in VS Code before running this command in the terminal:

npm install @mescius/activereportsjs-react@latest

If you’re using Yarn, you can install the files with the following command:

yarn add @mescius/activereportsjs-react@latest

Importing the Viewer and CSS Files

With the files now installed, we can go ahead and import the ones that we’ll be using to load the Report Viewer.

First, inside the application’s index.css file, include the following imports:

@import "@mescius/activereportsjs/styles/ar-js-ui.css";
@import "@mescius/activereportsjs/styles/ar-js-viewer.css";

This will import the main UI CSS file, as well as the Viewer’s CSS file. Before leaving this file, there’s one more thing that we’re going to include:

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

This will bind some basic CSS for setting the view and height of an element that has the viewer-host id; we’ll be using that ID later when we initialize the Viewer component.

Then, inside the App.jsx file, add the following import:

import { Viewer } from "@mescius/activereportsjs-react";

This will import the Viewer component, which we can then reference in markup to create the Viewer in the browser.

Creating an ARJS Report File

Since our React Report Viewer component will open ARJS report templates, we will need to configure a report to be displayed by the viewer when it is loaded. Since ActiveReportsJS uses the .rdlx-json extension for its report files, there are a few different routes we can follow to create/add a report to our Angular project. We can structure the report using JSON syntax, create a report programmatically using the ARJS API, or design a report in the Standalone Report Designer.

For this tutorial, we will structure our file using JSON within VS Code. Let’s get started by adding a new file to the public folder and naming it report-test.rdlx-json. Let’s copy this code into the file to embed a report name and basic textbox control into its structure:

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Viewer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

This will create a simple report that contains a textbox that reads “Hello, ActiveReportsJS Viewer”.

Initializing the React Report Viewer Component

With all of the imports complete and the report file created, the last step is to initialize the Report Viewer component in markup. Back in the App.jsx file, add the following to the App() function:

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

We’re doing a few things here. First, we’re creating a div with the ID of viewer-host, which we created earlier and applied some CSS to. Then, we’re calling the Viewer that we had previously imported. Finally, we’re binding the report that we created to the component’s report property in order to load it in.

Running the Project

With everything complete, we’re good to run the application locally. To do so, you can run the following command:

npm run dev

If you’re using Yarn, you can run this command instead:

yarn dev

Once the application compiles, you can navigate to http://localhost:4200, and if all goes well, you should see the React Report Viewer component on the page, as well as the report file that we created. In that case, well done on successfully adding the Report Viewer to your React application!

Conclusion

After reading through the blog, you should feel a little more comfortable knowing that you can easily add ARJS components to your React projects. If some of your questions were left unanswered, or if you are looking for detailed help with a specific scenario, check out our documentation or open a case with our support team. As always, thank you so much for following along and for using ActiveReportsJS!

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