# ActiveReportsJS 디자이너로 보고서 로드

## Content



### 보고서 정보 개체

보고서 디자이너로 보고서를 로드하기 위해 응용 프로그램 내에서 액세스할 수 있는 URL 또는 보고서 정의(JSON 개체로 직렬화된 보고서 구조)를 사용할 수 있습니다. 경우에 따라 보고서 정보는 사람이 식별할 수 있는 보고서 이름을 나타내는 ```displayName``` 속성을 포함합니다. 다음은 보고서 정보 개체의 예입니다.

```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"};
```

이 페이지에서는 여러 가지 일반 시나리오에 대한 사용법을 제공합니다.

### 처음 표시되는 보고서 설정

기본적으로 ActiveReportsJS 보고서 디자이너 컴포넌트의 인스턴스는 비어 있는 RDL 보고서를 표시합니다. 이 동작을 수정하려면 Angular, Vue 또는 React 보고서 디자이너 컴포넌트의 ```report``` 속성을 설정하거나 순수한 JS 응용 프로그램에서 디자이너 인스턴스의 초기화 이후 `setReport` 메서드를 호출합니다. 다양한 응용 프로그램 유형에서 디자이너 컴포넌트 초기화에 대한 자세한 내용은 [통합](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration) 페이지를 확인하십시오. 다음은 React 응용 프로그램에서 처음 표시되는 보고서를 설정하는 예입니다. React, Angular, Vue 및 순수 JavaScript 응용 프로그램에 대한 전체 예제는 [라이브 데모](/activereportsjs/demos/features/designer-report-loading/)를 참조하십시오.

```javascript
import { Designer } from "@grapecity/activereports-react";
function App() {
  return (
    <div id="designer-host">
      <Designer report={{id: "report.rdlx-json"}} />
    </div>
  );
}
```

### "새 보고서" 버튼 사용

ActiveReportsJS 보고서 디자이너 컴포넌트의 도구 모음에는 ```새 보고서``` 버튼이 있습니다. 그러나 이 버튼은 사용하도록 설정되어 있지 않아 기본적으로 표시되지 않습니다. 이 버튼을 사용하도록 설정하려면 코드에서 디자이너 컴포넌트 인스턴스에 대해 `onCreate` 작업 처리기를 구성해야 합니다. 자세한 내용은 [작업 처리기](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Action-Handlers) 페이지를 확인하십시오. `onCreate` 처리기는 [보고서 정보](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#report-info-object) 개체를 확인하는 `Promise` 개체를 반환해야 합니다. 다음은 React 응용 프로그램의 `onCreate` 처리기에 대한 예입니다. React, Angular, Vue 및 순수 JavaScript 응용 프로그램에 대한 전체 예제는 [라이브 데모](/activereportsjs/demos/features/designer-report-loading/)를 참조하십시오.

```javascript
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>
  );
}
```

### "보고서 열기" 버튼 사용

ActiveReportsJS 보고서 디자이너 컴포넌트에는 도구 모음에 ```열기``` 버튼이 있습니다. 그러나 이 버튼은 사용하도록 설정되어 있지 않아 기본적으로 표시되지 않습니다. 이 버튼을 사용하도록 설정하려면 코드에서 디자이너 컴포넌트 인스턴스에 대해 `onOpen` 작업 처리기를 구성해야 합니다. 자세한 내용은 [작업 처리기](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Action-Handlers) 페이지를 확인하십시오. `onOpen` 처리기는 [보고서 정보](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#report-info-object) 개체를 확인하는 `Promise` 개체를 반환해야 합니다. React, Angular, Vue 및 순수 JavaScript 응용 프로그램에 대한 전체 예제는 [라이브 데모](/activereportsjs/demos/features/designer-report-loading/)를 참조하십시오.


### UI 이벤트에 대한 응답으로 보고서 로드

또한 응용 프로그램에서는 `setReport` 메서드를 사용하여 라이프 사이클의 모든 시점에서 보고서를 로드할 수 있습니다. 다음은 디자이너 컴포넌트 외부에 있는 버튼의 클릭 이벤트 처리기에서 `setReport` 메서드를 호출하는 React 응용 프로그램의 예입니다. React, Angular, Vue 및 순수 JavaScript 응용 프로그램에 대한 전체 예제는 [라이브 데모](/activereportsjs/demos/features/designer-report-loading/)를 참조하십시오.

```javascript
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>
  );
}


```

### 관련 항목

- [통합](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Integration)
- [작업 처리기](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSDesignerComponent/Action-Handlers)
- [라이브 데모](/activereportsjs/demos/features/designer-report-loading)