[]
DEMO DOCS THEME EDITOR API
DOWNLOAD
(Showing Draft Content)

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 "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 set up the onRender action handler for the designer component instance to enable this button. Check Action Handlers page for more information. The ActiveReportsJS Designer invokes 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 the instance of ActiveReportJS viewer or export the report to one of the supported formats. For more information, check the following pages:

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

import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
import React from "react";
import {
  RDLReportDefinition,
  Viewer as ReportViewer,
} 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";

export const DesignerHost: React.FC = () => {
  const designerRef = React.useRef<ReportDesigner | undefined>();
  const viewerRef = React.useRef<ReportViewer | null>(null);

  React.useEffect(() => {
    designerRef.current = new ReportDesigner("#designer-host");
    designerRef.current.setActionHandlers({
      onRender(report) {
        viewerRef.current?.Viewer.open(
          report.definition as RDLReportDefinition
        );
        return Promise.resolve();
      },
    });
  }, []);

  return (
    <div id="app-host">
      <div id="designer-host"></div>
      <div id="viewer-host">
        <ReportViewer ref={viewerRef} />
      </div>
    </div>
  );
};

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 the example of such an implementation for a React application.

import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
import React from "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";
import { Core, PdfExport } from "@grapecity/activereports";
import "@grapecity/activereports-localization";

export const DesignerHost: React.FC = () => {
  const designerRef = React.useRef<ReportDesigner | undefined>();

  const onPdfPreview = async () => {
    const reportInfo = await designerRef.current?.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");
  };

  React.useEffect(() => {
    designerRef.current = new ReportDesigner("#designer-host", );
  }, []);

  return (
    <div id="app-host">
      <button onClick={() => onPdfPreview()} id="btn-get-pdf">
        Get PDF Report
      </button>
      <div id="designer-host"></div>
    </div>
  );
};

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