ActiveReportsJS 디자이너로 보고서 로드

보고서 정보 개체

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


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 메서드를 호출합니다. 다양한 응용 프로그램 유형에서 디자이너 컴포넌트 초기화에 대한 자세한 내용은 통합 페이지를 확인하십시오. 다음은 React 응용 프로그램에서 처음 표시되는 보고서를 설정하는 예입니다. React, Angular, Vue 및 순수 JavaScript 응용 프로그램에 대한 전체 예제는 라이브 데모를 참조하십시오.

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

"새 보고서" 버튼 사용

ActiveReportsJS 보고서 디자이너 컴포넌트의 도구 모음에는 새 보고서 버튼이 있습니다. 그러나 이 버튼은 사용하도록 설정되어 있지 않아 기본적으로 표시되지 않습니다. 이 버튼을 사용하도록 설정하려면 코드에서 디자이너 컴포넌트 인스턴스에 대해 onCreate 작업 처리기를 구성해야 합니다. 자세한 내용은 작업 처리기 페이지를 확인하십시오. onCreate 처리기는 보고서 정보 개체를 확인하는 Promise 개체를 반환해야 합니다. 다음은 React 응용 프로그램의 onCreate 처리기에 대한 예입니다. React, Angular, Vue 및 순수 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 작업 처리기를 구성해야 합니다. 자세한 내용은 작업 처리기 페이지를 확인하십시오. onOpen 처리기는 보고서 정보 개체를 확인하는 Promise 개체를 반환해야 합니다. React, Angular, Vue 및 순수 JavaScript 응용 프로그램에 대한 전체 예제는 라이브 데모를 참조하십시오.

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

또한 응용 프로그램에서는 setReport 메서드를 사용하여 라이프 사이클의 모든 시점에서 보고서를 로드할 수 있습니다. 다음은 디자이너 컴포넌트 외부에 있는 버튼의 클릭 이벤트 처리기에서 setReport 메서드를 호출하는 React 응용 프로그램의 예입니다. React, Angular, Vue 및 순수 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>
  );
}