화면 해상도에 따라 다양한 조정이 가능하면서도 유연하게 사용할 수 있는 대화형의 화면상 보고서를 이용하는 것이 필수적입니다.

화면상의 보고서를 사용하면 비즈니스의 실적에 관한 최신 정보를 확인하고 필요할 때 언제 어디서나 합리적인 결정을 내릴 수 있습니다.

ActiveReportsJS를 통해 어떤 브라우저에서든 작동하고 데스크탑 및 모바일 장치를 지원하는 대화형 보고 기능을 탑재한 응답형 웹 응용 프로그램을 빌드할 수 있습니다.

이 문서에서는 응답형 Node.js 재고 관리 시스템을 빌드하고, 사용자가 ActiveReportsJS를 사용하여 주문 보고서를 추적할 수 있도록 허용하는 방법을 설명합니다.

• 보고서 제목 디자인

• Node.js에서 데이터 액세스 정의

• 계산 필드 사용

• 차트 컨트롤 추가

• 테이블 컨트롤 추가

• 하위 테이블 정의

• 드릴다운 기능 추가

• 테이블에 정렬 열 추가

• Node.js 송장 응용 프로그램 만들기

완료된 보고서와 응용 프로그램을 확인하려면 여기에서 레포지토리를 다운로드받아 보세요!

웹 기반 판매 보고서 빌드

이번 스터디에서는 ACME Inc.라는 클라이언트가 판매 보고서 작성을 요청한 것을 예로 들어 설명합니다. 보고서는 다음과 같습니다.

위의 보고서와 같은 엔터프라이즈 수준 보고서를 만들 수 있도록 GrapeCity는 ActiveReportsJS 디자이너 컴포넌트를 제공합니다. 이 직관적인 도구를 사용하면 표, 막대형 차트, 원형 차트 등의 시각적 요소를 사용하여 데이터를 가져오고 렌더링할 수 있도록 보고서를 구성할 수 있습니다.

ActiveReportsJS 디자이너 컴포넌트는 보고서 정의를 특수 JSON 형식으로 저장하고 확장자가 .rdlx-json인 파일에 저장합니다.

보고서 제목 디자인 

새 보고서를 만들려면 디자이너 컴포넌트의 디자이너 도구 모음에서 파일 메뉴를 열고 연속 페이지 레이아웃 보고서 옵션을 선택합니다.

새 보고서를 만들었습니다. 왼쪽의 햄버거 버튼을 클릭하면 제어판이 확장됩니다. 여기에서 보고서에 포함할 컨트롤을 드래그하여 보고서 캔버스에 놓을 수 있습니다.

이 보고서의 경우 상단에 로고 이미지와 레이블이 있는 컨테이너가 포함됩니다. 제어판에서 컨테이너 컨트롤을 드래그하여 보고서 캔버스에 놓은 다음, 이미지와 텍스트 상자 컨트롤을 드래그해 보고서 캔버스의 컨테이너 컨트롤에 놓습니다.

이미지를 이미지 컨트롤에 연결하려면 URL 또는 데이터베이스와 같은 외부 소스에서 이미지를 가져오거나 로컬 파일의 이미지를 포함하셔야 합니다. 이번 예시에서는 하단의 이미지가 ACME Inc. 로고가 됩니다.

텍스트 상자의 경우 어울리는 글꼴, 크기 및 색으로 사용자 정의할 수 있습니다. 제목 텍스트의 경우, 월간 주문으로 설정합니다.

완료되면 다음과 같은 제목이 표시됩니다.

Node.js에서 데이터 액세스 정의 

ActiveReportsJS 디자이너 컴포넌트는 데이터 소스 및 데이터 집합 등 두 가지 엔티티 유형을 통해 데이터 연결을 관리합니다.

데이터 소스는 URI나 JSON 파일과 같은 외부 데이터 저장소 또는 보고서에 포함할 수 있는 JSON 문서와의 연결 지점 역할을 합니다.

데이터 집합은 데이터 소스에서 데이터를 가지고 와 보고서 데이터 모델의 필드에 바인딩하는 중간 요소입니다. 식을 사용하여 소스 데이터를 변환하는 계산 필드를 정의할 수 있고 이를 통해 보고서 컨트롤에서 데이터 집합 필드를 사용할 수 있습니다.

재고 송장 소프트웨어는 HTTP 서비스에 위치한 외부 API를 통해 데이터에 액세스하여 JSON 형식으로 결과를 반환합니다. 보고서는 해당 서비스의 "실시간" 데이터를 기반으로 다양한 주문 정보를 보여 줍니다.

