DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 새 보고서 작성 보기DOC-SUMMARY-TAG-CLOSE
DOC-DETAILS-TAG-CLOSE
### 데이터 바인딩 [데이터 바인딩](/activereportsjs/docs/v2.2/ReportAuthorGuide/Databinding)은 보고서와 보고서에 표시되는 데이터 간 연결을 구축합니다. 이 자습서에서는 Contoso라는 가상의 회사에 대한 매출 데이터가 포함된 [GrapeCity 데모 OData API](https://demodata.grapecity.com/swagger/index.html?urls.primaryName=OData%20Contoso)를 사용합니다. 이 회사는 100,000개가 넘는 제품을 제조 및 판매하고 지원하는 조직입니다. ### 데이터 소스 추가 [Contoso OData API](https://demodata.grapecity.com/swagger/index.html?urls.primaryName=OData%20Contoso)는 루트 URL ```https://demodata.grapecity.com/contoso/odata/v1```을 사용하여 연결할 수 있고, [/DimCustomers](https://demodata.grapecity.com/contoso/odata/v1/DimCustomers), [/DimStores](https://demodata.grapecity.com/contoso/odata/v1/DimStores) 및 [/DimProducts](https://demodata.grapecity.com/contoso/odata/v1/DimProducts)와 같은 끝점으로 표시되는 여러 "표"가 있는 "데이터베이스"로 생각할 수 있습니다. 다음 단계에 따라 해당 "데이터베이스"에 대한 연결을 설정하는 보고서 데이터 소스를 만들 수 있습니다. * 속성 검사자의 [데이터 패널](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Designer-Interface#data-panel)을 열고 ```추가``` 버튼을 클릭합니다. * 데이터 소스 편집기 대화 상자의 이름 필드에 ```Contoso```를, 끝점 필드에 ```https://demodata.grapecity.com/contoso/odata/v1```을 입력합니다. * ```변경 사항 저장``` 버튼을 클릭합니다.DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 데이터 소스 추가 보기DOC-SUMMARY-TAG-CLOSE
DOC-DETAILS-TAG-CLOSE
### 데이터 집합 추가 데이터 집합은 데이터 소스 끝점을 한 개 이상 나타냅니다. 직원 명부 보고서의 경우 이전 섹션에서 추가한 Contoso 데이터 소스의 [/DimEmployees](https://demodata.grapecity.com/contoso/odata/v1/DimEmployees) 끝점에서 데이터에 액세스해야 합니다. 다음 단계에 따라 ```직원``` 데이터 집합을 추가하십시오. * 데이터 패널에서 ```Contoso``` 근처에 있는 ```+``` 아이콘을 클릭합니다. * 데이터 집합 편집기 대화 상자의 이름 필드에는 ```Employees```를, Uri/경로 필드에는 ```/DimEmployees```를, ```Json 경로``` 필드에는 ```$.value.*```를 입력합니다. * 기본적으로 각 ```직원``` 레코드에는 필드가 28개 있지만 해당 필드가 모두 필요하지는 않습니다. 따라서 쿼리 매개 변수를 통해 OData [$select 쿼리 옵션](https://www.odata.org/getting-started/basic-tutorial/#select)을 적용하여 검색되는 필드를 제한합니다. * ```매개 변수``` 섹션의 오른쪽에 있는 ```+``` 아이콘을 클릭합니다. * 새로 추가된 ```매개 변수``` 항목의 ```매개 변수``` 필드에 ```$select```를 입력합니다. * 동일한 ```매개 변수``` 항목의 ```값``` 필드에 ```FirstName, LastName, MiddleName, Title, EmailAddress, Phone, DepartmentName, AvatarUrl```을 입력합니다. * ```유효성 검사``` 버튼을 클릭합니다. * ```데이터베이스 필드``` 섹션에 위에서 입력한 ```[8개 항목]```에 해당하는 텍스트가 표시되는지 확인합니다. * ```변경 사항 저장``` 버튼을 클릭합니다.DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 직원 데이터 집합 추가 보기DOC-SUMMARY-TAG-CLOSE
DOC-DETAILS-TAG-CLOSE
### 밴드 목록 추가 직원 명부를 표시하기 위해 [밴드 목록](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Regions/BandedList)을 사용합니다. * 도구 모음 왼쪽에 있는 ```햄버거``` 메뉴를 사용하여 [도구 상자](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Designer-Interface#toolbox)를 확장합니다. * ```밴드 목록``` 항목을 도구 상자에서 보고서 페이지 영역의 왼쪽 위로 끌어 놓습니다. * 속성 검사자에서 [속성 패널](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Designer-Interface#properties-panel)로 전환합니다. * ```데이터 집합 이름``` 드롭다운에서 ```직원``` 항목을 선택하고 ```너비``` 속성을 ```7.5in```로 설정합니다. 따라서 밴드 목록이 보고서 [페이지 크기 및 여백](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Layouts/layout-properties#page-settings)으로 정의된 사용 가능한 인쇄 가능 영역을 차지합니다.DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 밴드 목록 추가 보기DOC-SUMMARY-TAG-CLOSE
DOC-DETAILS-TAG-CLOSE
### 헤더 섹션 구성 기본적으로 새로 추가된 밴드 목록에는 목록 시작 부분 또는 각 페이지의 시작 부분에 한 번 표시되는 [헤더 섹션](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Regions/BandedList#header), 각 데이터 레코드마다 한 번 나타나는 [세부 정보 섹션](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Regions/BandedList#details)과 모든 섹션의 렌더링이 완료된 후 또는 각 페이지에 한 번 나타나는 [푸터 섹션](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Regions/BandedList#footer)이 있습니다. 헤더 섹션을 사용하여 보고서 제목을 표시합니다. * 밴드 목록에서 아무 곳이나 클릭하여 [밴드 처리기](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Regions/BandedList#banded-list-designer)를 표시합니다. * 첫 번째 섹션의 처리기를 클릭하여 [속성 패널](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Designer-Interface#properties-panel)에서 높이를 ```0.75in```로 설정합니다. * ```새 페이지에서 반복``` 스위치를 끕니다. * 도구 모음 왼쪽에 있는 ```햄버거``` 메뉴를 사용하여 도구 상자를 확장합니다. * [텍스트 상자](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) 항목을 도구 상자에서 헤더 섹션의 왼쪽 위로 끌어 놓습니다. * 속성 패널에서 새로 추가된 텍스트 상자에 대해 다음 속성을 설정합니다. | 속성 | 값 | |----------------------------|---------------------------------------| | 값 | 직원 명부 | | 글꼴 크기 | 26pt | | 세로 맞춤 | 가운데 | | 왼쪽 | 0in | | 위쪽 | 0in | | 너비 | 7.5in | | 높이 | 0.75in |DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 헤더 섹션 구성 및 텍스트 상자 값 설정 보기DOC-SUMMARY-TAG-CLOSE
DOC-DETAILS-TAG-CLOSE
### 데이터 그룹화 추가 ```Contoso``` 데이터베이스의 직원은 ```생산```, ```마케팅``` 등 다양한 부서에 속해 있습니다. 따라서 직원 명부를 부서 이름으로 그룹화할 수 있습니다. * 속성 검사자에서 [데이터 패널](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Designer-Interface#data-panel)로 전환합니다. * 펼침 아이콘을 사용하여 "직원" 데이터 집합을 확장합니다. * 밴드 목록에서 아무 곳이나 클릭하여 [그룹 편집기](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Regions/BandedList#banded-list-designer)를 표시합니다. * ```부서 이름``` 필드를 그룹 편집기의 강조 표시된 ```<새 그룹>``` 영역으로 끌어 놓습니다. * 그룹 편집기에서 새로 나타난 ```BandedList1_DepartmentName1``` 항목을 선택합니다. * 속성 검사자에서 속성 패널로 전환합니다. * 새로 추가한 그룹 이름을 ```DepartmentName```으로 설정합니다. * 각 그룹 인스턴스가 새 페이지에서 시작하도록 그룹의 ```페이지 나누기``` 속성을 ```해당 범위```로 설정합니다.DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 데이터 그룹화 추가 보기DOC-SUMMARY-TAG-CLOSE
DOC-DETAILS-TAG-CLOSE
### 그룹 헤더 섹션 구성 [그룹 헤더](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Regions/BandedList#group-header)는 그룹화 값당 한 번 표시되므로 다른 부서 이름에 대해 한 번 표시됩니다. 이에 따라 그룹 헤더를 다음과 같이 구성합니다. * 밴드 목록에서 아무 곳이나 클릭하여 밴드 처리기를 표시합니다. * 두 번째 섹션의 처리기를 클릭하여 속성 패널에서 높이를 ```0.6in```로 설정합니다. * 도구 모음 왼쪽에 있는 ```햄버거``` 메뉴를 사용하여 도구 상자를 확장합니다. * [텍스트 상자](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) 항목을 도구 상자에서 그룹 헤더 섹션의 왼쪽 위로 끌어 놓습니다. * 속성 패널에서 새로 추가된 텍스트 상자에 대해 다음 속성을 설정합니다. | 속성 | 값 | |----------------------------|---------------------------------------| | 값 | {DepartmentName} | | 텍스트 색 | \#0096aa | | 글꼴 크기 | 20pt | | 글꼴 두께 | 굵게 | | 세로 맞춤 | 가운데 | | 왼쪽 | 0in | | 위쪽 | 0in | | 너비 | 7.5in | | 높이 | 0.6in | ```새 페이지에서 반복``` 속성이 기본적으로 ```True```이기 때문에 그룹 헤더는 각 페이지 위에 표시됩니다. ### 세부 정보 섹션 구성 [세부 정보 섹션](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Regions/BandedList#details)은 데이터 레코드당 한 번 표시됩니다. [컨테이너](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Supplemental-Report-Items/Container) 보고서 항목을 사용하여 각 세부 정보 섹션 항목에 대해 배경 및 테두리를 설정합니다. * 밴드 목록에서 아무 곳이나 클릭하여 밴드 처리기를 표시합니다. * 세 번째 섹션의 처리기를 클릭하여 속성 패널에서 높이를 ```2in```로 설정합니다. * 도구 모음 왼쪽에 있는 ```햄버거``` 메뉴를 사용하여 도구 상자를 확장합니다. * 컨테이너 항목을 도구 상자에서 세부 정보 섹션의 왼쪽 위로 끌어 놓습니다. * 속성 패널에서 새로 추가된 컨테이너에 대해 다음 속성을 설정합니다. | 속성 | 값 | |----------------------------|---------------------------------------| | 배경색 | \#f9f9f9 | | 테두리 스타일 | 단색 | | 테두리 색 | \#e8e8e8 | | 테두리 둥글림 반경 | 4pt | | 왼쪽 | 0in | | 위쪽 | 0in | | 너비 | 7.5in | | 높이 | 1.75in | 다음으로, 텍스트 상자 4개를 도구 상자에서 새로 추가된 컨테이너로 끌어 놓고 다음 맵에 따라 속성을 설정합니다. | 속성 | 전체 이름 텍스트 상자 | 제목 텍스트 상자 | 이메일 텍스트 상자 | 전화 텍스트 상자 | |----------------|-------------------------------------|--------------------|--------------------|--------------------| | 값 | {FirstName} {MiddleName} {LastName} | {Title} | {EmailAddress} | {Phone} | | 글꼴 크기 | 14pt | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | | 세로 맞춤 | 가운데 | 가운데 | 가운데 | 가운데 | | 텍스트 색 | *기본값으로 두기* | \#5e5e5e | \#5e5e5e | \#5e5e5e | | 왼쪽 | 0.3in | 0.3in | 0.3in | 0.3in | | 위쪽 | 0.3in | 0.85 | 1.15 | 1.45 | | 너비 | 4in | 4in | 4in | 4in | | 높이 | 0.5in | 0.3in | 0.3in | 0.3in | 이제 보고서 출력을 [미리 보고](/activereportsjs/docs/v2.2/ReportAuthorGuide/Get-Started-With-Designer-App#preview-button) 부서 이름별로 그룹화된 직원 목록이 제대로 인쇄되는지 확인할 수 있습니다. ### 동적 이미지 사용 각 직원 레코드에는 ```AvatarUrl``` 필드가 있는데, 이 필드는 ```Null```이거나 직원 사진의 상대 URL을 포함하고 있습니다. [이미지 보고서 항목](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Visualizers/Image)을 사용하여 사진을 표시하거나 사진이 없는 경우에는 자리 표시자를 표시합니다. * 보고서 디자인으로 돌아갑니다. * ```햄버거``` 메뉴를 사용하여 도구 상자를 확장합니다. * 이미지 항목을 도구 상자에서 오른쪽 가장자리에 가깝게 세부 정보 섹션으로 끌어 놓습니다. * 속성 패널에서 오른쪽에 있는 아이콘을 사용하여 ```이미지``` 편집기를 확장합니다. * ```값``` 속성을 ```{IIF(AvatarUrl Is Null, "https://demodata.grapecity.com/images/contoso/EmployeePhotos/no-photo.jpg", "https://demodata.grapecity.com" + AvatarUrl)}```로 설정합니다. 이 [식](/activereportsjs/docs/v2.2/ReportAuthorGuide/Expressions)은 [IIF](/activereportsjs/docs/v2.2/ReportAuthorGuide/Expressions/Functions/program-flow#iif) 함수를 사용하여 표시할 사진을 동적으로 식별합니다. ```AvatarUrl```이 ```Null```이면 직원에게 사진이 없다는 의미로, ```IIF``` 함수가 자리 표시자의 URL을 반환합니다. 그러지 않으면 사진의 전체 URL을 반환합니다. * 다음 표에 따라 다음 이미지 속성을 설정합니다. | 속성 | 값 | |----------------------------|---------------------------------------| | MIME 형식 | image/jpeg | | 이미지 크기 조정 | 비례하여 맞추기 | | 가로 정렬 | 가운데 | | 세로 정렬 | 가운데 | | 왼쪽 | 5.65in | | 위쪽 | 0.15in | | 너비 | 1.45in | | 높이 | 1.45in | 보고서 출력을 미리 보고 각 직원 레코드에 이제 사진 또는 "이미지 없음" 자리 표시자가 표시되는 것을 확인할 수 있습니다. ### 보고서 맵 추가 보고서를 더 편하게 살펴볼 수 있도록 부서 목록을 표시하여 사용자가 한 부서에서 다른 부서로 빠르게 이동할 수 있도록 [보고서 맵](/activereportsjs/docs/v2.2/ReportAuthorGuide/Interactivity#report-map)을 추가합니다. * 보고서 디자인으로 돌아갑니다. * 밴드 목록에서 아무 곳이나 클릭하여 그룹 편집기를 표시합니다. * 그룹 편집기에서 ```DepartmentName``` 항목을 선택합니다. * 속성 패널에서 ```레이블``` 속성을 ```{DepartmentName}```으로 설정합니다. 보고서를 미리 보고 [보고서 맵](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Viewer-Interface#report-map) 패널을 열어 고정합니다. 이 패널에는 직원 명부의 모든 부서가 표시되어 한 부서에서 다른 부서로 전환하면서 선택한 부서의 직원 목록을 확인할 수 있습니다.DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 보고서 맵 사용 보기DOC-SUMMARY-TAG-CLOSE
DOC-DETAILS-TAG-CLOSE
최종 보고서 버전은 [데모 웹 사이트](/activereportsjs/demos/Reports/GetStartedWithBandedReports/purejs)에서 확인할 수 있습니다.