소개

페이지 없는 보고서는 데이터를 페이지가 지정되지 않은 방식으로 표시하기 위한 방법으로, 콘텐츠가 페이지 대신 섹션으로 분할됩니다. 이 레이아웃 유형은 PDF로 내보내기 또는 출력이 필요하지 않으면서 고도로 동적이고 상호작용 가능한 데이터 시각화에 적합합니다.

이 자습서에서는 처음부터 페이지 없는 판매 보고서를 구축하여 일반적인 보고서 디자인 프로세스에 대한 실습 경험을 제공합니다.

자습서를 마치면 다음을 수행할 수 있습니다.

• 새 페이지 없는 보고서 만들기

• 여러 끝점을 사용하여 보고서를 OData API에 바인딩

• OData $select 쿼리 옵션을 사용하여 검색된 데이터의 볼륨 줄이기

• 데이터 집합 계산 필드 만들기

• 보고서 구독자와 상호 작용하기 위한 보고서 매개 변수 만들기

• 목록 데이터 영역과 매개 변수 적용 상호작용 작업을 사용하여 런타임 필터 패널을 구축합니다.

• 런타임에서 데이터를 필터링하는 표 및 차트 영역을 생성합니다.

• 스크롤 가능한 컨테이너 만들기

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

사전 준비 사항

이 자습서에서는 독립 실행형 보고서 디자이너가 실행되고 있다고 가정합니다. 독립 실행형 보고서 디자이너를 시작하는 방법에 대한 상세 설명은 연결된 자습서를 참조하십시오. 또한 데모 데이터 허브에 액세스하려면 안정적인 인터넷 연결이 필요합니다.

새 보고서 작성

독립 실행형 보고서 디자이너에서 새 보고서를 작성하려면 다음 단계를 따릅니다.

1. 파일 메뉴를 클릭합니다.

2. 새로 만들기 옵션을 선택합니다.

3. 사용 가능한 템플릿 중에서 페이지 없는 레이아웃 템플릿을 선택합니다.

4. 그러면 페이지 없는 레이아웃 템플릿이 사용된 새 보고서가 생성됩니다.

데이터 바인딩

데이터 바인딩은 보고서와 보고서에 표시될 데이터 간 연결을 구축하는 절차입니다. 이 자습서에서는 GrapeCity 데모 OData API를 사용합니다. 이 API는 Contoso라는 가상의 회사에 대한 매출 데이터를 포함하고 있습니다. 이 회사는 100,000개가 넘는 제품을 제조 및 판매하고 지원하는 조직입니다.

데이터 소스 추가

Contoso OData API를 루트 URL https://demodata.grapecity.com/contoso/odata/v1을 통해 연결할 수 있는 '데이터베이스'로 간주할 수 있습니다. 이 API는 /DimCustomers, /DimStores, /DimProducts 등의 끝점에서 표현되는 다수의 '표'를 제공합니다. 이 '데이터베이스'와 연결하기 위해 다음 단계를 따라 보고서 데이터소스를 생성할 수 있습니다.

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

2. 데이터 소스 편집기 대화 상자의 이름 필드에는 Contoso를, 끝점 필드에는 https://demodata.grapecity.com/contoso/odata/v1을 입력합니다.

3. 변경 사항 저장 버튼을 클릭하여 데이터 소스 생성을 마무리합니다.

보충 데이터 집합 추가하기

데이터 집합은 한 개 이상의 데이터 소스 끝점을 나타냅니다. 판매 보고서의 경우 Contoso 데이터 소스의 /DimPromotions 및 /FactSales 이전 섹션에서 추가한 끝점의 데이터에 액세스할 수 있어야 합니다. 첫 번째 데이터 집합은 보조적이며 이를 사용하여 판매 엔티티에 대한 할인 정보를 얻을 수 있습니다. 다음 단계에 따라 Promotions 데이터 집합을 추가합니다.

1. 데이터 패널에서 Contoso 데이터 소스 옆의 + 아이콘을 클릭합니다.

2. 데이터 집합 편집기 대화 상자의 이름 필드에는 Promotions를, Uri/경로 필드에는 /DimPromotions를, Json 경로 필드에는 $.value.*를 입력합니다.

3. 기본적으로 각 Promotion 레코드에는 14개의 필드가 있지만 모두 필요하지는 않습니다. 쿼리 매개 변수를 통해 OData $select 쿼리 옵션을 적용하여 검색되는 필드를 제한합니다.

4. 매개 변수 섹션 오른쪽에 있는 + 아이콘을 클릭합니다.

5. 새로 추가한 매개 변수 항목의 매개 변수 필드에 $select를 입력합니다.

