# 연관된 데이터 집합을 사용하는 마스터-세부 정보 보고서 시작하기

## Content

마스터-세부 정보 보고서는 계층적 관계로 서로 관련된 데이터 구조를 표시하는 보고서 입니다. 예를 들어, 각 주문에 헤더(마스터 정보)와 품목(세부 정보)이 포함된 주문 목록을 시각화할 수 있습니다. ActiveReportsJS는 마스터-세부 정보 보고서를 생성하는 여러가지 방법을 제공합니다. 이 자습에서는 동일한 필드 값을 기반으로 포함된 일대다 관계로 연된 두 데이터 집합으로부터 마스터-세부 정보 보고서를 생성하는 방법을 보여줍니다.

첫 번째 데이터 집합은 제품 정보(`마스터 정보`)를 포함하고, 그 객체는 다음과 같습니다.

```json
{
   "ProductId": 715,
   "Name": "Long-Sleeve Logo Jersey, L",
   "ProductNumber": "LJ-0192-L",
   "Color": "Multi",
   "Size": "L"
}
```

두 번째 데이터 집합은 제품 가격 내역(`세부 정보`)를 포함하고, 그 객체는 다음과 같습니다.

```json
{
   "ProductId": 715,
   "StartDate": "2011-05-31",
   "EndDate": "2012-05-29",
   "ListPrice": 48.0673
}
```

한 제품은 여러 개의 가격 내역을 가집니다. `마스터 정보`와 `세부 정보`는 `ProductId` 필드로 연결됩니다.

이 자습서에서는 `Product Inventory` 보고서를 처음부터 작성하며, 일반적인 보고서 디자인 과정을 경험해 볼 것 입니다. 자습서를 마치면 다음을 수행할 수 있습니다.

