드릴다운 보고서 시작하기

소개

드릴다운 보고서를 사용하면 종합적인 데이터 보기에서 상세 보기로 전환할 수 있습니다. 드릴다운 보고서는 데이터 시각화의 계층 구조를 사용합니다. 따라서 보고서 구독자가 계층 구조의 부모 항목을 확장하여 자식 항목을 표시할 수 있습니다. ActiveReportsJS에서는 표 또는 Tablix 데이터 영역을 사용하여 해당 보고서를 작성할 수 있습니다.

이 자습서에서는 판매 범주 보고서를 처음부터 만들어 보면서 일반적인 보고서 디자인 과정을 경험해 볼 것입니다. 학습을 마치면 다음을 수행할 수 있습니다.

• 새 보고서 작성
• 보고서를 GraphQL API에 바인딩
• 표 데이터 영역 만들기
• 표 내의 데이터를 그룹화하여 계층적 데이터 시각화 만들기
• 표의 행 및 열에 서식 적용
• 데이터 계층 구조의 여러 수준에 대한 요약 필드 표시
• 데이터 계층 구조에 대한 드릴다운 탐색 설정
• 보고서 뷰어의 갤러리 모드 사용

모든 자습서 단계를 완료하면 최종 보고서는 라이브 데모와 같이 표시됩니다.

필수 구성 요소

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

새 보고서 작성

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

데이터 바인딩

데이터 바인딩은 보고서와 보고서에 표시되는 데이터 간 연결을 구축합니다. 이 자습서에서는 잘 알려진 Northwind 데이터베이스를 복제하는 GrapeCity 데모 데이터 GraphQL API를 사용합니다. 이 데이터베이스에는 전 세계 특산품을 수입 및 수출하는 Northwind Traders라는 가상의 회사에 대한 판매 데이터가 들어 있습니다.

데이터 소스 추가

GrapeCity 데모 GraphQL API는 루트 URL https://demodata.grapecity.com/northwind/graphql을 사용하여 연결할 수 있고 GraphQL 쿼리를 수락하고 JSON 데이터로 응답하는 "데이터베이스"로 생각할 수 있습니다. 다음 단계에 따라 해당 "데이터베이스 연결"을 설정하는 보고서 데이터 소스를 만들 수 있습니다.

• 속성 검사자의 데이터 패널을 열고 추가 버튼을 클릭합니다.
• 데이터 소스 편집기 대화 상자의 이름 필드에 Northwind를, 끝점 필드에 https://demodata.grapecity.com/northwind/graphql을 입력합니다.
• HTTP 헤더 섹션의 오른쪽에 있는 + 아이콘을 클릭합니다.
• 새로 추가된 헤더 항목의 헤더 필드에 Content-Type을 입력합니다.
• 헤더 항목의 값 필드에 application/json을 입력합니다.
• 변경 사항 저장 버튼을 클릭합니다.

데이터 집합 추가

GraphQL 데이터 집합은 데이터 소스에 대한 쿼리를 나타냅니다. 판매 범주 보고서의 경우 제품 및 제품 범주 정보를 비롯하여 주문 세부 정보를 선택하기 위한 단일 "판매" 쿼리가 필요합니다. GraphQL UI에는 수정된 쿼리 버전이 표시됩니다.

{
  orderdetails {
    product {
      productId
      productName
      category {
        categoryId
        categoryName
      }
    }
    quantity
    unitPrice
    discount
  }
}

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