6. 동일한 매개 변수 항목의 값 필드에 PromotionKey, PromotionType을 입력합니다.

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

8. 데이터베이스 필드 섹션에 [2개 항목]이라는 텍스트가 표시되는지 확인합니다.

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

판매 데이터 집합 추가하기

다음으로 판매 데이터 집합을 추가하겠습니다. 이런 방식으로 보고서에서 시각화할 실제 데이터가 제공됩니다.

1. 데이터 패널에서 Contoso 데이터 소스 옆의 + 아이콘을 클릭합니다.

2. 데이터 집합 편집기 대화 상자에서 다음을 수행합니다.

   • 이름 필드에 Sales 입력

   • Uri/Path 필드에 /FactSales 입력

   • Json 경로 필드에 $.value.* 입력

기본적으로 각 Sales 레코드에는 19개의 필드가 포함되어 있지만 모두 필요하지는 않습니다. 쿼리 매개 변수를 통해 OData $select 쿼리 옵션을 적용하여 검색되는 필드를 제한합니다.

3. 매개 변수 섹션 오른쪽에 있는 + 아이콘을 클릭합니다.

4. 새 매개 변수 항목에 대해 다음을 수행합니다.

   • 매개 변수 필드에서 $select를 선택합니다.

   • 값 필드에 DateKey,StoreKey,SalesAmount,ChannelKey,ProductKey,SalesQuantity,PromotionKey를 입력합니다.

유효성 검사 버튼을 클릭하고 데이터베이스 필드 섹션에 [7개 항목]이라는 텍스트가 표시되는지 확인한 다음 변경 사항 저장 버튼을 클릭합니다.

보고서 디자인 절차를 간소화하기 위해 몇 개의 계산된 필드를 추가할 것입니다. 이 값들은 데이터 집합에서 반환한 필드로부터 유도됩니다.

5. 계산 필드 섹션 오른쪽에 있는 + 아이콘을 클릭합니다.

6. 새 계산된 필드에서 다음을 수행합니다.

   • 필드 이름 필드에 SalesYear를 입력합니다.

   • 값 필드에 *{Year(DateKey)}*를 입력합니다.

이 표현식은 Year 함수를 사용하여 판매 날짜의 해를 반환합니다.

이 절차를 반복하여 다음 계산된 필드를 추가합니다.

7. SalesMonth와 값 {Month(DateKey)}

8. SalesChannel과 값 {Switch(ChannelKey = 1, "Store", ChannelKey = 2, "Online", ChannelKey = 3, "Catalog", ChannelKey = 4, "Reseller")}

9. ProductCategory와 값 {Switch(ProductKey < 116, "Audio", ProductKey >= 116 And ProductKey < 338, "TV and Video", ProductKey >= 338 And ProductKey < 944, "Computers", ProductKey >= 944 And ProductKey < 1316, "Cameras", ProductKey >= 1316, "Cell Phones")}

10. 마지막으로 변경 사항 저장 버튼을 클릭합니다.

마지막 두 개의 표현식은 Switch 함수를 사용하여 채널 ID(ChannelKey)와 제품 ID별 제품 범주(ProductKey)로 채널 이름을 결정합니다.

보고서 매개 변수 추가하기

이 판매 보고서는 판매 연도별 판매 데이터를 필터링하는 기능을 사용자에게 제공합니다. 이를 위해 보고서 매개 변수를 사용합니다. 연도 보고서 매개 변수를 생성하려면 아래 단계를 따릅니다.

1. 데이터 패널로 이동하여 매개 변수 섹션의 +추가 버튼을 클릭합니다.

2. 이름 필드에서 연도를 입력합니다.

3. 데이터 유형 드롭다운에서 정수를 선택합니다.

4. 숨김 플래그를 True로 설정합니다.

5. 기본값 섹션에서 다음을 수행합니다.

   • 쿼리 사용 안함 옵션 선택

   • 추가 버튼 클릭

   • 기본값을 2007로 설정

필터 패널 추가하기

보고서 구독자가 연도 매개 변수 값을 설정하도록 지원하기 위해 Sales 데이터 집합에서 모든 연도를 표시하는 대화형 패널을 사용할 것입니다. 먼저 섹션 영역 안을 클릭하고 높이 속성을 10in로 설정한 뒤 다음 단계를 따릅니다.

1. 도구 상자 액세스: 도구 모음 왼쪽에 있는 햄버거 메뉴를 사용하여 도구 상자를 확장합니다.

2. 컨테이너 추가: 컨테이너 보고서 항목을 도구 상자에서 섹션의 왼쪽 상단 구석으로 끌어 놓습니다.

