Loading a report into the ActiveReportsJS Designer

Report Info Object

To load a report into the report designer, you can use either the URL that is accessible within the application or the report definition, which is a report structure serialized to a JSON object. Optionally, the report info includes the displayName property that indicates a report's human-friendly name. Here are examples of the report info objects.


var report = {
  Name: "Report",
  Body: {
    ReportItems: [
      {
        Type: "textbox",
        Name: "TextBox1",
        Value: "Hello, ActiveReportsJS",
        Style: {
          FontSize: "18pt"
        },
        Width: "8.5in",
        Height: "0.5in"
      }
    ]
  }
}

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

var reportInfoDefinition = {definition: report,  displayName: "my report"};

This page provides recipes for several common scenarios.

Setting the initially displayed report

By default, the instance of the ActiveReportsJS Report Designer component displays a blank RDL report. To alter this behavior, you can set the report property of the Angular, Vue, or React Report Designer component or call the setReport method after the designer instance's initialization in a pure JS application. Check the 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 { Designer } from "@grapecity/activereports-react";
function App() {
  return (
    <div id="designer-host">
      <Designer report={{id: "report.rdlx-json"}} />
    </div>
  );
}

Enabling the "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 configure the onCreate action handler for the designer component instance to enable this button. Check Action Handlers page for more information. The onCreate handler should return a Promise object that resolves to a report info object. Here is the example of the 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 } from "@grapecity/activereports-react";
function App() {
  return (
    <div id="designer-host">
      <Designer onCreate={() => Promise.resolve({ id: "reportTemplate.rdlx-json" })} />
    </div>
  );
}

Enabling the "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 configure 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 a report info object. 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 } from "@grapecity/activereports-react";
function App() {
  const designerRef = React.useRef();
  return (
    <div id="designer-host">
      <button
        onClick={() =>
          designerRef.current.setReport({ id: "report.rdlx-json" })
        }
      >
        Open Report
      </button>
      <Designer ref={designerRef} />
    </div>
  );
}