• 데이터 패널에서 Northwind 근처에 있는 + 아이콘을 클릭합니다.
• 데이터 집합 편집기 대화 상자에서 이름 필드에 Sales를 입력합니다.
• 메서드 드롭다운에서 HTTP POST를 선택합니다.
• Post 본문에 {"query":"{orderdetails{product{productId, productName, category{categoryId, categoryName}}, quantity, unitPrice,discount}}"}를 입력합니다.
• Json 경로 필드에 $.data.orderdetails.*를 입력합니다.
• 유효성 검사 버튼을 클릭합니다.
• 데이터베이스 필드 섹션에 위에서 입력한 [7개 항목]에 해당하는 텍스트가 표시되는지 확인합니다.
• 계산된 필드 섹션의 오른쪽에 있는 + 아이콘을 클릭합니다.
• 새로 추가된 항목의 필드 이름 필드에 salesAmount를 입력합니다.
• 동일한 항목의 값 필드에 {quantity * unitPrice * (1-discount)}를 입력합니다.
• 변경 사항 저장 버튼을 클릭합니다.

표 데이터 영역 추가

이 자습서에서는 표 데이터 영역을 사용하여 드릴다운 보고서를 만듭니다. 보고서에 새 표를 추가할 수 있는 여러 가지 방법이 있습니다. 여기서는 일반적인 방법에 따라 새 열을 추가하고 상세 행을 제거하여 기본 표 구성을 조정합니다.

• 도구 모음 왼쪽에 있는 햄버거 메뉴를 사용하여 도구 상자를 확장합니다.
• 표 항목을 도구 상자에서 보고서 페이지 영역의 왼쪽 위로 끌어 놓습니다.
• 표에서 아무 곳이나 클릭하여 열 및 행 처리기를 표시합니다.
• 마지막 열 처리기를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 열 > 오른쪽에 열 삽입 항목을 선택합니다.
• 두 번째 행 처리기를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 삭제 항목을 선택합니다.

새로 만든 표에는 열 4개와, 헤더 및 푸터 행이 있습니다.

계층적 표 그룹화 설정

작성 중인 보고서에는 최상위 데이터 계층 수준에 제품 범주별 판매 총액이 표시되어야 합니다. 보고서 구독자가 최상위 수준을 확장하면 지정된 범주 내에서 제품별 판매 총액이 표시되어야 합니다. 이렇게 하기 위해 product.category.categoryId로 표를 그룹화한 다음 판매 데이터 집합의 product.productId 필드로 그룹화합니다.

• 표에서 아무 곳이나 클릭하여 그룹 편집기를 표시합니다.
• 펼침 아이콘을 사용하여 데이터 패널에서 "판매" 데이터 집합을 확장합니다.
• 그룹 편집기에서 product.category.categoryId 필드를 끌어서 놓습니다.
• 그룹 편집기에서 product.productId 필드를 끌어서 놓습니다.

이제 표에는 각 그룹에 대해 헤더 및 푸터 행이 있습니다. 보고서에 그룹 푸터를 사용하지 않을 것이기 때문에 다음과 같이 삭제할 수 있습니다.

• Windows에서는 Ctrl 버튼을, Mac OS에서는 Cmd를 누른 상태에서 표의 4번째와 5번째 행 처리기를 클릭합니다.
• 4번째 또는 5번째 행 처리기를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 행 > 행 삭제 항목을 선택합니다.

표 열 서식 지정

여기서 작성한 표에서 첫 번째 열에는 제품 범주 이름, 두 번째 열에는 제품 이름, 세 번째 및 네 번째 열에는 수량 및 판매 금액 합계가 표시되어야 합니다. 이 정보를 바탕으로 열의 속성을 설정해 보겠습니다.

• 표에서 아무 곳이나 클릭하여 열 및 행 처리기를 표시합니다.
• 첫 번째 열 처리기를 클릭하고 속성 검사자에서 너비를 2in로 설정합니다.
• 두 번째 열 처리기를 클릭하고 속성 검사자에서 너비를 2.5in로 설정합니다.
• 세 번째 열 처리기를 클릭하고 Windows에서는 Ctrl 버튼을, Mac OS에서는 Cmd를 누른 상태에서 4번째 행 처리기를 클릭합니다.
• 속성 검사자에서 선택한 열의 너비를 1.5in로 설정합니다.