보고서에서 고객 데이터에 대한 액세스를 정의하려면 먼저 데이터 소스 탭을 선택하고 "데이터 소스" 섹션에서 추가 버튼을 클릭합니다.

새 데이터 소스 창이 열립니다.

이 창에서는 데이터 소스의 이름을 지정하고, 데이터 공급자를 설정하고, 필요한 HTTP 헤더 또는 매개 변수를 추가합니다.

데이터 공급자를 추가할 때, 원격 JSON을 추가하거나 로컬 파일을 통해 JSON을 보고서에 포함할 수 있습니다. 이 재고 송장 응용 프로그램의 데이터는 원격 소스에서 로드합니다. 모든 항목이 추가되면 저장 버튼을 클릭하여 데이터 소스를 저장합니다.

참고: 이 데이터 소스는 간단한 연결 구성이며, 아직 아무 요청도 없는 상태입니다. 

이제 데이터 소스를 만들었으므로, 해당 소스를 사용하여 데이터를 가져오는 집합을 만들어야 합니다. 데이터 집합을 만들려면 데이터 소스 옆에 표시되는 더하기 버튼을 클릭하세요.

새 데이터 집합 창이 열립니다.

일반적으로 URI/경로와 JSON 경로, 두 속성을 설정해야 합니다.

URI/경로는 ActiveReportsJS에 API 끝점에 도달한 후 JSON 파일을 검색할 위치를 알려주며, JSON 경로는 Node.js 송장 응용 프로그램에 가져올 JSON의 부분을 알려주는 데 사용됩니다.

URI/경로의 경우, /Customers를 사용하여 고객에 대한 데이터를 반환합니다. 이 경우 모든 항목을 가져오려고 하므로, $.*를 JSON 경로로 전달합니다.

마지막으로, ActiveReportsJS에서 데이터를 가져올 수 있다는 것을 확인할 수 있도록 데이터 소스의 유효성을 검사해야 합니다. 데이터베이스 필드 배열이 값으로 채워지면 데이터 소스의 유효성 검사가 완료되었다는 것을 알 수 있습니다.

응용 프로그램에는 node.js 송장 앱을 통해 주문에 관한 데이터를 가져오는 데 사용할 다른 데이터 소스가 필요합니다. 두 번째 데이터 소스는 다음과 같습니다.

NWAPI 데이터 소스를 기반으로 /Products를 URI/경로로 사용하는 데이터 집합과, NWOData 소스를 기반으로 /Orders를 URI/경로로 사용하는 데이터 집합 등 두 개의 데이터 집합이 더 필요합니다. 또한 Orders 데이터 집합의 경우, JSON 경로를 $.value[*]로 설정합니다.

설정되면 데이터 패널이 다음과 같이 표시됩니다.

계산 필드 사용 

보고서에 사용할 새로운 필드를 하나 이상의 소스 필드를 보고서에 사용할 수 있도록 변환해야 하는 경우가 존재합니다. ActiveReportsJS는 이 요구를 충족하기 위해 다양한 기능이 기본 제공되는 식 언어가 탑재되어 있습니다.

이 예에서는 OrderDate 필드를 "월/년" 형식으로 변환해 보겠습니다. 사용자 정의 필드를 자동 바운딩 데이터베이스 필드 목록에 추가해야 합니다.

Orders 데이터 집합을 편집하고 Calculated Fields 섹션을 확장합니다. 이 섹션에서 새 계산된 필드를 추가할 수 있습니다. 필드 이름을 MonthYear로 지정하고 값을 {DateTime.Parse(OrderDate).ToString("MM/yyyy")}로 설정합니다.

NWOData 소스를 기반으로 OrderDetails 라는 새 데이터 집합을 만들고 URI/경로를 /OrderDetails, JSON 경로를 $.value[*]로 설정합니다.

OrderDetails 데이터 집합에는 항목당 총액 필드가 포함되지 않습니다. 이 값은 보고서에서 두 번 이상 사용될 가능성이 큽니다. 따라서 필요할 때마다 이 값을 계산하거나 새로운 계산 필드를 만들어야 합니다. 후자의 옵션이 훨씬 효율적임을 알 수 있습니다.

OrderDetails 데이터 집합의 CalculatedFields 섹션을 확장하고, 필드 이름을 Subtotal로 지정합니다. 다음으로 값을 {Round(100 * (UnitPrice - UnitPrice * Discount) * Quantity) / 100}로 설정합니다.

