보고서를 빌드할 때, 작성자가 보고서 작성 단계에서 데이터 할당을 원하지 않는 경우가 있을 수 있습니다.

대신 사용자 선택이나 다른 기준을 통해 런타임 시 데이터를 보고서에 바인딩하고 싶을 수 있습니다.

ActiveReportsJS를 사용하면 런타임에 쉽게 데이터 집합을 바인딩하고 데이터 필드를 할당할 수 있습니다.

이 포스팅에서는 런타임에 데이터를 바인딩할 수 있도록 보고서를 설정하는 방법을 설명합니다.

다음과 같은 주제를 다루게 됩니다.

• 데이터 소스 및 데이터 집합 정의

• 컨트롤 추가 및 데이터 필드 정의

• ActiveReportsJS를 Angular 응용 프로그램에 추가

• 런타임에 동적으로 데이터 바인딩

완료된 응용 프로그램과 보고서를 다운로드받아 확인해 보세요!

• 다운로드하기

데이터 소스 및 데이터 집합 정의 

먼저, 보고서에 사용할 데이터 소스 및 데이터 집합을 설정해야 합니다.

이전에 ActiveReportsJS를 사용한 적이 있다면, 기존 방식으로 데이터 소스 및 데이터 집합을 설정하지 않습니다.

일반적으로, 데이터 소스를 만들 때는 API에 도달하는 데 사용할 ActiveReportsJS의 URL을 제공합니다.  

데이터 집합을 만들 때는 Uri 및 Json 경로를 제공합니다.  

런타임에 바인딩되도록 보고서를 설정할 때는 아무것도 제공하지 않습니다.

보시다시피 모든 항목이 비워져 있습니다. 런타임에 TypeScript를 사용하여 이를 설정할 것이기 때문입니다.

데이터 소스와 데이터 집합을 이렇게 설정하는 이유는 간단합니다.

보고서 디자이너에서 이 항목을 추가하면 그 속성이 rdlx-json 파일에 저장된 JSON에 추가되기 때문입니다.  

이러한 속성을 런타임에 액세스하고 설정할 수 있습니다.

컨트롤 추가 및 데이터 필드 정의 

이제 데이터 소스와 데이터 집합을 통해 rdlx-json에서 JSON 속성이 설정되었으므로 보고서 본문에 컨트롤을 추가할 차례입니다.

이 보고서의 경우, 테이블을 추가합니다.

컨트롤 도구 상자에서 테이블 컨트롤을 드래그하여 보고서 본문에 드롭합니다. 

이제 테이블을 선택하고, 보고서 디자이너의 속성 패널에서 데이터 집합 이름 속성을 TableSet 데이터 집합에 설정합니다.

이제 테이블 컨트롤을 데이터 집합(현재 데이터 없음)에 연결했습니다.

런타임에 이 데이터 집합을 바인딩하면 테이블도 우리가 제공하는 데이터에 바인딩됩니다.

하지만 아직 끝나지 않았습니다.

이제 데이터 집합에 포함될 속성으로 테이블을 설정해야 합니다.

사용할 데이터 집합에는 고객 주문에 따른 정보가 포함될 것입니다. 

데이터 집합에 포함될 예정인 속성 중 일부를 참조하겠습니다.

보통은 보고서가 Angular Report Viewer에서 어떻게 보일지 미리 보려 할 것입니다.

하지만, 보고서를 미리 보려고 하면 오류 메시지가 표시됩니다.

데이터 소스 또는 데이터 집합을 정의하지 않았기 때문입니다. 즉, 참조하려는 속성이 데이터 집합에 없다는 의미입니다.

그렇지만, 이러한 속성은 런타임에 설정될 것이기 때문에 괜찮습니다!

ActiveReportsJS를 Angular 응용 프로그램에 추가 

이제 rdlx-json 파일이 있으므로, 계속해서 ActiveReportsJS Angular Report Viewer를 사용하도록 응용 프로그램을 설정할 수 있습니다.