속성 검사자에서 텍스트 상자 탭으로 전환합니다. 이제 선택한 열에서 모든 표 셀의 속성을 수정할 수 있습니다.

• 첫 번째 열 처리기를 클릭합니다.
• 텍스트 맞춤 속성을 왼쪽으로 설정합니다.
• 세로 맞춤 속성을 가운데로 설정합니다.
• 오른쪽에 있는 아이콘을 사용하여 안쪽 여백 편집기를 확장하고 안쪽 여백(왼쪽) 속성을 16pt로 설정합니다.

같은 방식으로 다른 열 셀의 다음 속성을 설정합니다.

열 헤더 구성

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

• 첫 번째 표 행의 첫 번째 셀을 두 번 클릭하고 범주를 입력합니다.
• 첫 번째 표 행의 두 번째 셀을 두 번 클릭하고 제품을 입력합니다.
• 첫 번째 표 행의 세 번째 셀을 두 번 클릭하고 판매 수량을 입력합니다.
• 첫 번째 표 행의 네 번째 셀을 두 번 클릭하고 판매 금액을 입력합니다.
• 첫 번째 행 처리기를 클릭하고 속성 검사자에서 높이를 0.5in로 설정합니다.
• 속성 검사자에서 텍스트 상자 탭으로 전환합니다. 이제 선택한 행에서 모든 셀의 속성을 수정할 수 있습니다.
• 배경색 속성을 #f7f7f7로 설정합니다.
• 오른쪽에 있는 아이콘을 사용하여 테두리 스타일 편집기를 확장하고 위쪽 테두리 스타일 및 아래쪽 테두리 스타일 속성을 실선으로 설정합니다.
• 테두리 색 속성을 #e6e6e6으로 설정합니다.
• 텍스트 색 속성을 #3da7a8로, 글꼴 두께를 굵게로 설정합니다.

참고: 이 단계와 다음 3번의 단계는 이전 단계에서 열 서식을 지정하는 것과 매우 유사하기 때문에 여기서는 애니메이션 보여 주기를 건너뜁니다. 행과 열의 서식을 지정하는 방법을 실제로 보려면 마지막 단계에서 하나를 검토할 수 있습니다.

범주 그룹 헤더 구성

