ActiveReportsJS in PureJS

Let us see how to create a web application in PureJS that uses the ActiveReportsJS Viewer component. For information on adding references, see Referencing ActiveReportsJS topic.

ExpressJS application

Prerequisites:

Node.js
Yarn
Express (needs to be installed inside application folder, see Step 3)

The following steps create an ExpressJS application.

Create a new directory to contain your application - in the command console, type

   Mkdir arjs-js

Make this directory your working directory

   cd arjs-js

Install Express by typing following command in the command prompt

   npm install express

   yarn add express

Install the ActiveReportsJS module

   npm install @grapecity/activereports

   yarn add @grapecity/activereports

Create 'index.html' with following content:

If you simply want to view an existing report, place the report in the 'reports' folder near 'index.html' file, and use following content

<html>
   <head>
    <title>ActiveReportsJS Viewer</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-viewer.css" />
    <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ie-polyfills.js"></script> <!--to run in IE-->
    <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
    <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>
</head>
<body onload="load()">
    <div id="ARJSviewerDiv" style="height: 600px"></div>
    <script>
        function load() {
            const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
            viewer.open('/reports/InvoiceList.rdlx-json');
        }
    </script>
</body>
</html>

If you have a report definition in json format and want to see it in viewer, use following content

<html>
    <head>
        <title>ActiveReportsJS Viewer</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-viewer.css" />
        <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ie-polyfills.js"></script> <!--to run in IE-->
        <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
        <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>
    </head>
    <body onload="load()">
        <div id="ARJSviewerDiv" style="height: 600px"></div>
        <script>
            function load() {
                const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
                viewer.open({
                    Type: 'report',
                    Body: {
                        Name: 'Body',
                        Type: 'section',
                        ReportItems: [
                            { Type: 'textbox', Name: 'textbox1', Value: 'Hello from ActiveReportsJS', Height: '10in' }
                        ]
                    },
                    Name: 'Report'
                });
            }
        </script>
    </body>
</html>

Create web server by adding file 'server.js' with following content:

   const express = require('express'); //import Express.js module
   const app = express();
   const path = require('path'); 
   app.use(express.static(path.join(__dirname)));
   app.listen(8085);

In the command console, type

   node .\server.js

Open 'localhost:8085' in your browser. You will get a running application.

ASP.Net Web application

The following steps create an ASP.NET Web application.

Create an Empty ASP.Net Web Application.
Add an HTML Page to your project.
Create 'scripts' folder in your project's root and include following ActiveReportsJS scripts:
- ar-js-core.js
- ar-js-viewer.js
To add export functionality, add following additional scripts:
- ar-js-pdf.js
- ar-js-xlsx.js
- ar-js-html.js
Create 'css' folder in your project's root and include ar-js-viewer.css stylesheet.
Create 'reports' folder and include the report you want to view.
Modify the content of the added HTML Page to
- add necessary references of the viewer scripts and css styles,
- add div element to host the viewer (it requires container height to be defined),
- initialize the viewer component, and,
- open the report in viewer using viewer.open() method.

The content of the HTML Page is as shown.

<html>
    <head>
        <title>ActiveReportsJS Viewer</title>
        <meta charset="utf-8" />

        <link rel="stylesheet" href="css/ar-js-viewer.css" />
        <script type="text/javascript" src="scripts/ie-polyfills.js"></script> <!--to run in IE-->
        <script type="text/javascript" src="scripts/ar-js-core.js"></script>
        <script type="text/javascript" src="scripts/ar-js-viewer.js"></script>
        <script type="text/javascript" src="scripts/ar-js-pdf.js"></script>
        <script type="text/javascript" src="scripts/ar-js-xlsx.js"></script>
        <script type="text/javascript" src="scripts/ar-js-html.js"></script>
    </head>
    <body onload="load()">
        <div id="ARJSviewerDiv" style="height: 600px"></div> <!--define container height-->
        <script>
            function load() {
                const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
                viewer.open('/reports/InvoiceList.rdlx-json');
            }
        </script>
    </body>
</html>

View the HTML Page in your browser. You will get a running application.

Configure ARJS Viewer

Note:

The ar-js-core.js script must be loaded before 'ar-js-viewer.js' script.
If Internet Explorer 11 support is required, you need to add ie-polyfills.js script above 'ar-js-core.js' and 'ar-js-viewer.js' scripts.
You may need to add MIMEType as 'application/json' for .rdlx-json report to your web configuration file, depending on the web server. For example, the below snippet shows the configuration for IIS web server.

 <system.webServer>
     <staticContent>
       <mimeMap fileExtension=".rdlx-json" mimeType="application/json" />
     </staticContent>
 </system.webServer>