먼저 ActiveReportsJS Angular 라이브러리를 설치해야 합니다.

ActiveReportsJS를 설치하는 데는 여러 방법이 있지만, 이번 글에서는 NPM을 사용합니다.  

ActiveReportsJS NPM 패키지를 설치하려면, Angular 응용 프로그램 내에서 다음 명령을 실행합니다. 

npm i @grapecity/activereports-angular

패키지 설치가 완료되면 필수 ActiveReportsJS CSS 파일과 모듈을 가져와야 합니다.

CSS의 경우 응용 프로그램의 styles.css 파일 상단에 다음 코드를 추가합니다.

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";

ar-js-ui.css와 ar-js-viewer.css, 두 파일을 가져와야 합니다.

첫 번째는 핵심 CSS 클래스이고, 두 번째 파일에는 Angular Report Viewer 컴포넌트의 CSS 사양입니다. 

모듈의 경우, 다음 코드를 응용 프로그램의 app.module.ts 파일에 추가합니다.

import { ActiveReportsModule } from '@grapecity/activereports-angular';
...
imports:[
  BrowserModule,
  ActiveReportsModule
]

이제 CSS 및 모듈 파일을 가져왔으므로, 마크업 내에서 Angular Report Viewer를 참조할 수 있습니다.

app.component.html 파일 내에서 다음 코드를 추가합니다. 

<div id="viewer-host">
  <gc-activereports-viewer (init)="onViewerInit()"></gc-activereports-viewer>
</div>

여기에서는 Div를 만들고 마크업에서 Report Viewer를 참조합니다.

ID도 부여할 것이며, 자세한 내용은 곧 설명드리겠습니다.

또한 Report Viewer의 init 이벤트에 onViewerInit()이라는 메서드를 호출합니다.

이 이벤트는 Report Viewer가 초기화될 때 호출됩니다. 

이제 app.component.css 파일 내에서 다음 코드를 추가합니다

#viewer-host {
    width: 100%;
    height: 100vh;
}

이전 단계에서 설정된 div를 활용하여 전체 화면을 차지하도록 Angular Report Viewer의 크기를 설정합니다. 

app.component.ts 파일에서 가져오기를 설정하고, 사용자가 보고서를 내보낼 수 있도록 공급자를 포함합니다.

import { ViewerComponent, AR_EXPORTS, PdfExportService, HtmlExportService, TabularDataExportService } from "@grapecity/activereports-angular";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    {
      provide: AR_EXPORTS,
      useClass: PdfExportService,
      multi: true,
    },
    {
      provide: AR_EXPORTS,
      useClass: HtmlExportsService,
      multi: true,
    },
    {
      provide: AR_EXPORTS,
      useClass: TabularDataExportService,
      multi: true,
    }
  ]
})

설정이 완료되었으므로 최종 섹션으로 이동하여 응용 프로그램 런타임에 보고서를 데이터에 바인딩할 수 있습니다.

런타임에 동적으로 데이터 바인딩 

이제 Angular Report Viewer 컴포넌트가 설정되었으므로, 응용 프로그램이 실행될 때 데이터를 보고서에 바인딩할 코드를 작성할 수 있습니다.

먼저 보고서 뷰어 컴포넌트에 대한 참조를 만들고 데이터 집합의 필드를 정의합니다.

@ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;
dataSetFields = [
  {
    "Name": "orderId",
    "DataField": "orderId"
  },
  {
    "Name": "customerId",
    "DataField": "customerId"
  },
  {
    "Name": "employeeId",
    "DataField": "employeeId"
  },
  {
    "Name": "orderDate",
    "DataField": "orderDate"
  },
  {
    "Name": "requiredDate",
    "DataField": "requiredDate"
  },
  {
    "Name": "shippedDate",
    "DataField": "shippedDate"
  },
  {
    "Name": "shipVia",
    "DataField": "shipVia"
  },
  {
    "Name": "freight",
    "DataField": "freight"
  },
  {
    "Name": "shipName",
    "DataField": "shipName"
  },
  {
    "Name": "shipAddress",
    "DataField": "shipAddress"
  },
  {
    "Name": "shipCity",
    "DataField": "shipCity"
  },
  {
    "Name": "shipRegion",
    "DataField": "shipRegion"
  },
  {
    "Name": "shipPostalCode",
    "DataField": "shipPostalCode"
  },
  {
    "Name": "shipCountry",
    "DataField": "shipCountry"
  },
];