표에서 각 제품 범주마다 [1 아이콘이 표시된 그룹 헤더 행을 생성합니다. 이제 행의 서식을 지정하고 범주별 수량 및 판매 금액에 대한 요약 값을 추가합니다.

• 표에서 아무 곳이나 클릭하여 열 및 행 처리기를 표시합니다.
• 두 번째 행 처리기를 클릭합니다.
• 속성 검사자에서 행 탭으로 전환합니다.
• 높이 속성을 0.4in로 설정합니다.
• 속성 검사자에서 텍스트 상자 탭으로 전환합니다. 이제 선택한 행에서 모든 셀의 속성을 수정할 수 있습니다.
• 테두리 두께 속성을 0.25pt로 설정합니다.
• 오른쪽에 있는 아이콘을 사용하여 테두리 스타일 편집기를 확장하고 아래쪽 테두리 스타일 속성을 실선으로 설정합니다.
• 테두리 색 속성을 #e6e6e6으로 설정합니다.
• 두 번째 행에서 첫 번째 셀의 필드 선택기를 클릭하고 드롭다운 메뉴에서 {[product.category.categoryName]} 항목을 선택합니다.
• 두 번째 행의 세 번째 셀을 두 번 클릭하고 {Sum(quantity)}를 입력합니다.
• 두 번째 행의 네 번째 셀을 두 번 클릭하고 {Sum(salesAmount)}를 입력합니다.

제품 그룹 헤더 구성

표에서 지정된 범주 내 각 제품마다 [2 아이콘이 표시된 그룹 헤더 행을 생성합니다. 이제 행의 서식을 지정하고 제품별 수량 및 판매 금액에 대한 요약 값을 추가합니다.

• 표에서 아무 곳이나 클릭하여 열 및 행 처리기를 표시합니다.
• 세 번째 행 처리기를 클릭합니다.
• 속성 검사자에서 행 탭으로 전환합니다.
• 높이 속성을 0.4in로 설정합니다.
• 속성 검사자에서 텍스트 상자 탭으로 전환합니다. 이제 선택한 행에서 모든 셀의 속성을 수정할 수 있습니다.
• 테두리 두께 속성을 0.25pt로 설정합니다.
• 오른쪽에 있는 아이콘을 사용하여 테두리 스타일 편집기를 확장하고 아래쪽 테두리 스타일 속성을 점선으로 설정합니다.
• 테두리 색 속성을 #e6e6e6으로 설정합니다.
• 세 번째 행의 첫 번째 셀을 두 번 클릭하고 기존 텍스트를 제거합니다.
• 세 번째 행에서 두 번째 셀의 필드 선택기를 클릭하고 드롭다운 메뉴에서 {[product.productName]} 항목을 선택합니다.
• 세 번째 행의 세 번째 셀을 두 번 클릭하고 {Sum(quantity)}를 입력합니다.
• 세 번째 행의 네 번째 셀을 두 번 클릭하고 {Sum(salesAmount)}를 입력합니다.

표 푸터 구성

표 푸터를 사용하여 표 전체에서 수량 및 판매 금액에 대한 총합계를 표시합니다.

• 표에서 아무 곳이나 클릭하여 열 및 행 처리기를 표시합니다.
• 네 번째 행 처리기를 클릭합니다.
• 속성 검사자에서 행 탭으로 전환합니다.
• 높이 속성을 0.5in로 설정합니다.
• 속성 검사자에서 텍스트 상자 탭으로 전환합니다. 이제 선택한 행에서 모든 셀의 속성을 수정할 수 있습니다.
• 배경색 속성을 #f7f7f7로 설정합니다.
• 오른쪽에 있는 아이콘을 사용하여 테두리 스타일 편집기를 확장하고 위쪽 테두리 스타일 속성을 실선으로 설정합니다.
• 테두리 색 속성을 #e6e6e6으로 설정합니다.
• 글꼴 두께 속성을 굵게로 설정합니다.
• 네 번째 행의 세 번째 셀을 두 번 클릭하고 {Sum(quantity)}를 입력합니다.
• 네 번째 행의 네 번째 셀을 두 번 클릭하고 {Sum(salesAmount)}를 입력합니다.

표 헤더 추가

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

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

드릴다운 추가

여기서 작성하는 보고서에는 기본적으로 범주별 판매가 표시되어야 하고, 보고서 구독자가 범주를 확장하여 해당 범주 내에서 제품별 판매를 탐색할 수 있어야 합니다. 제품 그룹화의 동적 표시 여부를 설정하여 해당 결과를 얻을 수 있습니다.

• 표에서 아무 곳이나 클릭하여 그룹 편집기를 표시합니다.
• 그룹 목록에서 [2 Table1_productproductId1을 클릭합니다.
• 숨김 속성을 True로 설정합니다.
• 항목 토글 드롭다운에서 TextBox4를 선택합니다. TextBox4에 범주 이름이 표시됩니다. 이렇게 설정하면 제품 그룹 인스턴스가 동적으로 표시되어 보고서 구독자가 각 범주 근처에 표시되는 확장 또는 축소 아이콘을 클릭하면 숨겨집니다.

미리 보기에 갤러리 모드 사용

이제 보고서 출력을 미리 보고 범주 이름 왼쪽에 있는 + 아이콘을 사용하여 제품 범주를 확장하고 축소할 수 있습니다. 보고서 뷰어 도구 모음에서 맨 오른쪽에 있는 갤러리 모드라는 버튼을 클릭할 수 있습니다. 이 버튼은 뷰어 모드를 전환하여 드릴다운 보고서를 읽기에 적합한, 페이지가 매겨지지 않은 출력을 표시합니다.

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