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

Loading a report to the ActiveReportsJS Designer

The setReport method allows loading a specific report to the instance of the ActiveReportsJS designer component. This method accepts either the URL that is accessible within the application : setReport({<id: URL>}) or the report definition object : setReport({definition: <ReportDefinition>}). Optionally, the object passed to the setReport method could include the displayName property that indicates a report's human-friendly name. The id property's value initially matches the URL for the setReport({<id: URL>}) form and can be passed with the argument of the setReport({definition: <ReportDefinition>}) form as well. This page provides recipes for several common scenarios.

Setting the initially displayed report

By default, the instance of the ActiveReportsJS Report Designer component displays the blank RDL report. To alter this behavior, call the setReport method right after the designer instance's initialization. Check Integration page for more information on initializing the designer component in various application types. Here is the example of setting the initially displayed report in a React application. Visit the Live Demo for the complete examples for React, Angular, Vue, and pure JavaScript applications.

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

const initDesigner = (designerHostSelector) => {
  const designer = new ReportDesigner(designerHostSelector);
  // set the initially displayed report to "company-template"
  designer.setReport({ id: "/reports/company-template.rdlx-json" });
};

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

Enabling "New Report" button

The ActiveReportsJS Report Designer component contains the "New Report" button on the toolbar. It is not enabled and not visible by default, however. The code should set up the onCreate action handler for the designer component instance to enable this button. Check Action Handlers page for more information. onCreate handler should return the Promise that resolves to either a report link or a report definition - the structure of these objects is the same as the setReport argument described above. Here is the example of onCreate handler for a React application. Visit the Live Demo for the complete examples for React, Angular, Vue, and pure JavaScript applications.

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

const initDesigner = (designerHostSelector) => {
  const designer = new ReportDesigner(designerHostSelector);
  designer.setActionHandlers({
    onCreate: function () {
      return Promise.resolve({ id: "/reports/company-template.rdlx-json" });
    },
  });
};

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

Enabling "Open Report" button

The ActiveReportsJS Report Designer component contains the "Open" button on the toolbar. It is not enabled and not visible by default, however. The code should set up the onOpen action handler for the designer component instance to enable this button. Check Action Handlers page for more information. The onOpen handler should return the Promise that resolves to either a report link or a report definition - the structure of these objects is the same as the setReport argument described above. Visit the Live Demo for the complete examples for React, Angular, Vue, and pure JavaScript applications.

Loading a report in response to UI events

An application can also use the setReport method to load a report at any time of the lifecycle. Here is the example of the React application that invokes the setReport method in the click event handler of the button that resides outside the designer component. Visit the Live Demo for the complete examples for React, Angular, Vue, and pure JavaScript applications.

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

export const DesignerHost: React.FC = () => {
  const designerRef = React.useRef<ReportDesigner | undefined>();
  React.useEffect(() => {
    designerRef.current = new ReportDesigner("#designer-host");
  }, []);
  const resetDesigner = (reportId: string) => {
    designerRef.current?.setReport({ id: reportId });
  };
  return (
    <Fragment>
      <button onClick={() => resetDesigner("/reports/company-template.rdlx-json")}>
        Set New Report
      </button>
      <div id="designer-host"></div>
    </Fragment>
  );
};