# Loading a report into the ActiveReportsJS Designer

Learn how to load a report into the ActiveReportsJS Report Designer component.

## Content

### 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.

```js

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](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/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](/activereportsjs/demos/features/designer-report-loading/) for the complete examples for React, Angular, Vue, and pure JavaScript applications.

```javascript
import { Designer } from "@mescius/activereportsjs-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](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Action-Handlers) page for more information. The `onCreate` handler should return a `Promise` object that resolves to a [report info](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#report-info-object) object. Here is the example of the `onCreate` handler for a React application. Visit the [Live Demo](/activereportsjs/demos/features/designer-report-loading/) for the complete examples for React, Angular, Vue, and pure JavaScript applications.

```javascript
import React from "react";
import { Designer } from "@mescius/activereportsjs-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](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Action-Handlers) page for more information. The `onOpen` handler should return the `Promise` that resolves to a [report info](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#report-info-object) object. Visit the [Live Demo](/activereportsjs/demos/features/designer-report-loading/) 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](/activereportsjs/demos/features/designer-report-loading/) for the complete examples for React, Angular, Vue, and pure JavaScript applications.

```javascript
import React from "react";
import { Designer } from "@mescius/activereportsjs-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>
  );
}

```

### Related topics

* [Integration](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration)
* [Action Handlers](/activereportsjs/docs/v6.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Action-Handlers)
* [Live Demo](/activereportsjs/demos/features/designer-report-loading)