v2.0.0
v2.1.0v2.0.0v1.2.0

Using ActiveReportsJS Report Designer Component in pure JavaScript applications

Create Pure JavaScript Application

Such an application consists of the HTML page and JS scripts. Here is the example of code

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>ARJS Report designer</title>
    <meta name="description" content="ARJS Report designer" />
    <meta name="author" content="GrapeCity" />
  </head>

  <body></body>
</html>

Install ActivereportsJS

We distribute ActiveReportJS scripts and styles via both CDN and NPM. The easiest way to install the ActiveReportsJS report designer to a Pure JavaScript application is to add CDN-based references to the head tag.

<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-designer.css"
  type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-designer.js"></script>

Add the Report Designer Host element

Add the div element that will host the report designer to the body tag.

<div id="designer-host"></div>

Add styles for the designer-host element to head tag

<style>
  #designer-host {
    margin: 0 auto;
    width: 100%;
    height: 100vh;
  }
</style>

Initialize Report Designer component

Add the following script in the body tag right after the designer-host element so that this script would run after the element is rendered.

<script>
  new GC.ActiveReports.ReportDesigner.Designer("#designer-host");
</script>

Run and test the application

Run the application by using opening the HTML page in the browser. The ActiveReportsJS Designer component will appear on the page. Test the basic functionality by adding controls, setting their properties, creating the data source, et cetera. Visit the Developer Guide and the Online Demo for more information on how to use the Report Designer component.