[]
DEMO DOCS API
DOWNLOAD
(Showing Draft Content)

ActiveReportsJS React Report Designer

This page provides a detailed overview of the ActiveReportsJS React Report Designer. You can check the Get Started tutorial for a concise guide for integrating the designer component into a React application.

ActiveReportsJS React NPM package

We distribute the library that contains the ActiveReportsJS React Report Designer component via the @mescius/activereportsjs-react npm package. The main @mescius/activereportsjs package provides the core functionality.

ActiveReportsJS React Designer component

ActiveReportsJS React Designer component can be imported to a JSX(TSX) file and included in a component's rendering tree, for example:

import { Designer } from "@mescius/activereportsjs-react";
function App() {
  return (
    <div>
      <Designer />
    </div>
  );
}

The designer component accepts the following properties.

Property

Type

Description

onInit

()=>DesignerConfig

returns the DesignerConfig object that contains the designer's initialization options

customInitTemplates


Obsolete: use the onInit callback instead.

hotkeysEnabled

boolean

Obsolete: use the onInit callback instead.

language

string

Obsolete: use the onInit callback instead.

fontSet

"default" | "registered" | "all"

Obsolete: use the onInit callback instead.

dataSources

array of Data Source Templates

sets the Pre-defined data sources and data sets.

reportList

array of Report Resource Info items

sets the Pre-defined report names for a subreport

imageList

array of Image Resource Info items

sets the Pre-defined images for an Image report item

onCreate

onCreate function

adds the New Report button in the designer toolbar and sets the corresponding click handler

onOpen

onOpen function

adds the Open Report button in the designer toolbar and sets the corresponding click handler

onRender

onRender function

adds the Preview Report button in the designer toolbar and sets the corresponding click handler

onSave

onSave function

adds the Save Report button in the designer toolbar and sets the corresponding click handler

onSaveAs

onSaveAs function

adds the Save As.. button in the designer toolbar and sets the corresponding click handler

onOpenFileMenu

onOpenFileMenu function

adds the "File" menu in the designer toolbar and sets the corresponding click handler

report

Report object

loads the specified report in the designer

documentChanged

(args: DocumentChangedEventArgs)=>void

sets the handler for the event that occurs when a report loaded into the designer changes

Also, the parent component can use the getReport, setReport, and processCommand methods of the Designer class instance by creating the ref for a Designer component, for example

import { Designer } from "@mescius/activereportsjs-react";
function App() {
  const designerRef = React.createRef();
  const btnClick = function () {
    designerRef.current.setReport({id: "report.rdlx-json"});
  };
  return (
    <div id="designer-host">
      <button type="button" onClick={btnClick}>
        Open Report
      </button>
      <Designer ref={designerRef} />
    </div>
  );
}