reportViewer 변수를 사용하면 TypeScript에서 보고서 뷰어 컴포넌트의 이벤트, 메서드 및 속성을 호출할 수 있습니다.

또한 데이터에 표시될 모든 필드를 정의했으므로 이러한 필드를 보고서의 컨트롤에 바인딩할 수 있습니다. 

다음으로, 데이터를 로드하기 위한 함수를 작성합니다.

데이터 필드를 정의한 부분 아래에 다음 loadData() 메서드를 추가합니다. 

async loadData() {
  const headers = new Headers();
  const dataRequest = new Request(
    "https://demodata.grapecity.com/northwind/api/v1/Orders",
    {
      headers: headers,
    }
  );
  const response = await fetch(dataRequest);
  const data = await response.json();
  return data;
}

보시다시피 매우 간단합니다.

헤더와 데이터 요청을 설정하고 이를 사용하여 데이터를 가져온 다음 반환합니다. 

이제 데이터를 가져올 수 있으므로, 보고서를 로드할 메서드를 설정합니다.

이전 메서드 아래에 이름이 loadReport()인 메서드를 만듭니다.

async loadReport() {
  const reportResponse = await fetch("/assets/DynamicDataBinding.rdlx-json");
  const report = await reportResponse.json();
  return report;
}

마지막으로, 데이터를 보고서에 바인딩하고 보고서를 Angular 보고서 뷰어에 로드해야 합니다.

앞서 마크업에서 뷰어 컴포넌트를 만들 때 메서드를 컨트롤의 초기화된 이벤트에 연결했습니다.

이제 그 메서드를 구현할 차례입니다. 

async onViewerInit() {
  const data = await this.loadData();
  const report = await this.loadReport();
  report.DataSources[0].ConnectionProperties.ConnectString = 'jsondata=' + JSON.stringify(data);
  report.DataSets[0].fields = this.dataSetFields;
  report.DataSets[0].Query.CommandText = 'jpath=$.*';
  this.reportViewer.open(report);
}

여기서 몇 가지 작업을 실행합니다.

첫째, 반환된 데이터를 사용하여 보고서의 데이터 소스에서 사용할 연결 문자열을 설정합니다.

그런 다음, 이전에 만든 데이터 필드 배열을 사용하여 데이터 집합에 포함될 여러 필드를 데이터 집합에 알려줍니다.

엔드포인트에서 사용 가능한 모든 데이터를 가져올 데이터 집합을 알려줍니다.

마지막으로, 보고서 뷰어의 open() 메서드를 호출하고 보고서를 인수로 전달합니다.

응용 프로그램을 실행하면 보고서 뷰어에 다음 내용이 표시됩니다.

결론 

응용 프로그램이 완성되었습니다!

이 문서에서는 ActiveReportsJS 보고서 디자이너를 사용하여 동적 데이터 바인딩을 위해 설정된 보고서를 빌드하는 방법과 런타임에 데이터를 Angular Report Viewer 컴포넌트에 바인딩하는 방법을 살펴보았습니다.

완료된 응용 프로그램과 보고서를 다운로드받아 확인해 보세요!

• 다운로드하기

지금 바로 ActiveReportsJS를 다운로드하여 직접 테스트해보세요!

• ActiveReportsJS 공식 홈페이지
• ActiveReportsJS 튜토리얼 및 샘플
• ActiveReportsJS Q&A
• ActiveReportsJS FAQ