JavaScript 보고 앱에 동적 데이터 바인딩을 추가하는 방법

추천0

페이지 정보

작성자 MESCIUS

작성일 2023-12-21 09:10 조회 76회 댓글 0건

본문

관련링크

ActiveReportsJS는 서버 측 종속성이 없는 순수한 클라이언트 보고 솔루션입니다.

하지만, 응용 프로그램의 서버 측에서 JSON 데이터를 반환하는 API를 노출하는 경우가 많으며, 이는 ActiveReportsJS에 의해 다양한 보고 항목을 사용하는 데이터를 시각화하는 데 사용됩니다.

API는 REST, OData, GraphQL 등 많은 아키텍처 스타일 중 하나를 사용할 수 있지만, ActiveReportsJS는 단순히 API에 HTTP 요청을 전송하고 JSON 응답을 받은 후 데이터를 파싱하기 때문에 백엔드에 구해받지 않도록 설계되어 있습니다.

하지만 API 요청은 대개 정적이 아니라 동적입니다.

API 요청에 자격 증명을 포함하거나 매개 변수를 제공해야 할 수도 있습니다.

이 문서에서는 ActiveReportsJS를 사용하여 동적 데이터 쿼리를 구현하는 여러 방법을 설명합니다.

사전 준비 사항

데이터 바인딩 문서에서는 ActiveReportsJS에서 데이터를 연결하기 위해 제공하는 방법의 기본 개요를 제공합니다.

여기서는 문서에 설명된 개념을 광범위하게 사용하므로 블로그를 확인하기 전에 데이터 바인딩 문서를 꼼꼼하게 읽어 보는 편이 좋습니다.

또한 동적 데이터 바인딩을 위해서는 보고서 매개 변수를 사용하는 것이 매우 중요합니다.

더 읽기 전에 보고서 매개 변수에 대해 자세히 알아두세요!

인증

응용 프로그램에서 사용자에게 자격 증명을 제공하여 로그인해야 한다고 가정하겠습니다.

인증에 성공하면 서버에서 Bearer Authentication(무기명 인증) 및 Authorization HTTP Header(권한 부여 HTTP 헤더)를 사용하여 각 데이터 요청과 함께 포함해야 하는 "액세스 토큰"을 반환합니다.

다음 단계에서는 현재 응용 프로그램 사용자의 액세스 토큰을 보고서의 데이터 요청과 함께 전달하는 기본 기법을 설명합니다.

1. 보고서 매개 변수를 추가합니다.

데이터 형식을 String, 이름을 AccessToken(또는 원하는 다른 이름)으로 설정하고, 숨김 플래그를 설정합니다.

JavaScript 데이터 바인딩

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

3. DataSource 대화 상자에서 새 HTTP 헤더를 추가합니다.

이름을 Authorization, 값을 Bearer {@AccessToken}로 설정합니다.

이 식의 이름은 매개 변수의 값을 가리킵니다.

4. 응용 프로그램에서 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],
            },
        ],
    });

5. 응용 프로그램에서 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.mescius.io/northwind/api/v1/Categories/{id}/Products의 엔드포인트에는 제품 목록을 가져와야 하는 카테고리를 지정하는 {id} 경로 매개 변수가 있습니다.

응용 프로그램에서 사용자가 Report Viewer 컴포넌트의 기본 제공 매개 변수 패널을 사용하여 이 제품의 카테고리를 선택할 수 있도록 허용해야 한다고 가정하겠습니다.

다음 단계에서는 Northwind Restful API를 기반으로 이 목표를 달성하는 기본 기법을 설명합니다.

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

JavaScript 데이터 바인딩