3. 컨테이너 구성: 속성 검사자에서 속성 패널로 전환하고 컨테이너에 대해 다음 속성을 설정합니다.

   Property	Value
   Name	FilterPanel
   Border Width	0.25pt
   Border Style	Solid
   Border Color	Gainsboro
   Left	0.5in
   Top	0.5in
   Width	9in
   Height	1in

4. 텍스트 상자 추가: 도구 상자로부터 텍스트 상자 보고서 항목을 새로 추가된 컨테이너의 왼쪽 상단 구석으로 끌어 놓습니다. 텍스트 상자를 다음 속성으로 구성합니다.

   Property	Value
   Name	FilterPanelHeader
   Value	Click year to filter data
   Font Weight	Bold
   Text Align	Center
   Vertical Align	Middle
   Left	0.25in
   Top	0.25in
   Width	2.25in
   Height	0.5in

5. 목록 추가: 목록 보고서 항목을 도구 상자에서 컨테이너 영역으로 끌어 놓습니다. 목록을 다음 속성으로 구성합니다.

   Property	Value
   Name	YearList
   Action Type	Apply Parameters
   Apply Parameters Configuration	Parameter: Year, Action: Set, Value: {SalesYear}
   Data Set Name	Sales
   Group Expression	{SalesYear}
   Text Align	Center
   Vertical Align	Middle
   Left	2.75in
   Top	0in
   Width	6in
   Height	1in
   Rows or Columns Count	3

6. 목록에 텍스트 상자 추가: 텍스트 상자 항목을 도구 상자에서 목록의 왼쪽 상단 구석으로 끌어 놓습니다. 텍스트 상자를 다음 속성으로 구성합니다.

   Property	Value
   Name	YearText
   Value	{SalesYear}
   Default Border Width	0.5pt
   Default Border Style	{IIF(SalesYear = @Year, "Dashed", "None")}
   Default Border Color	Black
   Text Align	Center
   Vertical Align	Middle
   Left	0.5in
   Top	0.5in
   Width	9in
   Height	1in

이러한 여러 단계를 성공적으로 완료하면 보고서 디자인이 아래와 같이 나타나게 됩니다.

보고서를 미리 보면 2007, 2008, 2009 연도가 가로 형식으로 표시되는 것을 볼 수 있습니다. 현재 매개 변수 값과 일치하는 연도가 테두리로 강조 표시됩니다. 원하는 연도를 클릭하여 매개 변수 값을 조절할 수 있습니다.

요약 표 추가하기

다음으로 현재 선택된 연도의 월간 매출을 표시하는 표를 추가하겠습니다.

1. 디자인 타임으로 전환: UI 왼쪽 상단 구석에 있는 뒤로 버튼을 클릭하여 보고서 디자인으로 돌아갑니다.

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

3. 표 추가: 도구 상자에서 표 보고서 항목을 이전 단계에서 추가된 필터 패널 아래의 섹션 영역으로 끌어 놓습니다. 표에서 다음 속성을 설정합니다.

   Property	Value
   Name	SummaryTable
   Border Width	0.25pt
   Border Style	Solid
   Border Color	Gainsboro
   Left	0.5in
   Top	1.75in
   Data Set Name	Sales

4. 표 필터 구성: 표 속성에서 필터 속성을 찾고 추가 버튼을 클릭합니다. 필터 편집기에서 추가... 버튼을 클릭하고 SalesYear 필드를 선택한 다음 = 연산자 오른쪽의 드롭다운 목록에서 연도 매개 변수를 선택합니다.

   
   

5. 표 그룹화 구성: 표의 그룹 에디터에서 SummaryTable_DetailsGroup1 항목을 클릭합니다. {SalesMonth}를 GroupingExpressions 및 SortExpressions 목록에 추가합니다. 이 구성은 월별로 하나의 세부 정보 행을 생성하고 오름차순으로 정렬합니다.

6. 표 열 구성: 표 세 번째 열의 열 처리기를 우클릭하고 드롭다운 메뉴에서 삭제 명령을 선택합니다. 해당 열 처리기를 클릭하고 속성 검사자에서 속성을 수정하여 첫 번째 열의 너비를 2.5in로 설정하고 두 번째 열의 너비를 1.5in로 설정합니다.

