ActiveReportsJS Report Designer: Integration

ActiveReportsJS Report Designer is a JavaScript component that allows integration in a variety of front-end solutions. The exact method of integration depends on the architecture of the application. This page provides several recipes for the most popular front-end frameworks. Designer component is distributed within the @grapecity/activereports npm package, therefore its installation is the prerequisite for a JS bundler-based application like an Angular-CLI, CRA or Vue-CLI application.

Angular applications

Initialization of the report designer component can be done in the ngAfterViewInit callback of a hosting component, for example:

import { Component, AfterViewInit } from "@angular/core";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";

@Component({
  selector: "app-designer-host",
  template: "<div id='designer-host'></div>",
  styleUrls: ["./designer-host.component.css"],
})
export class DesignerHostComponent implements AfterViewInit {
  constructor() {}

  ngAfterViewInit() {
    new ReportDesigner("#designer-host");
  }
}

Check Getting Started page for the complete tutorial of using ActiveReportsJS Report Designer in an Angular application. Visit the Live Demo for the complete example.

React applications

Initialization of the report designer component can be done in the componentDidMount handler of a hosting component or the useEffect hook that uses the empty list of dependencies so that the React engine only calls it once.

import React from "react";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";

const initDesigner = (designerHostSelector) => {
  new ReportDesigner(designerHostSelector);
};

export const DesignerHost = () => {
  React.useEffect(() => initDesigner("#designer-host"), []);
  return <div id="designer-host"></div>;
};

Check Getting Started page for the complete tutorial of using ActiveReportsJS Report Designer in a React application. Visit the Live Demo for the complete example.

Vue applications

Initialization of the report designer component can be done in the mounted hook, for example:

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

<script>
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";

export default {
  name: "DesignerHost",
  mounted: function() {
    new ReportDesigner("#designer-host");
  },
};
</script>

Check Getting Started page for the complete tutorial of using ActiveReportsJS Report Designer in a Vue application. Visit the Live Demo for the complete example.

Pure JavaScript applications

Pure JavaScript applications can use the scripts hosted on the CDN,

<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>

Once these scripts are referenced, GC.ActiveReports.ReportDesigner.Designer constructor becomes available in the global scope and can be used to initialize the designer component, for example:

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

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

Check Getting Started page for the complete tutorial of using ActiveReportsJS Report Designer in a pure JavaScript application. Visit the Live Demo for the complete example.