# 계층형 드릴스루 리포트

## Content

### 소개

계층형 드릴다운 보고서를 사용하면 구독자는 계층형 트리의 브랜치를 계속 펼쳐 보다 상세한 세부 정보로 드릴다운할 수 있습니다. 그러한 보고서의 예로 조직 계층 또는 체인점 계층을 들 수 있습니다.

이 자습서에서는 `체인점 보고서`를 처음부터 만들어 보면서 일반적인 보고서 디자인 과정을 경험해 봅니다. 자습서를 마치면 다음을 수행할 수 있습니다.

* 새 보고서 작성
* 보고서를 포함된 JSON 데이터에 바인드
* 표 데이터 영역을 생성하여 데이터에 바인드
* 표에 대한 계층형 그룹 구성
* 재귀 요약 함수 사용
* `레벨` 함수 사용

모든 자습서 단계를 완료하면 최종 보고서는 [라이브 데모](/activereportsjs/demos/Reports/GetStartedWithHierarchicalReports/purejs)와 같이 표시됩니다.

### 사전 준비 사항

아래 내용에서는 `독립 실행형 보고서 디자이너`가 실행되고 있다고 가정합니다. 자세한 내용은 [자습서](/activereportsjs/docs/v4.1/)를 참조하십시오.

### 새 보고서 작성