* 새 보고서 만들기
* OData API보고서를 OData API에 바인딩
* OData [$select](https://www.odata.org/getting-started/basic-tutorial/#select) 쿼리 옵션과 [$filter](https://www.odata.org/getting-started/basic-tutorial/#filter) 쿼리 옵션을 사용하여 검색되는 데이터 볼륨 줄이기
* 필드 태그를 사용하여 필드의 데이터 형식 정의
* [테이블 데이터 영역](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table)을 만들어 `마스터` 정보 표시
* 테이블의 행, 열, 그리고 셀에 서식 적용
* 중첩된 [목록 데이터 영역](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/List)을 추가하여 `세부` 정보 표시
* 중첩된 목록에 필터 설정
* [Format](/activereportsjs/docs/ReportAuthorGuide/Expressions/Functions/conversion) 함수를 사용하여 서식이 지정된 데이터 표시

자습서 단계를 모두 완료하면 [라이브 데모](/activereportsjs/demos/Reports/GetStartedWithRelatedDataSets/purejs)와 같은 최종 보고서가 빌드 됩니다..

### 필수 구성 요소

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

### 새 보고서 생성

독립실행형 보고서 디자이너에서, [파일 메뉴](/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App)를 클릭하고 새로 보고서를 작성하기 위한 [연속 페이지 레이아웃](/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
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithMasterDetailReportsRelatedDataSets/CreatingNewReport.gif)
DOC-DETAILS-TAG-CLOSE

### 데이터 바인딩

[데이터 바인딩](/activereportsjs/docs/ReportAuthorGuide/Databinding)은 보고서와 보고서에 표시되는 데이터 간 연결을 구축합니다. 이 데모에서는 전 세계적으로 자전거를 제조 및 판매하는 `AdventureWorks`라는 가상 회사의 데이터가 포함된 [MESCIUS 데모 OData API](https://demodata.mescius.io/swagger/index.html?urls.primaryName=OData%20AdventureWorks)를 사용합니다.

### 데이터 소스 추가

[AdventureWorks OData API](https://demodata.mescius.io/swagger/index.html?urls.primaryName=OData%20AdventureWorks)는 루트 URL `https://demodata.mescius.io/adventureworks/odata/v1`을 사용하여 연결할 수 있고, [/Customers](https://demodata..mescius.io/adventureworks/odata/v1/Customers), [/Stores](https://demodata..mescius.io/adventureworks/odata/v1/Stores), 그리고 [/Products](https://demodata..mescius.io/adventureworks/odata/v1/Products)와 같은 끝점으로 표시되는 여러 "표"가 있는 "데이터베이스"로 생각할 수 있습니다. 다음 단계에 따라 해당 "데이터베이스"에 대한 연결을 설정하는 보고서 데이터 소스를 만들 수 있습니다.

* 속성 검사자의 [데이터 패널](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface)을 열고 `추가` 버튼을 클릭합니다.
* 데이터 소스 편집기 대화창에서, `이름` 필드에 `AdventureWorks`을 입력하고 `끝점` 필드에 `https://demodata.mescius.io/adventureworks/odata/v1`를 입력합니다.
* `변경 사항 저장` 버튼을 클릭합니다.

![image](https://cdn.mescius.io/document-site-files/images/2c0943df-d937-4f5c-966c-3390ae8bbb34/image.ae73de.png)

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

데이터 집합은 데이터 소스 끝점을 한 개 이상 나타냅니다. `Product Inventory` 보고서의 경우 이전 섹터에서 추가한 `AdventureWorks` 데이터 소스의 [/Products](https://demodata.mescius.io/adventureworks/odata/v1/Products)와 [/ProductListPriceHistories](https://demodata.mescius.io/adventureworks/odata/v1/ProductListPriceHistories) 끝점에 엑세스 해야합니다. 이 끝점으로 노출된 데이터들은 `ProductId` 필드로 관련되어 있습니다.

`Products` 데이터 집합을 추가하기 위해 다음 단계를 사용하세요.

* 데이터 패널에서 `AdventureWorks` 근처에 있는 `+` 아이콘을 클릭합니다.
* 데이터 집합 편집기 대화상자에서, 이름 필드에 `Products`를 입력하고, Uri/Path 필드에 `/Products`를 입력하고, `Json 경로` 필드에 `$.value.*`를 입력합니다.
* 기본적으로, 각 `Product` 레코드에는 필드가 25개 있지만, 해당 필드가 모두 필요하지는 않습니다. 따라서 `쿼리 매개 변수`를 통해 [$select 쿼리 옵션](https://www.odata.org/getting-started/basic-tutorial/#select)을 적용하여 검색되는 필드를 제한합니다.
    * `매개변수` 섹션 우측의 `+` 아이콘을 클릭합니다.
    * 새롭게 추가된 `매개변수` 항목의 `매개변수` 필드에 `$select`을 입력합니다.
    * 동일한 `매개변수` 항목의 `값` 필드에 `ProductNumber,Name,Color,Size`를 입력합니다.
* [$filter 쿼리 옵션](https://www.odata.org/getting-started/basic-tutorial/#filter)을 적용하여 조회된 데이터의 양을 더 줄일 수 있습니다.
    * `매개변수` 섹션 우측의 `+` 아이콘을 클릭합니다.
    * 새롭게 추가된 `매개변수` 항목의 `매개변수` 필드에 `$filter`을 입력합니다.
    * 동일한 `매개변수` 항목의 `값` 필드에 `ProductId+gt+714+and+ProductSubCategoryId+eq+21`를 입력합니다.
* `유효성 검사` 버튼을 클릭합니다.
* `데이터베이스 필드` 섹션에 위에서 입력한 `[5 항목]`에 해당하는 텍스트가 표시되는지 확인합니다.
* `변경 내용 저장` 버튼을 클릭합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 제품 데이터 집합 추가 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithMasterDetailReportsRelatedDataSets/AddingDataSet.gif)
DOC-DETAILS-TAG-CLOSE
비슷하게, `ProductListPriceHistories` 데이터 집합을 추가합니다.

* 데이터 패널에서 `AdventureWorks` 근처에 있는 `+` 아이콘을 클릭합니다.
* 데이터 집합 편집기 대화 상자의 이름 필드에 `ProductListPriceHistories`를, URi/경로 필드에는 `/ProductListPriceHistories`를, 그리고 `Json 경로` 필드에는 `$.value.*`를 입력합니다.
* [$filter 쿼리 옵션](https://www.odata.org/getting-started/basic-tutorial/#filter)을 적용하여 조회된 데이터의 양을 더 줄일 수 있습니다.
    * `매개변수` 섹션 우측의 `+` 아이콘을 클릭합니다.
    * 새롭게 추가된 `매개변수` 항목의 `매개변수` 필드에 `$filter`을 입력합니다.
    * 동일한 `매개변수` 항목의 `값` 필드에 `ProductId+gt+714`를 입력합니다.
* `유효성 검사` 버튼을 클릭합니다.
* `데이터베이스 필드` 섹션에 위에서 입력한 `[5 항목]`에 해당하는 텍스트가 표시되는지 확인합니다.
* `데이터베이스 필드`를 확장합니다. `StartDate`와 `EndDate` 필드의 `데이터 필드` 속성을 각각 `StartDate[Date]`와 `EndDate[Date]`로 설정합니다.
* `변경 내용 저장` 버튼을 클릭합니다.

### 표 데이터 영역 추가

제품 정보(마스터 정보)를 표시하기 위해 [표 데이터 영역](/activereportsjs/docs/v6.1/)을 사용합니다. 보고서에 [새 표를 추가](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table)하는 여러 가지 방법이 있습니다. 이 자습서에서는 빠른 방법을 사용해 보겠습니다.

* 펼침 아이콘을 사용하여 데이터 패널에서 `Products` 데이터 집합을 확장합니다.
* `Products` 데이터 집합 이름 근처에 있는 `필드 선택` 아이콘을 클릭합니다.
* `ProductNumber`, `Name`, `Color`, 그리고 `Size` 필드를 선택합니다.
* 선택한 필드를 보고서 레이아웃의 왼쪽 상단 모서리로 끌어 놓습니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 표 데이터 영역 추가 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithMasterDetailReportsRelatedDataSets/AddingTable.gif)
DOC-DETAILS-TAG-CLOSE
새로 생성된 표에는 선택한 각 필드에 해당하는 [열](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table) 4개, 필드 이름을 표시하는 [헤더 행](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table), 필드의 값을 표시하는 [세부 정보 행](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table)이 있습니다.

### 표 열 서식 지정

새로 생성된 테이블의 모든 열은 같은 너비로 표시되고, 각 열에 표시되는 데이터에 따라 조정되어야 합니다. 이를 위해, 표 내부 아무 곳이나 클릭하여 [열 및 행 처리기](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table)를 표시하고 다음 단계를 수행합니다.

* 첫 번째 열 처리기를 클릭하고 속성 패널에서 `너비`를 `2.5in`로 변경합니다.
* 두 번째 열 처리기를 클릭하고 속성 패널에서 `너비`를 `2in`로 변경합니다.
* 세 번째 열 처리기를 클릭하고 속성 패널에서 `너비`를 `1in`로 변경합니다.
* 네 번째 열 처리기를 클릭하고 속성 패널에서 `너비`를 `2in`로 변경합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 열 너비 설정 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithMasterDetailReportsRelatedDataSets/SettingColumnWidths.gif)
DOC-DETAILS-TAG-CLOSE

### 테이블 행 추가

현재 표는 두 개 행만 있습니다. 다음 단계에서는 보고서 제목을 표시하기 위해 [표 헤더](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table)에 행을 하나 더 추가하고, 제품 가격 내용을 표시하기 위해 [표 세부 정보](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table)에 행을 두 개 더 추가합니다.

* 첫 번째 행 처리기를 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 `행 > 위에 행 삽입` 항목을 선택합니다.
* 같은 방법으로 마지막 행 아래에 두 행을 삽입합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 세부 정보 아래에 행 추가 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithMasterDetailReportsRelatedDataSets/AddingTableRows.gif)
DOC-DETAILS-TAG-CLOSE

### 표 셀 병합

표의 첫 번째 행은 보고서 제목을 표시합니다. 그러므로, 첫 행의 셀을 병합하는 것이 편리합니다.

* 첫 번째 행의 첫 번째 셀을 클릭하고, Windows의 `Ctrl` 키 또는 Mac OS의 `Cmd` 키를 누를 후 같은 행의 2, 3, 4번째 셀을 클릭합니다.
* 선택 항목을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 `셀 > 셀 병합` 항목을 클릭합니다. 이제 행은 네 개의 열을 차지하는 단일 셀을 갖습니다.

같은 과정을 표의 마지막 두 행에서 반복합니다. 이 행에는 세부 정보에 대한 제목과 중첩된 [목록](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/List)이 호스팅됩니다.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 셀 병합 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithMasterDetailReportsRelatedDataSets/MergingCells.gif)
DOC-DETAILS-TAG-CLOSE

### 보고서 제목 서식 지정

표의 첫 번째 행은 보고서 제목을 표시합니다. 다음 단계에 따라 행 서식을 적절하게 지정할 수 있습니다.

* 첫 번째 행의 처리기를 클릭하고 속성 패널에서 `높이` 속성을 `0.5in`로 설정합니다.
* 속성 패널에서 `텍스트 상자` 탭으로 전환하고 보고서 제목의 텍스트에 대해 다음 속성을 설정합니다.

| 속성 | 값 |
| --- | --- |
| 값 | Product Inventory |
| 색상 | #3da7a8 |
| 글꼴 크기 | 24pt |
| 글꼴 두께 | 굵게 |
| 세로 맞춤 | 가운데 |

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 제목 서식 지정 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithMasterDetailReportsRelatedDataSets/FormattingTitle.gif)
DOC-DETAILS-TAG-CLOSE

### 형 헤더 서식 지정

표의 두 번째 행은 열 헤더를 포함합니다. 보고서 제목과 동일한 단계를 사용하여, 행 높이와 행의 셀에 보여지는 텍스트에 대해 다음 속성을 설정합니다.

| 속성 | 값 |
| --- | --- |
| 행 높이 | 0.5in |
| 테두리 너비 | 2pt |
| 테두리 스타일 | None None None Solid |
| 테두리 색 | #40cddf |
| 글꼴 두께 | Bold |
| 세로 맞춤 | 가운데 |

### 마스터 정보 서식 지정

표의 세 번째 행은 `Products` 데이터 집합의 각 데이터 레코드에 대해 반복됩니다. 행 높이와 행의 셀에 표시되는 텍스트에 대해 다음 속성을 설정합니다.

| 속성 | 값 |
| --- | --- |
| 행 높이 | 0.4in |
| 테두리 너비 | 1pt |
| 테두리 스타일 | 없음 점선 없음 없음 |
| 테두리 색 | #ccc |
| 세로 맞춤 | 가운데 |

### 세부 정보 제목 서식 지정

표의 네 번째 행은 세부 정보에 대한 중첩된 [목록](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/List)의 제목을 표시합니다. 행 높이와 행의 셀에 표시되는 텍스트에 대해 다음 속성을 설정합니다.

| 속성 | 값 |
| --- | --- |
| 행 높이 | 0.4in |
| 값 | Price History |
| 글꼴 크기 | 12pt |
| 글꼴 두께 | 굵게 |
| 세로 맞춤 | 가운데 |

### 중첩된 데이터 영역 추가

표의 마지막 행은 현재 제품의 가격 내역을 표시합니다. 그렇게 하려면, 다음 단계를 사용하여 행에 중첩된 [목록](/activereportsjs/docs/v6.1/)을 추가해야 합니다.

* 마지막 행의 처리기를 클릭하고 속성 패널에서 `높이` 속성을 `0.35in`으로 설정합니다.
* 도구 모음 왼쪽에 있는 `햄버거` 메뉴를 클릭하여 도구 상자를 확장합니다.
* 도구 상자의 [목록](/activereportsjs/docs/v6.1/) 항목을 표의 마지막 행으로 끌어다 놓습니다.
* 새로 추가된 목록의 속성 패널에서 `데이터 집합 이름` 속성을 `ProductListPriceHistories`로 설정합니다.
* 속성 검사자에서, 필터 편집기의 `+ 추가... ` 버튼을 클릭합니다.
* 필터 UI에서, `추가...` 버튼을 클릭하고, 드롭다운 메뉴에서 `ProductId` 필드를 선택한 후, `=` 기호 오른쪽 상자에 `{ProductId}`를 입력합니다. 그리고 헤더의 `뒤로가기 화살표` 버튼을 클릭하여 속성 검사자로 돌아갑니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행중인 중첩된 목록 추가 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithMasterDetailReportsRelatedDataSets/AddingNestedList.gif)
DOC-DETAILS-TAG-CLOSE

### 세부 정보 표시

도구 상자에서 두 개의 [텍스트 상자](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) 항목을 `목록`에 끌어다 놓고, 새로 추가된 텍스트 상자에 대해 다음 속성을 설정합니다.

| 속성 | 첫 번째 텍스트 상자 | 두 번째 텍스트 상자 |
| --- | ----------- | ----------- |
| 값 | {Format(StartDate, "d")} - {IIF(EndDate, Format(EndDate, "d"), Format(Now(), "d"))} | {Format(ListPrice, "c2")} |
| 색 | #0096aa | #0096aa |
| 텍스트 맞춤 | *Leave as Default* | Right |
| 왼쪽 | 0 | 6.25in |
| 위쪽 | 0 | 0 |
| 너비 | 3.25in | 1.25in |
| 높이 | 0.35in | 0.35in |

### 보고서 결과물 미리보기

이제 보고서 결과물을 [미리 보고](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Preview-Reports) 각 제품에 대해 다음 정보가 표시되는지 확인할 수 있습니다.

* 제품명, 수량, 크기, 색상(마스터 정보)
* 제품 가격 내역(세부 정보)

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