7. 표 셀 구성: 표의 각 셀은 표 셀을 클릭하여 선택할 수 있는 텍스트 상자 보고서 항목을 포함합니다. 아래 표를 사용하여 이 텍스트 상자의 속성을 설정합니다.

   Row	Column	Property	Value
   1st	1st	Name	SummaryTableHeader
   		Value	Monthly sales in {@Year}
   2nd	1st	Name	SalesMonth
   		Value	{MonthName(SalesMonth)}
   2nd	2nd	Name	SalesAmount
   		Value	{SalesAmount}
   		Format	c2
   3rd	1st	Name	TextTotal
   		Value	Total
   		Font Weight	Bold
   		Text Align	Right
   3rd	2nd	Name	SalesAmountTotal
   		Value	{Sum(SalesAmount)}
   		Format	c2
   		Font Weight	Bold

이러한 여러 단계를 성공적으로 완료하면 보고서 디자인이 아래와 같이 나타나게 됩니다.

이제 보고서를 미리 보고 필터 패널에서 연도를 전환할 수 있습니다. 표는 다시 렌더링되어 현재 선택된 연도 데이터를 표시하게 됩니다.

차트에 추가하기

이 섹션에서는 현재 선택된 연도의 판매 채널당 판매량을 나타내는 차트를 추가할 것입니다. 단계는 다음과 같습니다.

1. 디자인 타임으로 전환: UI 왼쪽 상단 구석에 있는 뒤로 버튼을 클릭하여 보고서 디자인 보기로 돌아갑니다.

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

3. 차트 추가: 도구 상자에서 차트 보고서 항목을 이전 단계에서 추가된 표 옆 섹션 영역으로 끌어 놓습니다. 그러면 차트 마법사가 나타납니다.

4. 차트 데이터 구성: 차트 마법사의 데이터 및 유형 섹션에서 데이터 집합 선택 드롭다운 메뉴의 판매를 선택하고 막대 도표 유형을 선택합니다.

   
   

   그 후 다음을 클릭합니다. 막대 설정 페이지에서 데이터 값을 추가하여 필드를 {SalesAmount}로 설정하고 집계를 합계로 설정합니다. 데이터 범주에서 필드를 {SalesChannel}로 설정하고 다음을 클릭합니다.

   
   

   
   

   
   

   미리 보기 페이지에서 차트 팔레트 선택 드롭다운의 회색조를 선택하고 마침을 클릭합니다.

   
   

   
   

   
   

5. 보고서 탐색기 열기: 햄버거 메뉴 아래의 탐색기 버튼을 클릭하고 보고서 탐색기를 고정하여 계속 표시되게 함으로써 차트 영역 내 탐색을 촉진합니다.

   
   

6. 일반 차트 속성 설정: 보고서 탐색기에서 Chart1 항목을 선택합니다. 그런 다음 속성 패널에서 다음 속성을 설정합니다.

   Property	Value
   Name	ChartSalesPerChannel
   Border Width	0.25pt
   Border Style	Solid
   Border Color	Gainsboro
   Left	5in
   Top	1.75in
   Width	4.5in
   Height	3.5in

7. 차트 필터 구성: 차트 속성에서 필터 속성을 찾고 추가 버튼을 클릭합니다. 필터 편집기에서 추가... 버튼을 클릭하고 SalesYear 필드를 선택한 다음 = 연산자 오른쪽의 드롭다운 목록에서 연도 매개 변수를 선택합니다.

   
   

   
   

   
   

8. 차트 헤더 구성: 보고서 탐색기에서 ChartSalesPerChannel 아래의 헤더를 선택하고 다음 속성을 설정합니다.

   Property	Value
   Caption	Sales per Channel in {@Year}
   Text Align	Left
   Vertical Align	Top
   Padding	2pt

9. X축 구성: 보고서 탐색기의 도표 영역 아래에서 X축 - [Plot1]을 선택하고 선 섹션의 표시 여부 플래그를 False로 설정합니다.

10. Y축 구성: 보고서 탐색기에서 도표 영역 아래의 Y축 - [Plot1] 항목을 클릭하고 다음 속성을 설정합니다.

    Property	Value
    Title	(empty string)
    Line->Visible	False
    Labels->Visible	False
    Major Grid->Visible	False

11. 도표 구성: 보고서 탐색기의 ChartSalesPerChannel 아래에서 도표 - Plot1 항목을 선택하고 다음 설정을 적용합니다.

    Property	Value
    Category Sort Expression	{Sales Amount}
    Category Sort Direction	Ascending
    Category Sorting Aggregate	Sum
    Label Text->Template	{valueField.value:c2} (this can be set in the expression editor)

이러한 여러 단계를 성공적으로 완료하면 보고서 디자인이 아래와 같이 나타나게 됩니다.

이러한 단계를 거친 뒤 보고서를 미리 보고 필터 패널을 사용하여 연도를 전환할 수 있습니다. 차트와 표 모두 현재 선택된 연도 데이터를 표시하도록 동적으로 업데이트됩니다!