차트 컨트롤 추가 

여러 데이터 소스를 설정했으므로, 데이터 소스를 보고서에 통합해야 합니다. 그러려면 차트를 추가해야 합니다. 제어판에서 차트 컨트롤을 드래그하여 보고서에 놓으면 차트 마법사가 표시됩니다.

데이터 집합이 OrderDetails 집합을 사용하도록 설정되었는지 확인하고 다음 버튼을 클릭합니다.

이제 데이터와 데이터 범주 필드를 설정할 수 있습니다. "데이터 값"에 새 필드를 추가합니다. 이름을 {Subtotal}로 지정하고 Sum으로 집계합니다. 그런 다음 "데이터 범주"에 대해, 필드를 {Lookup(OrderId, OrderId, MonthYear, "Orders")}로 설정합니다. 다음과 같이 표시됩니다.

다음 - 완료를 클릭합니다. 차트를 표시하기 전에 마지막으로 차트에 있는 다양한 요소의 속성을 변경합니다.

차트의 요소를 변경하려면 데이터 창 대신 속성 창이 표시되어 있는지 확인한 다음, 차트의 요소를 클릭하면 됩니다. 속성 창이 업데이트되어 현재 선택된 요소의 모든 속성이 표시됩니다. 다음과 같이 차트 속성을 정의합니다.

완료되면 다음과 같은 보고서가 표시됩니다.

미리 보기를 클릭하면 데이터가 로드된 보고서가 표시됩니다.

테이블 컨트롤 추가 

차트 외에 사용자가 Node.js 송장 앱에서 더 많은 데이터를 볼 수 있도록 허용하려고 합니다. 월별 주문량을 테이블 형식의 보기로 만들어 보겠습니다.

제어판에서 표 컨트롤을 드래그하여 차트 밑의 보고서에 놓습니다.

기본적으로 ActiveReportsJS 표는 3개의 열과 3개의 행으로 만들어집니다. 첫 행이 헤더 행의 역할을 하고, 가운데 행이 세부 정보 행으로 데이터를 저장하며, 끝 행이 푸터 행입니다.

보고서 작성자는 표 크기를 변경하고, 행과 열을 추가 또는 제거할 수 있습니다. 또한 여러 개의 헤더와 푸터를 정의하는 등의 작업을 할 수 있습니다.

다음과 같이 표를 선택하고, 속성 패널로 이동한 다음, 속성을 정의합니다.

필요하지 않은 표의 헤더과 푸터 행은 제거합니다. 행에서 삭제할 셀을 마우스 오른쪽 클릭해 행 옵션을 선택한 다음 행 삭제를 클릭합니다.

이제 세부 정보 행에 셀을 병합합니다. 병합할 셀을 선택하고 선택한 셀을 마우스 오른쪽 단추로 클릭한 다음, 메뉴에서 셀 옵션을 선택하고 셀 병합을 클릭합니다.

이제 새로 병합된 셀을 선택하고, 텍스트 상자 이름을 txtMonth로 설정합니다. 값은 {MonthName(Month(OrderDate))}/{Year(OrderDate)}로 설정합니다.

마지막으로 표 그룹을 정의해야 합니다. 셀을 선택하고 팝업 메뉴에서 <Details Group>를 선택하면 됩니다.

{Year(OrderDate)} 수식으로 그룹의 첫 번째 레벨을 설정하고 {Month(OrderDate)}를 보조 레벨로 설정합니다.

새 표는 데이터의 첫 번째 레벨을 표 형식의 섹션으로 표시합니다.

이제 데이터 레벨 추가하기를 시작하겠습니다.

현재 행 밑에 새 행을 만들고 헤더 및 푸터 행을 제거한 다음 세부 정보 행을 병합했습니다. 이제 다른 표 컨트롤을 드래그하여 새로운 큰 셀에 놓습니다.

다음과 같이 새 표의 속성을 정의합니다.

새로 병합된 셀을 선택합니다. 텍스트 상자 이름을 txtOrderId로 설정하고, 값을 Order ID: {OrderId}로 설정합니다. 설정이 완료되면 보고서를 미리 보고 결과를 확인합니다.

tableOrders 표는 보고서의 두 번째 레벨에 있으며, 특정 월에 이루어진 주문의 세부 정보를 표시합니다.

하위 테이블 정의 

이제 월별 주문이 표시되므로, 재고 송장 응용 프로그램을 통해 제공되는 각 주문의 주문 세부 정보 섹션을 추가해 보겠습니다.

