! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

ActiveReportsJS로 동적 데이터 바인딩을 구현하는 방법 > 온라인 스터디

본문 바로가기

ActiveReportsJS

온라인 스터디

PureJS ActiveReportsJS로 동적 데이터 바인딩을 구현하는 방법

페이지 정보

작성자 GrapeCity 작성일 2022-09-14 10:42 조회 589회 댓글 0건

본문

ActiveReportsJS는 제로 서버 측 종속성이 있는 100% 클라이언트 측 보고 솔루션입니다. 일반적인 경우 서버 측에서 데이터를 JSON 형식으로 반환하는 API를 노출하고 ActiveReportsJS가 다양한 보고서 항목을 사용하여 이 데이터를 시각화합니다.

API는 REST, OData, GraphQL 등 다양한 아키텍처 스타일을 사용할 수 있지만, ActiveReportsJS는 단순히 API에 HTTP 요청을 보내고, JSON 형식으로 응답을 받고 구문 분석하기 때문에 특정 아키텍처에 구애받지 않습니다.


하지만 API 요청은 좀처럼 정적이지 않고 동적입니다. API 요청에 자격 증명을 포함하거나 매개 변수를 제공해야 할 수도 있습니다. 이 문서에서는 ActiveReportsJS를 사용하여 동적 데이터 쿼리를 구현하는 여러 방법을 설명합니다.


  1. 인증

  2. 경로 매개 변수

  3. 쿼리 문자열 매개 변수

  4. GraphQL 쿼리 인수



필수 컴포넌트


데이터 바인딩 문서에서는 ActiveReportsJS에서 데이터를 연결하기 위해 제공하는 방법의 기본 개요를 제공합니다. 다음 내용에서는 이 문서에서 설명하는 개념을 광범위하게 사용하므로 모두 읽어보는 것이 좋습니다.


또한 동적 데이터 바인딩을 위해서는 보고서 매개 변수를 사용하는 것이 매우 중요합니다. 더 읽기 전에 보고서 매개 변수에 대해 알아두면 유용합니다.


ActiveReportsJS를 다운로드하여 동적 데이터 바인딩을 직접 구현해 보십시오!



인증


응용 프로그램에서 사용자에게 자격 증명을 제공하여 로그인하도록 요구한다고 가정하겠습니다. 인증에 성공하면 서버에서 Bearer 인증인증 HTTP 헤더를 사용하여 각 데이터 요청과 함께 포함해야 하는 "액세스 토큰"을 반환합니다. 다음 단계에서는 현재 응용 프로그램 사용자의 액세스 토큰을 보고서의 데이터 요청과 함께 전달하는 기본 기법을 설명합니다.


  1. 보고서 매개 변수를 추가합니다. 데이터 형식String, 이름AccessToken으로 설정하고(또는 다른 유효한 이름을 사용할 수 있습니다), 숨김 플래그를 설정합니다.

AccessToken

  1. 원격 데이터 소스를 보고서에 추가하고 끝점을 API의 루트 URL로 설정합니다.

  2. DataSource 대화 상자에서 새 HTTP 헤더를 추가합니다. 이름Authorization, Bearer {@AccessToken}로 설정합니다. 이 식의 이름은 매개 변수의 값을 가리킵니다.

Contoso

  1. 응용 프로그램에서 Report Viewer 컴포넌트를 사용하여 보고서 출력을 표시한다고 가정합니다. 이 경우 매개 변수 값 설정 기법을 사용하여 현재 사용자의 액세스 토큰을 AccessToken 보고서의 매개 변수 값으로 전달할 수 있습니다. 예:

// this is a pseudo-code that retrieves the access token of a current logged in user
// the specific way to do it depends on the architecture of your application.
const accessToken = authService.getAccessToken();

// pass the obtained accessToken as the report's parameter value
viewer.open("roducts.rdlx-json", {
       ReportParams: [
          {
               Name: "AccessToken",
               Value: [accessToken],
          },
      ],
  });
  1. 응용 프로그램에서 API 호출을 통해 보고서를 내보내는 경우 코드에서 아래와 같이 매개 변수의 값을 전달할 수 있습니다.

async function exportReport(reportUrl) {
 // this is a pseudo-code that retrieves the access token of a current logged in user
 // the specific way to do it depends on the architecture of your application.
 const accessToken = authService.getAccessToken();
 
 var reportDef = await fetch(reportUrl).then((response) =>
   response.json()
);
 const report = new GC.ActiveReports.Core.PageReport();
 await report.load(reportDef);
 report.parameters["AccessToken"].values = [accessToken];
 const doc = await report.run();
 const result = await GC.ActiveReports.PdfExport.exportDocument(doc, {});
 result.download("access-token.pdf");        
}



경로 매개 변수


