# 계층형 드릴다운 리포트

## Content

### 소개

계층적 드릴다운 보고서를 통해 독자는 계층적 트리의 분기를 점진적으로 확장하여 더 세부적인 세부 정보로 드릴다운할 수 있습니다. 이러한 보고서의 예로는 조직 계층과 체인점 계층이 있습니다.
이 튜토리얼은 `체인점 보고서`를 처음부터 구축하여 일반적인 보고서 디자인 프로세스에 대한 경험을 제공합니다. 학습을 마치면 다음을 수행할 수 있습니다.

* 새 보고서 작성
* 보고서를 내장된 JSON 데이터에 바인딩
* 표 데이터 영역 생성하고 표에 데이터 바인딩
* 표에 계층형 그룹 구성
* 재귀 요약 함수 사용
* `Level` 함수 사용

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

### 사전 준비 사항

아래 내용에서는 `독립 실행형 보고서 디자이너`가 실행 중이라고 가정합니다. 자세한 내용은 [자습서](/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App)를 참조하십시오. 또한 [데모 데이터 허브](https://demodata.grapecity.com/)에 액세스하려면 안정적인 인터넷 연결이 필요합니다.

### 새 보고서 작성

독립 실행형 보고서 디자이너에서, [파일 메뉴](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface)를 클릭하고 [연속 페이지 레이아웃 템플릿](/activereportsjs/docs/ReportAuthorGuide/보고서-구성/Report-Layouts)을 선택하여 새롭게 보고서를 생성합니다. 보고서 레이아웃 주위의 회색 영역 아무 곳이나 클릭하여 [속성 패널](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface)에서 보고서 속성을 로드합니다. 여백 섹션에서, 스타일 속성을 `좁게`로 설정하여 [보고서 페이지](/activereportsjs/docs/ReportAuthorGuide/보고서-구성/layout-properties) 여백 크기를 변경합니다.

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/ReportAuthorGuide/Databinding)를 만들 수 있습니다.

* 속성 검사자의 데이터 패널을 열고 추가 버튼을 클릭합니다.
* 데이터 소스 편집기 대화 상자에서 이름 필드에 `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` 근처에 있는 `+` 아이콘을 클릭합니다.
* 데이터 집합 편지기 대화상자에서 이름 필드에는 `Store`를, `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/v6.1/)는 수많은 기능을 포함하는 데이터 영역이며 계층형 드릴다운 구축도 지원합니다. 보고서에 새 표를 추가할 수 있는 여러 가지 방법이 있습니다. 이 자습서에서는 빠른 방법을 사용해 보겠습니다.

* 펼침 아이콘을 사용하여 데이터 패널에서 `Stores` 데이터 집합을 확장합니다.
* `Stores` 데이터 집합 이름 오른쪽의 `필드 선택` 아이콘을 클릭합니다.
* `Name`, `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/ReportAuthorGuide/Report-Items/Data-Regions/Table)를 표시합니다.
* 그룹 편집기에서 `<세부 정보 그룹>` 항목을 클릭합니다.
* 속성 패널에서 `이름` 속성을 `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/ReportAuthorGuide/Report-Items/Data-Regions/Table)를 표시합니다.
* 첫 번째 열 처리기를 클릭하고 속성 패널에서 `너비`를 `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

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

| 속성 | 값 |
| --- | --- |
| 열 너비 | 2in |
| 텍스트 맞춤 | 오른쪽 |
| 세로 맞춤 | 가운데 |
| 우측 여백 | 16pt |

### 열 헤더 구성

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

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

### 표 세부 정보 행 구성

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

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

### 표 헤더 추가

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

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

### 보고서 미리보기

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

최종 보고서 버전은 [데모 웹 사이트](https://demo.mescius.co.kr/activereportsjs/demos/Reports/GetStartedWithHierarchicalReports/purejs)에서 확인하실 수 있습니다.