DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
새 보고서를 만드는 과정을 살펴보려면 확장DOC-SUMMARY-TAG-CLOSE
DOC-DETAILS-TAG-CLOSE
### 데이터 바인딩 [데이터 바인딩](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/v4.1/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 데이터 소스의 [DimPromotions](https://demodata.grapecity.com/contoso/odata/v1/DimPromotions) 끝점 데이터에 액세스해야 합니다. 다음 단계에 따라 ```Promotions``` 데이터 집합을 추가하십시오. * 데이터 패널에서 ```Contoso``` 근처에 있는 ```+``` 아이콘을 클릭합니다. * 데이터 집합 편집기 대화 상자의 이름 필드에는 ```Promotions```를, Uri/경로 필드에는 ```/DimPromotions```를, ```Json 경로``` 필드에는 ```$.value.*```를 입력합니다. * 기본적으로 각 ```Promotion``` 레코드에는 14개의 필드가 포함되어 있지만 모두 필요하지는 않습니다. 따라서 쿼리 매개 변수를 통해 OData [$select 쿼리 옵션](https://www.odata.org/getting-started/basic-tutorial/#select)을 적용하여 검색되는 필드를 제한합니다. * ```매개 변수``` 섹션 오른쪽에 있는 ```+``` 아이콘을 클릭합니다. * 새로 추가한 ```매개 변수``` 항목의 ```매개 변수``` 필드에 ```$select```를 입력합니다. * 동일한 ```매개 변수``` 항목의 ```값``` 필드에 ```PromotionKey, PromotionName, DiscountPercent, StartDate, EndDate```를 입력합니다. * ```유효성 검사``` 버튼을 클릭합니다. * ```데이터베이스 필드``` 섹션에 ```[5개 항목]```이라는 텍스트가 표시되는지 확인합니다. * ```데이터베이스 필드``` 섹션을 확장하고 ```StartDate``` 및 ```EndDate``` 필드의 ```DataField``` 속성을 ```StartDate[Date]```와 ```EndDate[Date]```로 각각 설정합니다. * ```변경 사항 저장``` 버튼을 클릭합니다.DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
Promotions 데이터 집합을 추가하는 과정을 살펴보려면 확장DOC-SUMMARY-TAG-CLOSE
DOC-DETAILS-TAG-CLOSE
### 목록 추가 프로모션 쿠폰을 표시하기 위해 [목록](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Items/Data-Regions/List) 데이터 영역을 사용합니다. * 도구 모음 왼쪽에 있는 ```햄버거``` 메뉴를 사용하여 [도구 상자](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Designer-Interface#toolbox)를 확장합니다. * ```목록``` 항목을 도구 상자에서 보고서 페이지 영역의 왼쪽 위로 끌어 놓습니다. * 속성 검사자의 [속성 패널](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel)로 전환합니다. * ```데이터 집합 이름``` 드롭다운에서 ```Promotions``` 항목을 선택합니다. * ```너비``` 속성을 ```7.5in```로 설정합니다. 이렇게 하면 목록이 보고서 [페이지 크기 및 여백](/activereportsjs/docs/v4.1/ReportAuthorGuide/보고서-구성/layout-properties#page-settings)에서 정의된 사용 가능한 인쇄 가능 영역을 차지합니다. * ```높이``` 속성을 ```5in```로 설정합니다. * [필터 편집기](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Designer-Interface#filters-editor)에서 ```+추가...``` 링크를 클릭합니다. * ```+추가...``` 버튼을 클릭하고 팝업 메뉴에서 ```DiscountPercent```를 선택합니다. * 필터 연산자로 ```보다 큼```을 선택합니다. * ```>``` 부호 오른쪽에 있는 텍스트 영역을 클릭하고 ```0```을 입력합니다.DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
목록을 추가하는 과정을 살펴보려면 확장DOC-SUMMARY-TAG-CLOSE
DOC-DETAILS-TAG-CLOSE
### 목록 그룹화 설정 각 프로모션 쿠폰을 새 페이지에 표시하기 위해 [목록 그룹화](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Items/Data-Regions/List#list-grouping)를 구성합니다. * ```뒤로``` 버튼을 클릭하여 필터 편집기를 종료합니다. * 속성 검사자의 ```그룹``` 섹션에서 ```그룹 식``` 속성 오른쪽에 있는 ```+``` 아이콘을 클릭합니다. * 새로 추가한 항목 오른쪽에 있는 회색 상자를 클릭하고 ```PromotionKey``` 필드를 선택합니다. * ``페이지 나누기``` 속성을 ```해당 범위```로 설정합니다. ### 서식 있는 텍스트 추가 [서식 있는 텍스트](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Items/Data-Visualizers/RichText) 보고서 항목을 사용하여 프로모션 쿠폰 세부 정보를 표시합니다. * 도구 모음 왼쪽에 있는 ```햄버거``` 메뉴를 사용하여 도구 상자를 확장합니다. * [서식 있는 텍스트](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Items/Data-Visualizers/RichText) 항목을 도구 상자에서 이전에 추가한 목록 보고서의 왼쪽 위로 끌어 놓습니다. * 속성 패널에서 새로 추가한 서식 있는 텍스트의 다음 속성을 설정합니다. | 속성 | 값 | |--------------|-------------------| | 위쪽 | 0in | | 왼쪽 | 0in | | 너비 | 7.5in | | 높이 | 5in | | 테두리 두께 | 5pt | | 테두리 스타일 | 점선 | | 테두리 색 | #bbb | | 안쪽 여백 | 16pt 2pt 16pt 2pt | ```값``` 속성 편집기 오른쪽에 있는 회색 상자를 클릭하고 ```식...``` 항목을 선택합니다. [식 대화 상자](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Designer-Interface#expression-editor)에서 다음 값을 설정하고 ```저장``` 버튼을 클릭합니다. ```html
*Valid from {Format(StartDate, "d")} to {Format(EndDate, "d")} in all of our stores. Cannot be combined with any other offers. No cash value. Northwind Traders can cancel promotion at any time.
``` 지원되는 HTML 태그와 CSS 스타일의 전체 목록은 [서식 있는 텍스트 설명서](/activereportsjs/docs/v4.1/ReportAuthorGuide/Report-Items/Data-Visualizers/RichText)를 참조하십시오. ### 보고서 출력 미리 보기 이제 보고서 출력을 [미리 보고](/activereportsjs/docs/v4.1/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App#preview-button) 프로모션 쿠폰 목록을 탐색할 수 있습니다. 출력을 인쇄하거나 PDF 문서로 내보낼 수 있습니다. 목록 그룹화의 페이지 나누기 옵션을 ```해당 범위```로 설정했기 때문에 각 쿠폰이 새 페이지에 표시됩니다. 보고서의 최종 버전은 [데모 웹 사이트](/activereportsjs/demos/Reports/GetStartedWithMailMergeReports/purejs)에서 확인할 수 있습니다.