세부 정보 표 추가하기

다음으로 현대 선택된 연도 내에서 각 판매의 세부 정보를 표시하는 표를 추가하겠습니다. 많은 개별 판매 기록이 있을 수 있으므로 표를 스크롤할 수 있어야 하며 열 헤더가 고정되어야 합니다.

1. 디자인 타임으로 전환: UI 왼쪽 상단 구석에 있는 뒤로 버튼을 클릭하여 보고서 디자인으로 돌아갑니다.

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

3. 컨테이너 추가: 컨테이너 보고서 항목을 도구 상자에서 요약 표 아래의 섹션 영역으로 끌어 놓습니다.

4. 컨테이너 구성: 속성 검사자를 사용하여 컨테이너에 대해 다음 속성을 설정합니다.

   Property	Value
   Name	DetailsTableContainer
   Border Width	0.25pt
   Border Style	Solid
   Border Color	Gainsboro
   Left	0.5in
   Top	5.5in
   Width	9in
   Height	4in
   Can Grow	False
   Overflow	Auto

5. 표 추가: 도구 상자로부터 표 보고서 항목을 새로 추가된 컨테이너의 왼쪽 상단 구석으로 끌어 놓습니다. 표에서 다음 속성을 설정합니다.

   Property	Value
   Name	SummaryTable
   Left	0in
   Top	0in
   Data Set Name	Sales
   Frozen Rows	1

6. 표 필터 구성: 표 속성에서 필터 속성을 찾고 추가 버튼을 클릭합니다. 필터 편집기에서 추가... 버튼을 클릭하고 SalesYear 필드를 선택한 다음 = 연산자 오른쪽의 드롭다운 목록에서 연도 매개 변수를 선택합니다. 요약 표 및 차트에 추가된 것과 동일한 필터입니다.

7. 표 열 구성: 표 세 번째 열의 열 처리기를 우클릭하고 드롭다운 메뉴에서 열->삽입->더 보기... 명령을 선택합니다. 열 삽입 대화창에서 개수를 3으로 설정하고 위치를 오른쪽으로 설정한 다음 삽입 버튼을 클릭합니다. 열 처리기를 클릭하고 너비 속성을 속성 검사자에서 수정하여 다음 열 너비를 설정합니다.

   Column	Width
   1st	1in
   2nd	1.5in
   3rd	1.75in
   4th – 6th	1.5in

8. 표 셀 구성: 표의 각 셀은 표 셀을 클릭하여 선택할 수 있는 텍스트 상자 보고서 항목을 포함합니다. 아래 표를 사용하여 이 텍스트 상자의 속성을 설정합니다.

   Row	Column	Property	Value
   1st	1st	Name	DateHeader
   		Value	Date
   2nd	1st	Name	DateValue
   		Value	{DateKey}
   		Text Align	Left
   1st	2nd	Name	SalesChannelHeader
   		Value	Sales Channel
   2nd	2nd	Name	SalesChannelValue
   		Value	{SalesChannel}
   1st	3rd	Name	ProductCategoryHeader
   		Value	Product Category
   2nd	3rd	Name	ProductCategoryValue
   		Value	{ProductCategory}
   1st	4th	Name	DiscountTypeHeader
   		Value	Discount Type
   2nd	4th	Name	DiscountTypeValue
   		Value	{Lookup(PromotionKey, PromotionKey, PromotionType, "Promotions")}
   1st	5th	Name	SalesQuantityHeader
   		Value	Sales Quantity
   		Text Align	Right
   2nd	5th	Name	SalesQuantityValue
   		Value	{SalesQuantity}
   1st	6th	Name	SalesAmountHeader
   		Value	Sales Amount
   		Text Align	Right
   2nd	6th	Name	SalesAmountValue
   		Value	{SalesAmount}
   		Format	c2

9. 표 행 구성: 첫 번째 행의 처리기를 클릭하고 속성 검사자의 TextBox 탭으로 전환합니다. 이렇게 하면 선택된 행에 있는 모든 텍스트 상자의 속성을 동시에 설정할 수 있습니다.

   Property	Value
   Background Color	White
   Border Width	0.5pt
   Bottom Border Style	Solid
   Border Color	Black

이러한 단계를 성공적으로 완료하면 보고서 디자인이 다음과 같이 나타나게 됩니다.

이제 보고서를 미리 보고, 서로 다른 연도를 토글하고, 요약 표, 차트, 세부 정보 표의 판매 통계를 자세히 살펴볼 수 있습니다. 이러한 요소는 선택된 연도에 해당하는 데이터를 반영하도록 동적으로 업데이트됩니다.