독립 실행형 보고서 디자이너에서 [파일 메뉴](/activereportsjs/docs/v4.1/#file-menu)를 클릭하고 새로 작성한 보고서를 위한 [연속 페이지 레이아웃](/activereportsjs/docs/v4.1/#continuous-page-layout) 템플릿을 선택합니다. 보고서 레이아웃에서 회색 영역 중 아무 곳이나 클릭하면 [속성 패널](/activereportsjs/docs/v4.1/#properties-panel)에서 보고서 속성이 로드됩니다. 여백 섹션에서 스타일 속성을 `좁게`로 설정하여 [보고서 페이지](/activereportsjs/docs/v4.1/#page-settings) 여백 크기를 변경합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
펼쳐서 새 보고서를 실제로 생성하는 사례를 확인하십시오.
DOC-SUMMARY-TAG-CLOSE
![CreatingNewReport](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/CreatingNewReport.204797.gif)
DOC-DETAILS-TAG-CLOSE

### 데이터 바인딩

데이터 바인딩은 보고서와 보고서에 표시되는 데이터 간 연결을 설정합니다. 이 데모에서는 `Contoso`라는 가상의 회사 체인점 데이터가 포함된 [JSON 파일](https://www.grapecity.com/activereportsjs/demos/resource/ContosoStores.json)을 사용합니다. 이 회사는 100,000개가 넘는 제품을 제조 및 판매하고 지원하는 조직입니다. 머신에서 원하는 폴더에 파일을 다운로드할 수 있습니다.

### 데이터 소스 추가하기

다음 단계에 따라 앞서 언급한 JSON 파일에 연결하는 보고서 [데이터 소스](/activereportsjs/docs/v4.1/#data-source)를 만들 수 있습니다.

* 속성 검사자의 데이터 패널을 열고 추가 버튼을 클릭합니다.
* 데이터 소스 편집기 대화 상자에서 이름 필드에 `Contoso`를 입력합니다.
* `포함된 JSON`을 `데이터 공급자`로 선택합니다.
* `파일에서 로드` 섹션을 클릭하고 다운로드된 `ContosoStores.json` 파일을 선택합니다.
* 변경 사항 저장 버튼을 클릭합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
펼쳐서 데이터 소스를 실제로 추가하는 사례를 확인하십시오.
DOC-SUMMARY-TAG-CLOSE
![AddingDataSource.23befd](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/AddingDataSource.23befd.c3dd8d.gif)
DOC-DETAILS-TAG-CLOSE

### 데이터 집합 추가하기

정적인 JSON 데이터의 경우 데이터 집합이 데이터 객체 배열을 추출하는 [JSON 경로](https://goessner.net/articles/JsonPath/)를 식별합니다. 이 문서에서 사용하는 데이터와 같이 단순한 시나리오에서는 데이터 자체가 객체 배열입니다.
다음 단계를 사용하여 `Stores` 데이터 집합을 추가하십시오.

* 데이터 패널에서 `Contoso` 근처에 있는 `+` 아이콘을 클릭합니다.
* 데이터 집합 편집기 대화 상자에서 이름 필드에는 `Stores`를, `JSON 경로` 필드에는 `$.*`를 입력합니다.
* `유효성 검사` 버튼을 클릭합니다.
* `데이터베이스 필드` 섹션에 `[5개 항목]`이라는 텍스트가 표시되는지 확인합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
펼쳐서 데이터 집합을 실제로 추가하는 사례를 확인하십시오.
DOC-SUMMARY-TAG-CLOSE
![AddingDataSet.590307](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/AddingDataSet.590307.655347.gif)
DOC-DETAILS-TAG-CLOSE

### 표 데이터 영역 추가하기

[표](/activereportsjs/docs/v4.1/)는 수많은 기능을 포함하는 데이터 영역이며 계층형 드릴다운 구축도 지원합니다. 보고서에 새 표를 추가할 수 있는 여러 가지 방법이 있습니다. 이 자습서에서는 빠른 방법을 사용해 보겠습니다.

* 펼침 아이콘을 사용하여 데이터 패널에서 `Stores` 데이터 집합을 확장합니다.
* `Stores` 데이터 집합 이름 오른쪽의 `필드 선택` 아이콘을 클릭합니다.
* `이름`, `EmployeeCount`, `SellingAreaSize` 필드를 선택합니다.
* 선택한 필드를 보고서 레이아웃의 왼쪽 상단 모서리로 끌어 놓습니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
펼쳐서 표를 실제로 추가하는 사례를 확인하십시오.
DOC-SUMMARY-TAG-CLOSE
![AddingTable.dd6ed3](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/AddingTable.dd6ed3.66adaa.gif)
DOC-DETAILS-TAG-CLOSE

### 계층형 드릴다운 구성하기

`Stores` 데이터 집합의 각 레코드에는 `Id` 및 `ParentId` 필드가 있으며, 여기에서 부모 및 자식 엔티티 간의 계층형 관계가 구성됩니다. 다음 단계를 따라 새로 추가된 표를 계층형 드릴다운 방식으로 렌더링되도록 구성합니다.

* 표에서 아무 곳이나 클릭하여 [그룹 편집기](/activereportsjs/docs/v4.1/#table-designer)를 표시합니다.
* 그룹 편집기에서 `<세부 정보 그룹>` 항목을 클릭합니다.
* 속성 패널에서 `이름` 속성을 `GroupById`로 설정합니다.
* `그룹 표현식` 속성 오른쪽의 `+` 기호를 클릭하고 새로 추가된 항목의 드롭다운 목록에서 `Id` 필드를 선택합니다.
* `부모` 속성 드롭다운을 펼치고 `ParentId` 필드를 선택합니다.
* `표시 여부` 섹션에서 `숨김` 플래그를 설정합니다.
* `항목 토글` 드롭다운을 펼쳐서 `TextBox4` 항목을 선택합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
계층형 드릴다운 구성을 실제로 보려면 펼치세요.
DOC-SUMMARY-TAG-CLOSE
![AddingGrouping.ab41f5](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/AddingGrouping.ab41f5.52b197.gif)
DOC-DETAILS-TAG-CLOSE

### 표 열 서식 지정

지금 구축하는 표는 `매장/도시/지역/국가 이름`을 첫 열에, `총 직원 수`를 두 번째 열에, `총 판매 영역 크기`를 세 번째 열에 표시합니다. 이 정보를 바탕으로 열의 속성을 설정해 보겠습니다.

* 표에서 아무 곳이나 클릭하여 [열 및 행 처리기](/activereportsjs/docs/v4.1/#table-designer)를 표시합니다.
* 첫 번째 열 처리기를 클릭하고 속성 패널에서 `너비`를 `3.5in`로 설정합니다.
* 속성 패널에서 텍스트 상자로 전환합니다. 이제 선택한 열에서 모든 표 셀의 속성을 수정할 수 있습니다.
* `텍스트 맞춤` 속성을 `왼쪽`으로 설정합니다.
* `세로 맞춤` 속성을 `가운데`로 설정합니다.
* 오른쪽에 있는 아이콘을 사용하여 `안쪽 여백 편집기`를 확장하고 `안쪽 여백(왼쪽)` 속성을 `16pt`로 설정합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
열 서식 지정을 실제로 보려면 펼치세요.
DOC-SUMMARY-TAG-CLOSE
![FormattingColumns.4249d8](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/FormattingColumns.4249d8.03c131.gif)
DOC-DETAILS-TAG-CLOSE

같은 방식으로 두 번째, 세 번째 열의 다음 속성을 설정합니다.

| Property | Value |
| -------- | ----- |
| Column Width | 2in |
| Text Align | Right |
| Vertical Align | Middle |
| Right Padding | 16pt |

### 열 헤더 구성

표 헤더 행을 사용하여 표시된 필드의 헤더를 표시할 수 있습니다.

* 표에서 아무 곳이나 클릭하여 [열 및 행 처리기](/activereportsjs/docs/v4.1/#table-designer)를 표시합니다.
* 첫 번째 표 행의 두 번째 셀을 클릭하고 `총 직원`을 입력합니다.
* 첫 번째 표 행의 세 번째 셀을 클릭하고 `총 판매 영역(ft2)`을 입력합니다.
* 첫 번째 행 처리기를 클릭하고 속성 패널에서 높이를 `0.5in`로 설정합니다.
* 속성 검사자에서 `텍스트 상자` 탭으로 전환합니다. 이제 선택한 행에서 모든 셀의 속성을 수정할 수 있습니다.
* `배경색` 속성을 `#f8f8f8`로 설정합니다.
* 오른쪽에 있는 아이콘을 사용하여 `테두리 스타일` 편집기를 확장하고 `아래쪽 테두리 스타일` 속성을 `실선`으로 설정합니다.
* `테두리 색` 속성을 `#e6e6e6`으로 설정합니다.
* `텍스트 색` 속성을 `#3da7a8`로, `글꼴 두께`를 `굵게`로 설정합니다.

### 표 세부 정보 행 구성하기

표의 `세부 정보 행`은 고유 `Id`가 있는 각 매장마다 반복됩니다. 계층형 드릴다운 속성을 제대로 표시하도록 다음과 같이 구성합니다.

* 표에서 아무 곳이나 클릭하여 [열 및 행 처리기](/activereportsjs/docs/v4.1/#table-designer)를 표시합니다.
* 두 번째 섹션의 처리기를 클릭하여 속성 패널에서 `높이`를 `0.4in`로 설정합니다.
* 속성 검사자에서 `텍스트 상자` 탭으로 전환합니다. 이제 선택한 행에서 모든 셀의 속성을 수정할 수 있습니다.
* 오른쪽에 있는 아이콘을 사용하여 `테두리 스타일` 편집기를 확장하고 `아래쪽 테두리 스타일` 속성을 `실선`으로 설정합니다.
* `테두리 색` 속성을 `#e6e6e6`으로 설정합니다.
* 두 번째 표 행의 첫 번째 셀을 클릭하고 오른쪽에 있는 아이콘을 사용하여 `안쪽 여백 편집기`를 확장하고 `안쪽 여백(왼쪽)` 속성을 `{Level() * 12 + 12}pt`로 설정합니다. `레벨` 함수는 드릴다운 계층 구조에서 인덱스를 반환합니다.
* 두 번째 표 행의 두 번째 셀을 클릭하고 `값` 속성을 `{Sum(EmployeeCount, "GroupById", "Recursive")}`로 설정한 다음 `서식` 속성을 `n0`으로 설정합니다.
* 세 번째 표 행의 두 번째 셀을 클릭하고 `값` 속성을 `{Sum(SellingAreaSize, "GroupById", "Recursive")}`로 설정한 다음 `서식` 속성을 `n0`으로 설정합니다.

### 표 헤더 추가하기

이제 표 헤더 행을 하나 더 추가하여 제목 텍스트를 표시합니다.

* 표에서 아무 곳이나 클릭하여 열 및 행 처리기를 표시합니다.
* 첫 번째 행을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 `행 > 위에 행 삽입` 항목을 선택합니다.
* 새로 선택한 행의 처리기를 클릭하고 속성 패널에서 `높이` 속성을 `0.8in`로 설정합니다.
* 속성 패널에서 `텍스트 상자`로 전환합니다.
* `텍스트 색` 속성을 `#3da7a8`로, `글꼴 크기`를 `22pt`로, `글꼴 두께`를 `굵게`로, `세로 맞춤`을 `가운데`로 설정합니다.
* 오른쪽에 있는 아이콘을 사용하여 `안쪽 여백` 편집기를 확장하고 `안쪽 여백(왼쪽)` 속성을 `16pt`로 설정합니다.
* 첫 번째 행의 첫 번째 셀을 클릭하고 Windows에서는 `Ctrl` 버튼을, Mac OS에서는 `Cmd`를 누르고 같은 행에서 두 번째, 세 번째 셀을 클릭합니다.
* 선택한 항목을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 `셀 > 셀 병합` 항목을 선택합니다. 이제 행에 열 3개를 차지하는 단일 셀이 있습니다.
* 병합된 셀을 두 번 클릭하고 `매장 보고서`를 입력합니다.

### 보고서를 미리 봅니다.

이제 보고서 출력을 미리 보고 엔티티 이름 왼쪽에 있는 + 아이콘을 사용하여 제품 엔티티를 확장하고 축소할 수 있습니다. 부모 노드의 요약 값은 자식 노드의 값을 포함합니다.

최종 보고서 버전은 데모 [웹 사이트](/activereportsjs/demos/Reports/GetStartedWithHierarchicalReports/purejs)에서 확인할 수 있습니다.