OrderId 세부 정보 행 밑에 새로운 세부 정보 행을 추가합니다. 다음은 셀을 병합합니다. 그 뒤, 해당 세부 정보 행에 다른 표를 추가합니다. 이때 헤더 및 푸터 행을 제거하는 대신, 세부 정보 및 푸터 행을 제거하고 헤더 행을 남겨둡니다.

세 개의 셀을 모두 하나로 병합하는 대신 가운데와 오른쪽 셀을 하나로 병합하고 왼쪽 셀을 자체 셀로 남겨둡니다.

왼쪽 셀 수식을 Total:로 정의합니다. 병합된 셀의 경우, 속성 패널을 사용하여 셀 맞춤을 왼쪽으로, 형식 속성을 통화로 설정합니다. 병합된 셀 수식을 {SUM(Subtotal)}로 설정합니다.

탐색기에서 tableOrderTotal 표를 선택하고 필터 속성을 확장합니다. 항목 추가를 클릭하고 다음 필드가 포함된 새 필터 기준을 추가합니다.

아시다시피 새 tableOrderTotals 표는 OrderDetails 데이터 집합을 기반으로 합니다. 총액은 주문 세부 정보를 tableOrder 행의 OrderId 기준으로 필터링합니다. 부분합 필드 값을 모두 더해 얻은 값입니다.

미리 보기를 클릭하면 업데이트된 표가 표시됩니다.

마지막으로, 송장의 주문 항목을 나타내는 표를 만듭니다.

tableOrders 표에 새로운 세부 정보 행을 만든 다음, 새로운 세부 정보 행 안에 tableOrderDetails라는 새로운 표를 만듭니다. 다음과 같이 표를 구성합니다.

완료되면 다음과 같은 표가 표시됩니다.

미리 보기를 클릭하면 새로운 표가 표시됩니다.

약간의 스타일을 지정하여 표의 모양을 개선하겠습니다.

완성된 버전은 다음과 같습니다.

드릴다운 기능 추가 

이제 보고서에 드릴다운 기능을 추가하여 사용자가 확장할 때까지 tableOrders 및 tableOrderDetails 표를 축소된 상태로 유지할 수 있도록 하겠습니다.

tableOrders 표를 선택하고 숨겨짐 및 토글 항목 속성을 다음과 같이 변경합니다.

tableOrderDetails 표를 선택하고 축소 가능하게 만듭니다.

이제 "+/-" 기호를 클릭하여 세부 정보 레벨을 확장 및 축소할 수 있습니다.

다음으로, Node.js 송장 응용 프로그램의 보고서에 세부 정보를 추가하겠습니다.

tableOrderDetails 표의 기존 헤더 행 외에 새로운 행 네 개를 추가합니다. 이 네 개의 행 중에서 첫 행과 끝 행은 버퍼 역할을 하며, 가운데 두 행에는 표시할 데이터가 저장됩니다.

추가된 두 번째 및 세 번째 행에서 각 행의 가장 왼쪽 셀을 그대로 두고 나머지 셀을 병합합니다. 이제 하단과 같이 행을 채웁니다.

미리 보기를 클릭하면 고객의 이름과 주문 날짜가 송장에 추가됩니다.

테이블에 정렬 열 추가 

보고서에 주문 세부 정보 열을 정렬하는 기능을 추가합니다.

각 헤더 셀을 선택하고 사용자 정렬 섹션 아래의 정렬 식 필드를 하단 수식으로 채웁니다.

미리 보기를 클릭하면 열 헤더 옆에 정렬 아이콘이 표시됩니다. 주문 항목을 수량 기준으로 정렬합니다.

주문을 총액 기준으로 정렬합니다.

Node.JS 송장 응용 프로그램 만들기 

이제 보고서가 정의되었으므로 재고 송장 응용 프로그램을 만들 수 있습니다. ActiveReportsJS는 이 응용 프로그램에서 필요로하는 데스크톱과 모바일 장치에 필요한 응답형 웹 표시 기능을 기본적으로 제공합니다.

샘플 응용 프로그램은 JavaScript 런타임 환경인 Node.js를 사용하여 서버 측에서 웹 앱을 실행합니다.

시작하려면 InventoryInvoice라는 새 폴더를 만들고 원하는 IDE에서 열어 줍니다. 명령줄에 다음을 실행합니다.

npm init

그러면 package.json 파일이 설정되어 응용 프로그램을 빌드하는 데 사용됩니다. 파일이 생성되면, 다음 두 명령을 실행합니다.

npm install express
npm install @grapecity/activereports