경로 매개 변수는 API 끝점의 경로 내에 표시됩니다. 예를 들어 https://demodata.grapecity.com/northwind/api/v1/Categories/{id}/Products의 끝점에는 제품 목록을 가져와야 하는 범주를 지정하는 {id} 경로 매개 변수가 있습니다.


응용 프로그램에서 사용자가 Report Viewer 컴포넌트의 기본 제공 매개 변수 패널을 사용하여 이 제품의 범주를 선택할 수 있도록 허용해야 한다고 가정하겠습니다. 다음 단계에서는 Northwind Restful API를 기반으로 이 목표를 달성하는 기본 기법을 설명합니다.


  1. 다음 구성으로 보고서에 데이터 소스를 추가합니다.

노스윈드(Northwind)

  1. 모든 범주의 목록을 가져오는 "범주" 데이터 집합을 추가합니다.

범주

  1. 다음 구성으로 "CategoryID" 매개 변수를 추가합니다.

CategoryID

  1. 경로 매개 변수에 대해 3단계에서 추가된 매개 변수를 사용하는 "제품" 데이터 집합을 추가합니다. "유효성 검사" 버튼을 클릭하면 데이터 집합 대화 상자에 필드 목록을 얻기 위해 매개 변수의 값을 묻는 메시지가 표시됩니다. 1을 입력할 수 있습니다.

제품

  1. 데이터 영역(예: )을 추가하려 제품 데이터 집합을 시각화합니다.

  2. Report Viewer 컴포넌트에서 보고서를 열면 사용자에게 범주를 선택하고 제품을 표시하도록 요청합니다.

Report Viewer



쿼리 문자열 매개 변수


쿼리 문자열 매개 변수는 데이터 요청 URL의 "?" 기호 뒤에 표시됩니다. 예를 들어 OData API는 일반적으로 시스템 쿼리 옵션을 사용하여 특정 필드를 정렬, 필터링, 확장, 자르기 및 선택할 수 있는 기능을 제공합니다.


응용 프로그램에서 Northwind OData API를 사용하여 사용자가 Report Viewer 컴포넌트의 기본 제공 매개 변수 패널을 사용하여 선택해야 하는 범주의 제품 목록을 표시한다고 가정하겠습니다. 다음을 이 목표를 달성하는 방법에 관한 기본 자습서입니다.


  1. 다음 구성으로 보고서에 데이터 소스를 추가합니다.

노스윈드(Northwind)

  1. 모든 범주의 목록을 가져오는 "범주" 데이터 집합을 추가합니다.

범주

  1. 다음 구성으로 "CategoryID" 매개 변수를 추가합니다.

CategoryID

  1. 3단계에서 추가된 매개 변수를 사용하는 "제품" 데이터 집합을 추가하여 $filter 쿼리 매개 변수의 값을 설정합니다. "유효성 검사" 버튼을 클릭하면 데이터 집합 대화 상자에 필드 목록을 얻기 위해 매개 변수의 값을 묻는 메시지가 표시됩니다. 1을 입력할 수 있습니다.

제품

  1. 데이터 영역(예: )을 추가하려 제품 데이터 집합을 시각화합니다.

  2. Report Viewer 컴포넌트에서 보고서를 열면 사용자에게 범주를 선택하고 제품을 표시하도록 요청합니다.

Report Viewer



GraphQL 쿼리 인수


GraphQL API를 사용하는 경우 쿼리 인수는 일반적으로 POST 요청 본문 내에 전달됩니다. 응용 프로그램에서 Northwind GraphQL API를 사용하여 사용자가 Report Viewer 컴포넌트의 기본 제공 매개 변수 패널을 사용하여 선택해야 하는 범주의 제품 목록을 표시한다고 가정하겠습니다. 다음을 이 목표를 달성하는 방법에 관한 기본 자습서입니다.


  1. 다음 구성으로 보고서에 데이터 소스를 추가합니다. Content-Type HTTP 헤더는 GraphQL에 필요한 application/json입니다.

노스윈드(Northwind)

  1. 모든 범주의 목록을 가져오는 "범주" 데이터 집합을 추가합니다. 메서드는 "POST"이면 요청 본문에서는 쿼리에 JSON 형식을 사용합니다.

범주

  1. 다음 구성으로 "CategoryID" 매개 변수를 추가합니다.

CategoryID

  1. 3단계에서 추가된 매개 변수를 사용하는 "제품" 데이터 집합을 추가하여 "id" 매개 변수를 쿼리에 전달하여 특정 범주만을 반환하도록 합니다. "유효성 검사" 버튼을 클릭하면 데이터 집합 대화 상자에 필드 목록을 얻기 위해 매개 변수의 값을 묻는 메시지가 표시됩니다. 1을 입력할 수 있습니다.

제품

  1. "제품" 데이터 집합을 보고서 본문에 끌어서 놓습니다.

  2. Report Viewer 컴포넌트에서 보고서를 열면 사용자에게 범주를 선택하고 제품을 표시하도록 요청합니다.





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

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.