중첩된 데이터 집합에 대 마스터-세부 정보 보고서 시작하기

마스터-세부 정보 보고서는 계층적 관계로 서로 관련된 데이터 구조를 표시하는 보고서 입니다. 예를 들어, 각 주문에 헤더(마스터 정보)와 품목(세부 정보)이 포함된 주문 목록을 시각화할 수 있습니다. ActiveReportsJS는 마스터-세부 정보 보고서를 생성하는 여러가지 방법을 제공합니다. 이 자습에서는 다음과 같은 객체가 포함된 단일 계층형 데이터 세트로부터 마스터-세부 정보 보고서를 생성하는 방법을 보여줍니다.

{
    "Name": "Long-Sleeve Logo Jersey, L",
    "ProductNumber": "LJ-0192-L",
    "Color": "Multi",
    "Size": "L",
    "ProductListPriceHistories": [
        {
            "StartDate": "2011-05-31T00:00:00Z",
            "EndDate": "2012-05-29",
            "ListPrice": 48.0673,
        },
        {
            "StartDate": "2012-05-30T00:00:00Z",
            "EndDate": "2013-05-29",
            "ListPrice": 48.0673,
        },
        {
            "StartDate": "2013-05-30T00:00:00Z",
            "EndDate": null,
            "ListPrice": 49.99,
        }
    ]
}

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

• 새 보고서 만들기

• 보고서를 OData API에 바인딩

• OData $select 쿼리 옵션과 $filter 쿼리 옵션을 사용하여 검색되는 데이터 볼륨 줄이기

• OData $expand 쿼리 옵션을 사용하여 계층형 데이터 조회하기

• 필드 태그를 사용하여 필드의 데이터 형식 정의

• 테이블 데이터 영역을 만들어 마스터 정보 표시

• 테이블의 행, 열, 그리고 셀에 서식 적용

• 중첩된 목록 데이터 영역을 추가하여 세부 정보 표시

• Format 함수를 사용하여 서식이 지정된 데이터 표시

자습서 단계를 모두 완료하면 라이브 데모와 같은 최종 보고서가 빌드됩니다.

필수 구성 요소

아래 내용에서는 독립 실행형 보고서 디자이너가 실행 중이라고 가정합니다. 자세한 내용은 자습서를 참조하십시오. 또한 데모 데이터 허브에 액세스하려면 안정적인 인터넷 연결이 필요합니다.

새 보고서 작성

독립실행형 보고서 디자이너에서, 파일 메뉴를 클릭하고 새로 보고서를 작성하기 위한 연속 페이지 레이아웃 템플릿을 선택합니다. 보고서 레이아웃에서 회색 영역 중 아무 곳이나 클릭하면 속성 패널에서 보고서 속성이 로드됩니다. 여백 섹션에서, 스타일 속성을 좁게로 설정하여 보고서 페이지 여백 크기를 변경합니다.

데이터 바인딩

데이터 바인딩은 보고서와 보고서에 표시되는 데이터 간 연결을 구축합니다. 이 데모에서는 전 세계적으로 자전거를 제조 및 판매하는 AdventureWorks라는 가상회사의 데이터가 포함된 MESCIUS 데모 OData API를 사용합니다.

데이터 소스 추가

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

• 속성 검사자의 데이터 패널을 열고 추가 버튼을 클릭합니다.

• 데이터 소스 편집기 대화 상자의 이름 필드에 AdventureWorks를, 끝점 필드에 https://demodata.mescius.io/adventureworks/odata/v1을 입력합니다.

• 변경 사항 저장 버튼을 클릭합니다.

데이터 집합 추가

데이터 집합은 데이터 소스 끝점을 한 개 이상 나타냅니다. Product Inventory 보고서의 경우 이전 섹션에서 추가한 AdventureWorks 데이터 소스의 /Products와 /ProductListPriceHistories 끝점에서 데이터를 액세스 해야합니다. 이러한 끝점들은 ProductId 필드로 연결되며, 이 관계를 사용하여 단일 쿼리로 계층적 데이터를 선택할 수 있습니다.

다음 단계에 따라 Products 데이터 집합을 추가하십시오.

• 데이터 패널에서 AdventureWorks 근처에 있는 + 아이콘을 클릭합니다.

• 데이터 집합 편집기 대화 상자의 이름 필드에 Products를, URi/경로 필드에는 /Products를, 그리고 Json 경로 필드에는 $.value.*를 입력합니다.

• 기본적으로, 각 Product 레코드에는 필드가 25개 있지만, 해당 필드가 모두 필요하지는 않습니다. 따라서 쿼리 매개 변수를 통해 $select 쿼리 옵션을 적용하여 검색되는 필드를 제한합니다.

  • 매개변수 섹션 우측의 + 아이콘을 클릭합니다.

  • 새롭게 추가된 매개변수 항목의 매개변수 필드에 $select을 입력합니다.

  • 동일한 매개변수 항목의 값 필드에 ProductNumber,Name,Color,Size를 입력합니다.

• $filter 쿼리 옵션을 적용하여 조회된 데이터의 양을 더 줄일 수 있습니다.

  • 매개변수 섹션 우측의 + 아이콘을 클릭합니다.

  • 새롭게 추가된 매개변수 항목의 매개변수 필드에 $filter을 입력합니다.

  • 동일한 매개변수 항목의 값 필드에 ProductId+gt+714+and+ProductSubCategoryId+eq+21를 입력합니다.