그러면 Node.js용 프레임워크인 Express와 송장을 표시하는 데 사용할 ActiveReports가 설치됩니다.

이제 사용해 보겠습니다. InventoryInvoice 폴더에 index.js라는 이름의 새 파일을 만듭니다. 이 파일에서는 Express를 사용하여 Node.js 재고 송장 응용 프로그램을 제공합니다.

index.js 파일 내에 다음 코드를 추가합니다.

const express = require('express'); //import Express.js module
const app = express();
const path = require('path'); 
app.use(express.static(path.join(__dirname)));

app.listen(3000, () => {
    console.log(`Example app listening on port 3000`)
})

실행하는 작업을 간단히 설명하겠습니다.

• 코드의 첫 두 행은 서버에 Express를 포함하고 Express 메서드 및 속성을 참조하는 데 사용할 변수를 제공합니다.

• 세 번째 행은 폴더의 상대 경로로 이어지는 변수를 만들고, 네 번째 행은 Express에 이 경로를 응용 프로그램의 정적 경로로 사용하려고 한다는 것을 알립니다.

• 6~8행은 Express를 사용하여 응용 프로그램을 시작합니다. 여기에서 포트 3000에서 실행할 것을 알리고, 응용 프로그램이 실행되기 시작하면 터미널에 메시지를 로깅합니다.

이는 매우 기본적인 단계의 Express입니다. 이제 재고 송장 소프트웨어 실행을 시작할 수 있는 서버가 있으므로, 사용자에게 제공할 페이지를 만들어야 합니다.

InventoryInvoice 폴더에 새 파일을 만들고 파일의 이름을 index.html로 지정합니다. 파일을 만든 후, 다음 코드를 삽입합니다.

<html>
   <head>
    <meta charset="utf-8" />
    <title>ActiveReportsJS Viewer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-ui.css" />
    <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-viewer.css" />
    <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
    <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>
    <style>
        #arjs-viewer {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>
<body onload="load()">
    <div id="arjs-viewer"></div>
    <script>
        function load() {
            const viewer = new ActiveReports.Viewer('#arjs-viewer');
            viewer.open('MonthlyOrders.rdlx-json');
        }
    </script>
</body>
</html>

우리는 네 가지 사항을 검토해야 합니다.

• 첫째, HTML 파일에 ar-js-ui.css, ar-js-viewer.css, ar-js-core.js, ar-js-viewer.js 등 네 개의 파일을 포함합니다. CSS 파일은 ActiveReportsJS를 위한 핵심 CSS 파일과 뷰어의 스타일을 지정하는 데 사용되는 파일입니다. JS 파일도 마찬가지로, 핵심 JS 파일과 뷰어를 위한 파일입니다.
• 둘째, HTML의 경우, 하나의 행만 사용하여 ActiveReportsJS 뷰어를 만듭니다. 뷰어를 div와 연결하는 데 사용할 ID가 있는 단일 div가 있으면 됩니다.
• 셋째, JavaScript에서 페이지가 로드되면 새 ActiveReports.Viewer 컨트롤을 만들어 div와 연결하고 보고서를 열도록 합니다.
• 마지막으로, 뷰어가 화면 전체를 차지하도록 CSS를 포함합니다.

이 작업이 완료되면, 보고서를 InventoryInvoice 폴더로 이동한 후 다음 명령을 실행하여 Node.js 재고 송장 앱을 시작하기만 하면 됩니다.

node index.js

localhost:3000으로 이동하면, 생성된 보고서가 표시되고 상호 작용할 수 있습니다.

ActiveReportsJS 뷰어 컴포넌트도 응답형이므로 다양한 장치의 여러 화면 크기에 맞게 적절히 렌더링됩니다.

웹 브라우저에서 사용할 수 있는 개발자 도구를 통해 다양한 모바일 장치, 화면 크기, 페이지 방향 등을 빠르게 에뮬레이트할 수 있습니다.

결론

완료되었습니다! 이 문서에서는 GrapeCity의 ActiveReportsJS 디자이너 컴포넌트를 사용하여 월별 재고 송장 보고서를 만드는 방법을 연습해 보았습니다.

월 단위로 그룹화한 판매 차트를 비롯하여 월 및 주문 ID 별로 판매를 통합하는 드릴다운 기능이 포함된 테이블 형식의 대화형 보고서를 만들기 위한 정보를 확인했습니다.

완료된 응용 프로그램과 보고서는 여기에서 찾을 수 있습니다.

즐거운 코딩 되세요! 

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

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