PureJS 리포트 템플릿 + 런타임 데이터 바인딩
페이지 정보
작성자 GrapeCity
작성일 2021-04-23 14:56 조회 1,591회
댓글 0건
본문
첨부파일
관련링크
ActiveReportsJS는 기본적으로 디자이너 앱을 통해서 쉽고 빠르게 Rest API, ODATA, GraphQL을 이용하여 데이터를 연동할 수 있습니다.
하지만, 종종 리포트 앱을 개발하시다 보면, 실시간으로 특정 데이터를 받아와 이를 리포트로 보여줘야 할 경우가 생기에 됩니다.
이를 위해, 이번 포스팅에서는 여러분이 ActiveReportsJS(이하 ARJS)를 통해, 리포팅 솔루션을 개발하실 때, 조금 더 유연하게 원하는 데이터를 런타임에 불러와 최종 사용자에게 보여줄 리포트를 생성하는 방법을 공유해 드리고자 합니다.
함께 만들어볼 샘플에서는 아래의 Rest API를 통해 JSON 데이터를 받아 올 것입니다.
이후에 받아온 데이터를, ActiveReportJS 디자이너 앱을 통해 미리 작성한 리포트 양식에 런타임에 데이터를 바인딩 하여, 동일한 리포트 양식에서, 다른 값을 지닌 데이터를 바인딩하는 방법을 함께 알아보고자 합니다.
ActiveReportJS 디자이너 다운로드 및 설치
우선 해당 가이드를 시작하기 위해서는 GraepeCity 홈페이지를 통해 ActiveReportJS(ARJS)를 다운받아야 합니다.
다운로드 파일에는 리포트 엔진과 뷰어를 위한 JS 라이브러리 부터, 디자이너 앱의 설치 파일 등이 포함되어 있습니다.
다운로드를 완료 하였다면, 파일의 압축을 풀고 디자이너(desinger) 폴더로 이동합니다.
지원하는 리포트 디자이너의 설치 환경은 아래와 같으며, 개발 OS 환경에 맞게 .dmg/.exe/.AppImage 파일을 두 번 클릭하여 디자이너를 설치합니다.
Windows = exe
Linux = AppImage
Mac = dmg
이제 리포트 템플릿을 생성하기 위한 준비는 끝났습니다.
다음 섹션에서 본격적으로 디자이너 앱을 통해, 리포트를 작성하는 방법에 대해서 알아보도록 하겠습니다.
리포트 템플릿(양식) 생성
먼저, 런타임 시에 데이터를 바인딩 하여, 리포트를 보여주기 위해서는 특정 데이터가 위치해야 할 곳을 사전에 미리 만들어 줘야 합니다.
이를 위해서 , 설치 하신 리포트 디자이너 데스크톱 앱을 이용하여, 미리 템플릿을 만들어 주셔야 합니다.
설치 후에, "ActiveReportsJS Designer" ShortCut을 통해서 리포트 디자이너 앱을 실행하여 줍니다.
리포트 디자이너 앱이 실행되면, 아래와 같은 화면을 볼 수 있습니다.
기본적으로 "Continuous Page Layout" 기반의 리포트를 작성할 수 있습니다.
Continuous Page Layout은 데이터의 양에 따라 화면에 데이터 영역이 유연하게 늘어나고 줄어들기 때문에, 페이지에 많은 정보를 보여주거나 데이터 양이 가변적일 떄 좋습니다.
Fixed Page Layout은 완전히 고정된 양식으로 데이터 양이 설정한 데이터 영역을 넘어갈 경우, 다음 페이지에 데이터를 보여줍니다. 데이터가 고정적일 때 사용하면 좋습니다.
이제 데이터 바인딩을 위한 규칙, 쉽게 데이터가 들어가 영역을 먼저 만들어 보겠습니다.
우측 패널의 "Data > DATA SOURCE"의 "+ Add" 버튼을 눌러 줍니다.
다음으로 아래와 같이 DataSource를 만들어 줍니다. Rest API로 부터 받아오는 데이터를 바인딩 하기 위한 입구를 작성해준다고 생각하시면 됩니다.
Name: Northwind (원하시는 이름으로 정해줍니다.)
Data Provider: Embedded JSON
JSON Data: 연동할 JSON 데이터의 스키마를 입력하여 추후에 어떤 데이터가 바인딩될지를 선언합니다.
[ { "customerId": "ALFKI", "companyName": "Alfreds Futterkiste", "contactName": "Maria Anders", "contactTitle": "Sales Representative", "address": "Obere Str. 57", "city": "Berlin", "region": null, "postalCode": "12209", "country": "Germany", "phone": "030-0074321", "fax": "030-0076545" } ]
위의 데이터가 입력된 화면은 아래와 같습니다.
Save Changes를 눌러 DataSource 생성을 마무리 합니다.
다음으로 위에서 생성한 Data Source 옆에 "+ 버튼을 눌러 DataSet을 추가"합니다.
아래와 같이 데이터를 입력해 줍니다.
Name: Customers -> 원하시는 이름을 입력해 주시면 됩니다
Json Path: $.[*] -> 모든 값을 가져오는 쿼리
Validate눌러 작성한 DataSource로 부터 Database Fields를 정상적으로 가져오는지 확인합니다.
정상적으로 불러왔다면, "Save Changes"를 눌러 완료합니다.
위의 과정을 통해, 런타임에서 데이터를 받아오기 위한 데이터 SET 설정이 완료되었습니다.
리포트 템플릿 생성하기
이제 위의 생성한 데이터 셋을 통해 리포트 템플릿을 생성해보도록 하겠습니다. 디자이너 앱을 통해 드래드 앤 드롭으로 쉽고 빠르게 원하는 템플릿을 생성할 수 있습니다.
해당 섹션에서는 간단하게 리포트를 꾸미는 방법에 대해서 설명 드리겠습니다.
자세한 리포트 양식은 함께 첨부된 ARJS 리포트 양식을 참고해주시기를 부탁 드립니다.
리포트 헤더 추가
리포트 헤더를 추가하면, 리포트의 페이지가 늘어날떄 마다, 리포트의 상단에 동일한 내용을 추가 할 수 있습니다.
이를 위해서는 상단 메뉴의 "Report > Add Header"를 선택하시면 됩니다.
이제, 헤더에 리포트 제목을 추가해보겠습니다.
1) 왼쪽 도구 모음에서 TextBox 컨트롤을 Header에 드래드 앤 드롭으로 위치시킨 뒤에 원하시는 제목을 입력합니다.
2) 오른쪽 탭의 Properties에서 TextBox의 글자색, 글자크기, 정렬 등 속성 값을 지정하여 꾸밀 수 있습니다.
테이블 추가 하기
테이블 컨트롤은 데이터를 테이블(그리드)을 형식 보여주실 때, 가장 많이 사용하시게 될 컨트롤입니다.
테이블은 크게, Header 섹션, Detail 섹션, Footer 섹션으로 구분되어 집니다.
Header 섹션은 열의 제목을 보여주는 데 주로 사용됩니다.
Detail 섹션은 반복되는 주로 반복되는 데이터 보여주는 데에 사용됩니다.
Footer 섹션은 총계와 같이 반복되지 않는 데이터 또는 결과 값을 보여주는데 사용될 수 있습니다.
위의 설명은 일반적인 상황에 대한 활용 예제일 뿐, 원하시는 다양한 방식으로 테이블을 생성하고 구현하실 수 있습니다.
이제 아래의 절차를 통해 테이블을 생성하고 데이터 영역을 지정해 보겠습니다.
1) 왼쪽 도구 모음에서 Table 컨트롤을 리포트의 Body 영역에 끌어다 놓습니다. 아래 이미지와 같이 3x3의 테이블이 기본으로 생성되어 집니다.
2) 필요에 따라 행과 열을 추가하거나 삭제합니다. 해당 샘플에서는 아래와 같이 테이블을 구성합니다.
행과 열을 추가할 때는 행/열의 경계선에 마우스를 가져가면 나타나는 + 아이콘이나, 마우스 오른쪽 버튼을 눌러 나오는 메뉴를 통해 추가가 가능합니다.
Footer 행 삭제 (이번 샘플에서는 Footer를 사용하지 않습니다)
Detail 행 추가 (2개의 Detail 행)
1개 열 추가 (총 4개의 열)
3) 이제 원하는 열에 보여주고자 하는 Data 필드를 바인딩 해줍니다.
위에서 설명한 것과 같이 Detail 섹션에 우측 탭에 있는 Date Set의 각각의 필드를 선택하시고 드래그 앤 드롭으로 원시는 위치에 끌어다 놓습니다.
또는, 각 셀에 마우스를 올렸을 때 나타나는 "..." 버튼을 눌러서 원하시는 데이터를 선택하실 수 있습니다.
만약, 여러 개의 데이터 필드를 하나의 셀에 넣고자 하시는 경우, 아래와 같이 표현식을 사용하여 다양하게 방식으로 데이터를 보여줄 수 있습니다.
=[address] & ", " & [city]
=[country] & ", " & [postalCode]
테이블의 헤더는 바인딩 된 필드의 이름으로 자동 생성됩니다.
테이블 꾸미기
위에서 생성한 테이블을 최종 사용자를 위해 가독성이 좋게 꾸며보도록 하겠습니다.
1) Header의 타이틀을 아래와 같이 수정합니다. (헤더의 텍스트를 더블 클릭하면, 수정 모드로 전환 됩니다.)
2) 헤더의 배경색(Background), 텍스트 속성을 수정합니다.
배경색: WhiteSmoke
글자(Text): 굵게(Bold), 수직정렬 = Middle
3) 회사명, 전화번호의 Detail 셀을 병합하여 줍니다.
최종적으로 완료된 화면은 아래와 같습니다.
(자세한 내용은 첨부파일의 리포트 양식을 확인해주세요)
디자이너 앱에서 저장을 눌러, rdlx-json 파일로 저장합니다.
이후, 해당 리포트 파일을 여러분의 프로젝트의 원하는 위치에 복사하여 추후에 불러올 수 있도록 합니다.
이제 다음 섹션에서는 본격적으로 JavaScript 코드를 통해, Rest API를 통해 데이터를 받아와 생성한 ARJS 리포트 양식에 바인딩 하는 방법에 대해서 알아보겠습니다.
ActiveReportsJS 라이브러리 선언
ActiveReportsJS의 리포트 렌더링 엔진과 리포트 뷰어(Report Viewer)를 사용하기 위해서는 아래와 같은 JS라이브러리를 선언해야 합니다.
ActiveReportsJS 다운로드에서 dist/ 폴더에는 응용 프로그램에 추가해야 할 JS 및 CSS 파일이 포함되어 있습니다.
dist 폴더를 응용 프로그램의 로컬 폴더에 복사합니다.
구성 요소 참조
응용 프로그램에서 ActiveReportsJS를 사용하려면 응용 프로그램 폴더의 파일에 대한 상대 파일 경로가 필요합니다.
응용 프로그램 섹션에서 JS 및 CSS 파일에 대한 참조를 추가합니다. 아래 예시에서는 vendor/ 폴더에 파일이 위치합니다.
[Header 섹션]
<script src="vendor/dist/ie-polyfills.full.js"></script> <script src="vendor/dist/ar-js-core.js"></script> <script src="vendor/dist/ar-js-viewer.js"></script> <script src="vendor/dist/ar-js-pdf.js"></script> <script src="vendor/dist/ar-js-xlsx.js"></script> <script src="vendor/dist/ar-js-html.js"></script> <link rel="stylesheet" href="vendor/styles/ar-js-viewer.css">
뷰어 구성
참조를 추가한 후에 응용 프로그램은 구성 요소를 사용할 수 있습니다. 뷰어의 호스트 요소를 본문 섹션에 추가합니다. <div>를 고유 식별자와 함께 사용합니다.
[Body 섹션]
onLoad() 함수는 JavaScript 코드 섹션에서 구현할 예정입니다.
<body onload="onLoad()">
<div id="viewer-host"></div>
</body>JavaScript 코드를 통한 런타임 리포트 생성하기
이제 본격적으로 RestAPI를 통해 실시간으로 데이터를 받아와 리포트 양식 맞추어 데이터를 시각화할 수 있도록 코딩을 통해 직접 구현해 보겠습니다.
샘플에서는 모든 함수는 async(비동기) 로 구현하였습니다.
아래와 같이 화면 로딩 시에 아래와 같은 절차로 리포트를 불러 옵니다.
1) 리포트 뷰어 생성
2) Rest API로 부터 데이터를 불러오기
4) 리포트 양식 불러오기
3) 리포트 양식에 데이터 연결 (런타임 바인딩)
4) 리포트 뷰어를 통해 리포트 보여주기
아래와 같이 onLoad 함수를 작성하여 줍니다.
async function onLoad() {
// 배포 키 입력
GC.ActiveReports.Core.setLicenseKey(
"실제 배포시, 발급 받으신 배포키를 입력해주시면 됩니다."
);
//1.리포트 뷰어 생성
const viewer = new ActiveReports.Viewer("#viewer-host");
//2.데이터 불러오기
const data = await loadData();
//3.리포트 양식 불러오기
const report = await loadReport();
//4. 런타임 바인딩
report.DataSources[0].ConnectionProperties.ConnectString =
"jsondata=" + JSON.stringify(data);
// 5. 리포트 보여주기
viewer.open(report);
}loadData() 함수 - JSON 데이터 불러오기
loadData() 함수에서는 Fetch 메소드를 통해 Rest API로 부터 데이터를 받아 오는 작업을 수행합니다.
실제 개발 시에는 해당 내용을 참고하시어 다양한 방법으로 구현이 가능합니다.\
async function loadData() {
// Use the Fetch Api to pull the data https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
// Rest API로 부터 Fetch 방식을 통해 보여줄 데이터를 실시간으로 가져옵니다.
const headers = new Headers();
const dataRequest = new Request(
"https://demodata.grapecity.com/northwind/api/v1/Customers",
{
headers: headers,
}
);
const response = await fetch(dataRequest);
// 받아온 데이터를 Json 객체로 변환하여 Return합니다.
const data = await response.json();
return data;
}loadReport() 함수 - ARJS 리포트 양식 불러오기
loadReport() 함수에서도 동일하게, Fetch 메소드를 통해 Rest API로 부터 데이터를 받아 오는 작업을 수행합니다.
ARJS 디자이너 앱에서 생성된 모든 리포트는 JSON 형식으로 저장되기 때문에, JSON 데이터를 가져오는 것과 동일하게 구현하시면 됩니다.
실제 개발 시에는 해당 내용을 참고하시어 다양한 방법으로 구현이 가능합니다.
async function loadReport() {
// load report definition from the file
// Fetch 방식을 통해, ARJS 리포트를 불러옵니다.
const reportResponse = await fetch(
"/CustomersTable.rdlx-json"
);
// 받아온 데이터를 Json 객체로 변환하여 Return합니다.
const report = await reportResponse.json();
return report;
}런타임 데이터 바인딩
데이터와 리포트를 받아 왔다면, 해당 데이터를 ARJS 리포트의 DataSources에 바인딩 해주시면 됩니다.
이후에, viewer.open() 함수에 해당 데이터 바인딩이 완료된 리포팅 객채를 넘겨주시면, 여러분의 웹 화면의 리포팅 양식에 맞게 그려집니다.
//4. 런타임 바인딩
report.DataSources[0].ConnectionProperties.ConnectString =
"jsondata=" + JSON.stringify(data);
// 5. 리포트 보여주기
viewer.open(report);위와 같이 모든 작업을 완료하면, 아래와 같이 JavaScript 프로트-앤드 기술만으로 구현된, 웹 리포트(Web)를 확인할 수 있습니다.
댓글목록
등록된 댓글이 없습니다.