• $expand 쿼리 옵션을 적용하여 각 제품 데이터에 가격 내역이 포함된 계층형 데이터를 요청합니다.

  • 매개변수 섹션 우측의 + 아이콘을 클릭합니다.

  • 새롭게 추가된 매개변수 항목의 매개변수 필드에 $expand을 입력합니다.

  • 동일한 매개변수 항목의 값 필드에 ProductListPriceHistories를 입력합니다.

• 유효성 검사 버튼을 클릭합니다.

• 데이터베이스 필드 섹션에 위에서 입력한 [5 항목]에 해당하는 텍스트가 표시되는지 확인합니다.

• 중첩된 데이터 집합 섹션에 ProductListPriceHistories에 해당하는 텍스트가 표시되는지 확인합니다.

• ProductListPriceHistories 텍스트를 클릭하여 중첩된 데이터 집합의 속성으로 이동합니다.

• 데이터베이스 필드를 확장합니다. StartDate와 EndDate 필드의 데이터 필드 속성을 각각 StartDate[Date]와 EndDate[Date]로 설정합니다.

• 변경 내용 저장 버튼을 클릭합니다.

생성된 데이터 집합은 각 제품의 가격 내역과 함께 제품 목록을 반환합니다. 데이터 집합 트리가 이 구조를 반영하는 것을 볼 수 있습니다.

표 데이터 영역 추가

표 데이터 영역에는 제품 정보(마스터 정)를 표시할 수 있습니다. 보고서에 새 표를 추가할 수 있는 여러 가지 방법이 있습니다. 이 자습서에서는 빠른 방법을 사용해 보겠습니다.

• 펼침 아이콘을 사용하여 데이터 패널에서 Products 데이터 집합을 확장합니다.

• Products 데이터 집합 이름 근처에 있는 필드 선택 아이콘을 클릭합니다.

• ProductNumber, Name, Color, 그리고 Size 필드를 선택합니다.

• 선택한 필드를 보고서 레이아웃의 왼쪽 상단 모서리로 끌어 놓습니다.

새로 생성된 표에는 선택한 각 필드에 해당하는 열 4개, 필드 이름을 표시하는 헤더 행, 필드의 값을 표시하는 세부 정보 행이 있습니다.

표 열 서식 지정

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

• 첫 번째 열 처리기를 클릭하고 속성 패널에서 너비를 2.5in로 변경합니다.

• 두 번째 열 처리기를 클릭하고 속성 패널에서 너비를 2in로 변경합니다.

• 세 번째 열 처리기를 클릭하고 속성 패널에서 너비를 1in로 변경합니다.

• 네 번째 열 처리기를 클릭하고 속성 패널에서 너비를 2in로 변경합니다.

테이블 행 추가

현재 표는 두 개 행만 있습니다. 다음 단계에서는 보고서 제목을 표시하기 위해 표 헤더에 행을 하나 더 추가하고, 제품 가격 내용을 표시하기 위해 표 세부 정보에 행을 두 개 더 추가합니다.

• 첫 번째 행 처리기를 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 행 > 위에 행 삽입 항목을 선택합니다.

• 같은 방법으로 마지막 행 아래에 두 행을 삽입합니다.

표 셀 병합

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

• 첫 번째 행의 첫 번째 셀을 클릭하고, Windows의 Ctrl 키 또는 Mac OS의 Cmd 키를 누를 후 같은 행의 2, 3, 4번째 셀을 클릭합니다.

• 선택 항목을 마우스 오른쪽 버튼으로 클릭하고 드롭다운 메뉴에서 셀 > 셀 병합 항목을 클릭합니다. 이제 행은 네 개의 열을 차지하는 단일 셀을 갖습니다.

같은 과정을 표의 마지막 두 행에서 반복합니다. 이 행에는 세부 정보에 대한 제목과 중첩된 목록이 호스팅됩니다.

보고서 제목 서식 지정

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

• 첫 번째 행의 처리기를 클릭하고 속성 패널에서 높이 속성을 0.5in로 설정합니다.

• 속성 패널에서 텍스트 상자 탭으로 전환하고 보고서 제목의 텍스트에 대해 다음 속성을 설정합니다.

형 헤더 서식 지정

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

마스터 정보 서식 지정

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

세부 정보 제목 서식 지정

표의 네 번째 행은 세부 정보에 대한 중첩된 목록의 제목을 표시합니다. 행 높이와 행의 셀에 표시되는 텍스트에 대해 다음 속성을 설정합니다.

중첩된 데이터 영역 추가

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

• 마지막 행의 처리기를 클릭하고 속성 패널에서 높이 속성을 0.35in으로 설정합니다.

• 도구 모음 왼쪽에 있는 햄버거 메뉴를 클릭하여 도구 상자를 확장합니다.

• 도구 상자의 목록 항목을 표의 마지막 행으로 끌어다 놓습니다.

• 새로 추가된 목록의 속성 패널에서 데이터 집합 이름 속성을 ProductListPriceHistories로 설정합니다.

세부 정보 표시

도구 상자에서 두 개의 텍스트 상자 항목을 목록에 끌어다 놓고, 새로 추가된 텍스트 상자에 대해 다음 속성을 설정합니다.

보고서 출력 미리보기

이제 보고서 출력을 미리 보고 각 제품에 대해 다음 정보가 표시되는지 확인할 수 있습니다.

• 제품명, 수량, 크기, 색상(마스터 정보)

• 제품 가격 내역(세부 정보)

보고서의 최종 버전은 데모 웹사이트에서 확인할 수 있습니다.