Preview a report with the ActiveReportsJS Designer

ActiveReportsJS Report Designer does not have the out-of-the-box preview functionality, and the hosting application's code has to set it up. This page provides recipes for several common scenarios.

Enabling the "Preview" button

The ActiveReportsJS Report Designer component contains the Preview button on the toolbar. It is not enabled and not visible by default, however. The code should configure the onRender action handler for the designer component to enable this button. Check Action Handlers page for more information. The ActiveReportsJS Designer invokes the onRender handler when a user clicks the Preview button. The designer passes the currently displayed report's info consisting of the id, display name, and the report definition in the first argument. The onRender handler could load the report definition in ActiveReportJS viewer or export the report to one of the supported formats. For more information, check the following pages:

Here is the example of the onRender handler for a React application that displays the currently displayed report in the ActiveReportsJS Report Viewer.

import React from "react";
import "./App.css";
import {
  Viewer as ReportViewer,
  Designer,
} from "@grapecity/activereports-react";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";
import "@grapecity/activereports/styles/ar-js-designer.css";

function App() {
  const viewerRef = React.useRef();
  const [viewMode, setViewMode] = React.useState(false);
  const onRender = (report) => {
    setViewMode(true);
    viewerRef.current?.Viewer.open(report.definition);
    return Promise.resolve();
  };

  return (
    <div id="app-host">
      <div id="designer-host" hidden={viewMode}>
        <Designer onRender={onRender} />
      </div>
      <div id="viewer-host" hidden={!viewMode}>
        <ReportViewer ref={viewerRef} />
      </div>
    </div>
  );
}
export default App;

Visit the Live Demo for the complete examples for React, Angular, Vue, and pure JavaScript applications.

Preview reports in response to UI events

An application could use the getReport method of the ActiveReportJS Designer instance to obtain the currently displayed report info. Use this approach to add a custom Preview Report UI that exports a report to one of the supported formats. Here is an example of such an implementation for an Angular application.

import { Component, ViewChild } from '@angular/core';
import { DesignerComponent } from '@grapecity/activereports-angular';
import { Core, PdfExport } from '@grapecity/activereports';

@Component({
  selector: 'app-root',
  template:
    '<div id="designer-host"><button (click)="onPdfPreview()">Pdf Preview</button><gc-activereports-designer [report]="report"> </gc-activereports-designer></div>',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild(DesignerComponent, { static: false })
  reportDesigner: DesignerComponent;

  report = { id: 'assets/report.rdlx-json', displayName: 'my report' };

  onPdfPreview = async () => {
    const reportInfo = await this.reportDesigner.getReport();
    const report = new Core.PageReport();
    await report.load(reportInfo?.definition);
    const doc = await report.run();
    const result = await PdfExport.exportDocument(doc);
    result.download('exportedreport.pdf');
  };
}

Visit the Live Demo for the complete examples for React, Angular, Vue, and pure JavaScript applications.

Preview a report with the ActiveReportsJS Designer

Enabling the "Preview" button

Preview reports in response to UI events

Related Links