# 고정 레이아웃 보고서 시작하기 ## Content ### 소개 고정 레이아웃 보고서는 매우 정확하게 보고서 항목의 위치 및 치수를 제어할 수 있는 ActiveReportsJS의 고유한 기능입니다. 고정 레이아웃을 사용하여 미리 인쇄된 양식을 복제하여 데이터에 바인딩할 수 있습니다. 해당 보고서의 출력은 브라우저에서 보고 지원되는 형식 중 하나로 인쇄 또는 내보낼 수 있으며 이해관계자와 내보내기 출력을 공유할 수 있는 완성된 형태입니다. 고정 레이아웃 보고서의 예에는 구매 주문서, 견적서, 주차 티켓 등이 있습니다. 이 자습서에서는 데이터 바인딩 송장 양식을 처음부터 만들어 보면서 일반적인 보고서 디자인 과정을 경험해 볼 것입니다. 학습을 마치면 다음을 수행할 수 있습니다. * [고정 레이아웃 보고서](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Layouts#fixed-page-layout) 작성 * 여러 끝점을 사용하여 보고서를 OData API에 바인딩 * OData [$select](https://www.odata.org/getting-started/basic-tutorial/#select) 및 [$filter](https://www.odata.org/getting-started/basic-tutorial/#filter) 쿼리 옵션을 사용하여 검색된 데이터의 볼륨 줄이기 * 보고서 구독자와의 상호 작용을 위한 ```계단식 보고서 매개 변수``` 만들기 * OData [$expand](https://www.odata.org/getting-started/basic-tutorial/#expand) 쿼리 옵션을 사용하여 [중첩된 데이터 집합](/activereportsjs/docs/v2.1/ReportAuthorGuide/Databinding#nested-data-set) 만들기 * 고정된 레이아웃의 [데이터 바인딩](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Layouts#fixed-layout-data-binding) 구성 * [이미지](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Visualizers/Image) 보고서 항목을 사용하여 [포함된 이미지](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Layouts/layout-properties#embedded-images) 표시 * [텍스트 상자](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) 보고서 항목을 사용하여 텍스트 정보 표시 * 미리 인쇄한 양식 레이아웃에 따라 데이터를 표시하도록 고정 레이아웃 보고서 구성 * [표 푸터](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-footer)에 요약 필드 표시 모든 자습서 단계를 완료하면 최종 보고서는 [라이브 데모](/activereportsjs/demos/Reports/GetStartedWithFixedReports/purejs)와 같이 표시됩니다. ### 필수 구성 요소 아래 내용에서는 독립 실행형 보고서 디자이너가 실행 중이라고 가정합니다. 자세한 내용은 [자습서](/activereportsjs/docs/v2.1/ReportAuthorGuide/Get-Started-With-Designer-App)를 참조하십시오. 또한 [데모 데이터 허브](https://demodata.grapecity.com)에 액세스하려면 안정적인 인터넷 연결이 필요합니다. ### 새 보고서 작성 독립 실행형 보고서 디자이너에서 [파일 메뉴](/activereportsjs/docs/v2.1/ReportAuthorGuide/Get-Started-With-Designer-App#file-menu)를 클릭하고 새로 작성한 보고서를 위한 [고정 페이지 레이아웃](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Layouts#fixed-page-layout) 템플릿을 선택합니다. 보고서 레이아웃에서 회색 영역 중 아무 곳이나 클릭하면 [속성 패널](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel)에서 보고서 속성이 로드됩니다. ```여백``` 섹션에서 ```스타일``` 속성을 ```좁게```로 설정하여 [보고서 페이지](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Layouts/layout-properties#page-settings) 여백 크기를 변경합니다.

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

확장하여 실행 중인 새 보고서 작성 보기

DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/GetStartedWithFixedReports/AddingNewReport.gif)

DOC-DETAILS-TAG-CLOSE

### 데이터 바인딩 [데이터 바인딩](DataBinding)은 보고서와 보고서에 표시되는 데이터 간 연결을 구축합니다. 이 자습서에서는 잘 알려진 Northwind 데이터베이스를 복제하는 [GrapeCity 데모 OData API](https://demodata.grapecity.com/swagger/index.html?urls.primaryName=OData%20NorthWind)를 사용합니다. 이 데이터베이스에는 전 세계 특산품을 수입 및 수출하는 Northwind Traders라는 가상의 회사에 대한 판매 데이터가 들어 있습니다. ### 데이터 소스 추가 [Northwind OData API](https://demodata.grapecity.com/swagger/index.html?urls.primaryName=OData%20NorthWind)는 루트 URL ```https://demodata.grapecity.com/northwind/odata/v1```을 사용하여 연결할 수 있고, [/Products](https://demodata.grapecity.com/northwind/odata/v1/Products), [/Customers](https://demodata.grapecity.com/northwind/odata/v1/Customers) 및 [/Orders](https://demodata.grapecity.com/northwind/odata/v1/Orders)와 같은 끝점으로 표시되는 여러 "표"가 있는 "데이터베이스"로 생각할 수 있습니다. 다음 단계에 따라 해당 "데이터베이스"에 대한 연결을 설정하는 보고서 데이터 소스를 만들 수 있습니다. * 속성 검사자의 [데이터 패널](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Designer-Interface#data-panel)을 열고 ```추가``` 버튼을 클릭합니다. * 데이터 소스 편집기 대화 상자의 이름 필드에 ```Northwind```를, 끝점 필드에 ```https://demodata.grapecity.com/northwind/odata/v1```을 입력합니다. * ```변경 사항 저장``` 버튼을 클릭합니다.

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

확장하여 실행 중인 데이터 소스 추가 보기

DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/GetStartedWithFixedReports/AddingDataSource.gif)

DOC-DETAILS-TAG-CLOSE

### 보충 데이터 집합 추가 데이터 집합은 데이터 소스 끝점을 한 개 이상 나타냅니다. 송장 양식 보고서의 경우 이전 섹션에서 추가한 ```Northwind``` 데이터 소스의 [/Orders](https://demodata.grapecity.com/northwind/odata/v1/Orders), [/Customers](https://demodata.grapecity.com/northwind/odata/v1/Customers) 및 [/Products](https://demodata.grapecity.com/northwind/odata/v1/Products) 끝점에서 데이터에 액세스해야 합니다. 먼저, ```계단식 매개 변수``` 사용자 상호 작용을 빌드하고 여러 데이터 집합 간의 관계를 확인하는 데 사용할 보충 데이터 집합을 추가합니다. 다음 단계에 따라 ```고객``` 데이터 집합을 추가하십시오. * 데이터 패널에서 ```Northwind``` 근처에 있는 ```+``` 아이콘을 클릭합니다. * 데이터 집합 편집기 대화 상자의 이름 필드에는 ```Customers```를, Uri/경로 필드에는 ```/Customers```를, ```Json 경로``` 필드에는 ```$.value.*```를 입력합니다. * 기본적으로 각 ```고객``` 레코드에는 필드가 11개 있지만 해당 필드가 모두 필요하지는 않습니다. 따라서 ```쿼리 매개 변수```를 통해 OData [$select 쿼리 옵션](https://www.odata.org/getting-started/basic-tutorial/#select)을 적용하여 검색되는 필드를 제한합니다. * ```매개 변수``` 섹션의 오른쪽에 있는 ```+``` 아이콘을 클릭합니다. * 새로 추가된 ```매개 변수``` 항목의 ```매개 변수``` 필드에 ```$select```를 입력합니다. * 동일한 ```매개 변수``` 항목의 ```값``` 필드에 ```CustomerId, CompanyName, Address, City, PostalCode, Country```를 입력합니다. * ```유효성 검사``` 버튼을 클릭합니다. * ```데이터베이스 필드``` 섹션에 위에서 입력한 ```[6개 항목]```에 해당하는 텍스트가 표시되는지 확인합니다. * ```변경 사항 저장``` 버튼을 클릭합니다.

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

확장하여 실행 중인 데이터 집합 추가 보기

DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/GetStartedWithFixedReports/AddingDataSet.gif)

DOC-DETAILS-TAG-CLOSE

다음으로, 동일한 방법을 사용하여 ```Products``` 데이터 집합을 추가합니다. * 데이터 패널에서 ```Northwind``` 근처에 있는 ```+``` 아이콘을 클릭합니다. * 데이터 집합 편집기 대화 상자의 이름 필드에는 ```Products```를, Uri/경로 필드에는 ```/Products```를, ```Json 경로``` 필드에는 ```$.value.*```를 입력합니다. * 기본적으로 각 ```제품``` 레코드에는 필드가 10개 있지만 해당 필드가 모두 필요하지는 않습니다. 따라서 ```쿼리 매개 변수```를 통해 OData [$select 쿼리 옵션](https://www.odata.org/getting-started/basic-tutorial/#select)을 적용하여 검색되는 필드를 제한합니다. * ```매개 변수``` 섹션의 오른쪽에 있는 ```+``` 아이콘을 클릭합니다. * 새로 추가된 ```매개 변수``` 항목의 ```매개 변수``` 필드에 ```$select```를 입력합니다. * 동일한 ```매개 변수``` 항목의 ```값``` 필드에 ```ProductId, ProductName```을 입력합니다. * ```유효성 검사``` 버튼을 클릭합니다. * ```데이터베이스 필드``` 섹션에 위에서 입력한 ```[2개 항목]```에 해당하는 텍스트가 표시되는지 확인합니다. * ```변경 사항 저장``` 버튼을 클릭합니다. ### 보고서 매개 변수 추가 작성 중인 송장 양식에서는 보고서 구독자에게 고객과 주문을 선택하도록 요청하고 선택 항목에 대한 송장을 표시해야 합니다. 이렇게 사용자가 입력하도록 하기 위한 기본적인 방법이 [보고서 매개 변수](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Parameters)를 사용하는 것입니다. 다음 단계에 따라 ```고객``` 보고서 매개 변수를 만드십시오. * 데이터 패널의 ```매개 변수``` 섹션에서 ```추가``` 버튼을 클릭합니다. * ```이름``` 필드에 ```Customer```를 입력하고 ```프롬프트``` 필드에서 ```Select Customer```를 입력합니다. * ```사용 가능한 값``` 섹션에서 ```데이터 집합 이름```으로 ```Customers```, ```값 필드```로 ```CustomerId```, ```레이블 필드```로 ```CompanyName```을 선택합니다.

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

확장하여 실행 중인 보고서 매개 변수 추가 보기

DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/GetStartedWithFixedReports/AddingReportParameter.gif)

DOC-DETAILS-TAG-CLOSE

### 계단식 매개 변수 구성 여기서 사용한 ```고객``` 매개 변수는 ```Customers``` 데이터 집합에서 사용 가능한 값 목록을 가져옵니다. 마찬가지로, 여기서 사용할 ```주문``` 매개 변수는 선택한 고객에 대한 주문만 포함하도록 필터링되는 ```OrderIds``` 데이터 집합에서 사용 가능한 값 목록을 가져와야 합니다. * 데이터 패널에서 ```Northwind``` 근처에 있는 ```+``` 아이콘을 클릭합니다. * 데이터 집합 편집기 대화 상자의 이름 필드에는 ```OrderIds```를, Uri/경로 필드에는 ```/Orders```를, ```Json 경로``` 필드에는 ```$.value.*```를 입력합니다. * 기본적으로 각 ```주문``` 레코드에는 필드가 15개 있지만 해당 필드가 모두 필요하지는 않습니다. 따라서 쿼리 매개 변수를 통해 OData [$select 쿼리 옵션](https://www.odata.org/getting-started/basic-tutorial/#select)을 적용하여 검색되는 필드를 제한합니다. * ```매개 변수``` 섹션의 오른쪽에 있는 ```+``` 아이콘을 클릭합니다. * 새로 추가된 ```매개 변수``` 항목의 ```매개 변수``` 필드에 ```$select```를 입력합니다. * 동일한 ```매개 변수``` 항목의 ```값``` 필드에 ```orderId```를 입력합니다. * 기본적으로, ```Orders``` 데이터 집합에는 모든 주문이 포함되어 있지만 선택한 고객에 따라 필터를 적용해야 합니다. 따라서 쿼리 매개 변수를 통해 OData [$filter 쿼리 옵션](https://www.odata.org/getting-started/basic-tutorial/#filter)을 사용하여 검색된 데이터를 필터링합니다. 필터 값은 이전 단계에서 추가한 보고서 매개 변수에 바인딩됩니다. * ```매개 변수``` 섹션의 오른쪽에 있는 ```+``` 아이콘을 클릭합니다. * 새로 추가된 ```매개 변수``` 항목의 ```매개 변수``` 필드에 ```$filter```를 입력합니다 * 동일한 ```매개 변수``` 항목의 ```값``` 필드에 ```CustomerId+eq+'{@Customer}'```라고 입력합니다. * ```유효성 검사``` 버튼을 클릭합니다. * 나타나는 매개 변수 프롬프트에서 ```@Customer``` 필드에는 ```ALFKI```를 입력하고 ```저장 후 실행``` 버튼을 클릭합니다. * ```데이터베이스 필드``` 섹션에 위에서 입력한 ```[1개 항목]```에 해당하는 텍스트가 표시되는지 확인합니다. * ```변경 사항 저장``` 버튼을 클릭합니다. 다음으로, ```주문``` 매개 변수를 추가합니다. * 데이터 패널의 ```매개 변수``` 섹션에서 ```추가``` 버튼을 클릭합니다. * ```이름``` 필드에 ```Order```를 입력하고 ```프롬프트``` 필드에서 ```Select Order```라고 입력합니다. * ```데이터 유형``` 드롭다운에서 ```정수```를 선택합니다. * ```사용 가능한 값``` 섹션에서 ```데이터 집합 이름```으로 ```OrderIds```, ```값 필드```로 ```OrderId```, ```레이블 필드```로 ```OrderId```를 선택합니다. 보고서 출력을 [미리 보고](/activereportsjs/docs/v2.1/ReportAuthorGuide/Get-Started-With-Designer-App#preview-button) ```매개 변수 패널```이 나타나 미리 정의된 값 목록에서 고객을 선택하도록 묻는 메시지를 확인할 수 있습니다. 고객을 선택하면 주문 매개 변수 드롭다운의 사용 가능한 목록에 해당 고객의 주문이 표시됩니다. 이러한 흐름을 ```계단식 매개 변수```라고 합니다. 이러한 방식으로 여러 가지 종속 매개 변수를 만들 수 있습니다. ### 주 데이터 집합 추가 다음으로, 보고서에서 시각화할 실제 데이터가 포함된 ```Orders``` 데이터 집합을 추가합니다. * 보고서 디자인으로 돌아가 ```매개 변수 편집``` 헤더 근처에 있는 왼쪽 화살표를 클릭하여 매개 변수 편집기를 종료합니다. * 데이터 패널에서 ```Northwind``` 근처에 있는 ```+``` 아이콘을 클릭합니다. * 데이터 집합 편집기 대화 상자의 이름 필드에는 ```Orders```를, Uri/경로 필드에는 ```/Orders```를, Json 경로 필드에는 ```$.value.*```를 입력합니다. * 기본적으로 ```Orders``` 데이터 집합에는 모든 주문에 대한 데이터가 포함되어 있지만 이 보고서에는 선택한 주문 데이터만 표시되어야 합니다. 따라서 쿼리 매개 변수를 통해 OData [$filter 쿼리 옵션](https://www.odata.org/getting-started/basic-tutorial/#filter)을 사용하여 검색된 데이터를 필터링합니다. 필터 값은 이전 단계에서 추가한 ```주문``` 보고서 매개 변수에 바인딩됩니다. * ```매개 변수``` 섹션의 오른쪽에 있는 ```+``` 아이콘을 클릭합니다. * 새로 추가된 ```매개 변수``` 항목의 ```매개 변수``` 필드에 ```$filter```를 입력합니다 * 동일한 ```매개 변수``` 항목의 ```값``` 필드에 ```OrderId+eq+{@Order}```를 입력합니다. * 각 주문에는 [$expand](https://www.odata.org/getting-started/basic-tutorial/#expand) 쿼리 옵션을 사용하여 가져올 수 있는 여러 주문 세부 정보가 포함되어 있습니다. * ```매개 변수``` 섹션의 오른쪽에 있는 ```+``` 아이콘을 클릭합니다. * 새로 추가된 ```매개 변수``` 항목의 ```매개 변수``` 필드에 ```$expand```를 입력합니다 * 동일한 ```매개 변수``` 항목의 ```값``` 필드에 ```OrderDetails```를 입력합니다. * ```유효성 검사``` 버튼을 클릭합니다. * 나타나는 매개 변수 프롬프트에서 ```@Order``` 필드에 ```10248```을 입력하고 ```저장 후 실행``` 버튼을 클릭합니다. * ```데이터베이스 필드``` 섹션에 위에서 입력한 ```[15개 항목]```에 해당하는 텍스트가 표시되는지 확인합니다. * ```중첩된 데이터 집합```에 ```OrderDetails``` 항목이 표시됩니다. 이 항목을 클릭하여 중첩된 데이터 집합 구성을 검토할 수 있습니다. 여기에는 필드가 5개 있어야 합니다. * ```변경 사항 저장``` 버튼을 클릭합니다. ### 고정 레이아웃 데이터 바인딩 ```연속 레이아웃```과 ```고정 레이아웃``` 간의 주된 [차이점](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Layouts)이라면 전자는 [데이터 바인딩 영역](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions)을 기반으로 하고 후자는 루트 수준의 데이터에 바인딩되어 데이터 영역 레이아웃을 제어한다는 점입니다. 따라서 여기서는 고정 레이아웃을 위한 데이터 바인딩을 설정합니다. * 속성 검사자에서 속성 패널로 전환합니다. * 보고서 레이아웃 주위 회색 영역에서 아무 곳이나 클릭합니다. * ```데이터``` 섹션의 ```데이터 집합 이름``` 드롭다운에서 ```Orders``` 항목을 선택합니다. * ```그룹``` 섹션에서 오른쪽에 있는 ```목록``` 아이콘을 사용하여 ```그룹 식``` 편집기를 확장합니다. * ```항목 추가``` 버튼을 클릭합니다. * 새로 추가된 항목의 오른쪽에 있는 회색 상자를 클릭하고 드롭다운 메뉴에서 ```OrderId``` 요소를 선택합니다. ### 송장 헤더 표시 송장 헤더에는 회사 이름, 로고, 주문 날짜, 주문 ID, 제목이 포함되어 있어야 합니다. 먼저 텍스트 정보부터 추가합니다. * 도구 모음 왼쪽에 있는 ```햄버거``` 메뉴를 사용하여 도구 상자를 확장합니다. * [텍스트 상자](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) 항목을 도구 상자에서 보고서 페이지의 왼쪽 위로 끌어 놓습니다. * 속성 패널에서 새로 추가된 텍스트 상자에 대해 다음 속성을 설정합니다. 그러면 회사 이름이 표시됩니다. | 속성 | 값 | |----------------------------|---------------------------------------| | 값 | Northwind Traders | | 텍스트 색 | \#3da7a8 | | 글꼴 크기 | 22pt | | 글꼴 두께 | 굵게 | | 세로 맞춤 | 가운데 | | 왼쪽 | 0in | | 위쪽 | 0in | | 너비 | 5in | | 높이 | 0.5in | | 안쪽 여백 | 6pt 2pt 6pt 2pt |

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

확장하여 실행 중인 회사 이름 텍스트 상자 추가 및 각 속성 설정 보기

DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/GetStartedWithFixedReports/AddingHeaderText.gif)

DOC-DETAILS-TAG-CLOSE

같은 방식으로 다음 텍스트 상자를 추가합니다. | 속성 | 주문 날짜 텍스트 상자 | 주문 ID 텍스트 상자 | 제목 텍스트 상자 | |----------------|--------------------|----------------------|-----------------| | 값 | {OrderDate} | Order Id : {OrderId} | 송장 | | 텍스트 색 | \#3c3c3c | \#3c3c3c | \#3c3c3c | | 글꼴 크기 | *기본값으로 두기* | *기본값으로 두기* | 24pt | | 글꼴 두께 | 굵게 | 굵게 | 굵게 | | 세로 맞춤 | 가운데 | 가운데 | 가운데 | | 왼쪽 | 0in | 0in | 0in | | 위쪽 | 0.7in | 1in | 1.5in | | 너비 | 2in | 2in | 7.5in | | 높이 | 0.3in | 0.3in | 0.5in | | 안쪽 여백 | 6pt 2pt 6pt 2pt | 6pt 2pt 6pt 2pt | 6pt 2pt 6pt 2pt | 이제 보고서 출력을 미리 보고 고객, 고객의 주문을 선택한 다음 ```미리 보기``` 버튼을 클릭하여 페이지에 회사 이름 및 제목과 함께 선택한 주문 ID, 날짜가 표시되는지 확인할 수 있습니다. ### 이미지 포함 이제, 회사 로고를 추가해 보겠습니다. 먼저 보고서 정의에 [이미지를 포함](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Layouts/layout-properties#embedded-images)해야 합니다. 컴퓨터에서 선택한 폴더에 아래 이미지를 저장합니다(이미지를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 ```다른 이름으로 이미지 저장``` 항목 선택). ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/GetStartedWithFixedReports/Northwind-Logo.png) * 보고서 디자인으로 돌아가 보고서 레이아웃 주위 회색 영역에서 아무 곳이나 클릭합니다. * 속성 패널의 ```레이아웃``` 섹션에서 ```포함된 이미지``` 속성의 오른쪽에 있는 ```목록``` 아이콘을 클릭합니다. * ```파일 열기``` 대화 상자에서 다운로드한 이미지를 선택하고 ```열기``` 버튼을 클릭합니다.

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

확장하여 실행 중인 이미지 포함 보기

DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/GetStartedWithFixedReports/EmbeddingImage.gif)

DOC-DETAILS-TAG-CLOSE

### 이미지 표시 이제 포함된 이미지는 보고서의 일부로, 보고서 파일 내에 보관되어 있습니다. 이 이미지를 사용하여 회사 로고를 표시할 수 있습니다. * 도구 모음 왼쪽에 있는 ```햄버거``` 메뉴를 사용하여 도구 상자를 확장합니다. * [이미지](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Visualizers/Image) 항목을 도구 상자에서 보고서 페이지의 오른쪽 위로 끌어 놓습니다. * 속성 패널의 ```모양``` 섹션에서 오른쪽에 있는 아이콘을 사용하여 ```이미지 편집기```를 확장합니다. * ```소스``` 드롭다운에서 ```포함됨```을, ```값``` 드롭다운에서 ```Northwind-Logo```를, ```MIME 유형``` 드롭다운에서 ```image/png```를 선택합니다. * 새로 추가된 이미지에 대해 다음 표에서처럼 속성을 설정합니다. | 속성 | 값 | |----------------------------|---------------------------------------| | 이미지 크기 조정 | 비례하여 맞추기 | | 가로 맞춤 | 가운데 | | 세로 맞춤 | 가운데 | | 왼쪽 | 6in | | 위쪽 | 0in | | 너비 | 1.5in | | 높이 | 1.5in | ### 송장 주소 표시 송장에는 청구지 및 배송지 주소가 표시되어야 합니다. 여기서는 텍스트 상자를 여러 개 추가하여 해당 정보를 표시합니다. 먼저 고객의 회사 이름부터 시작해 보겠습니다. ```Orders``` 데이터 집합에 ```CustomerId``` 필드는 있지만 ```CompanyName``` 필드는 없습니다. [Lookup](/activereportsjs/docs/v2.1/ReportAuthorGuide/Expressions/Functions/miscellaneous#lookup) 함수를 사용하여 고객 ID로 회사 이름을 확인합니다. * 도구 모음 왼쪽에 있는 ```햄버거``` 메뉴를 사용하여 도구 상자를 확장합니다. * [텍스트 상자](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) 항목을 도구 상자에서 보고서 페이지의 왼쪽 위로 끌어 놓습니다. * 속성 패널에서 새로 추가된 텍스트 상자에 대해 다음 속성을 설정합니다. | 속성 | 값 | |----------------------------|---------------------------------------| | 값 | {Lookup(CustomerId, CustomerID, CompanyName, "Customers")} | | 텍스트 색 | \#3c3c3c | | 세로 맞춤 | 가운데 | | 왼쪽 | 0in | | 위쪽 | 2.6in | | 너비 | 3.4in | | 높이 | 0.3in | | 안쪽 여백 | 6pt 2pt 6pt 2pt | ```Lookup``` 함수는 현재 범위에서 첫 번째 인수의 값(주문의 ```CustomerId```)을 가져와 ```Customers``` 데이터 집합에서 ```CustomerId``` 값이 같은 행을 찾아 해당하는 ```CompanyName``` 값을 반환합니다. 이제 보고서 출력을 미리 보고 고객과 주문을 선택한 다음 ```미리 보기``` 버튼을 클릭하여 페이지에 선택한 회사 이름이 표시되는지 확인할 수 있습니다. 보고서 디자인으로 돌아가 ```청구지``` 주소를 위한 나머지 텍스트 상자를 추가하고 다음 표에서처럼 속성을 설정합니다. 참고: 아래쪽 테두리 스타일을 설정하려면 오른쪽에 있는 아이콘을 사용하여 ```테두리 스타일``` 편집기를 확장하고 아래쪽 화살표 아이콘이 표시된 값을 설정하십시오. | 속성 | 헤더 텍스트 상자 | 주소 텍스트 상자 | 구/군/시 및 우편 번호 텍스트 상자 | 국가 텍스트 상자 | |---------------------|-----------------|--------------------------------------------------------|---------------------------------------------------------------------------------------------------------------|--------------------------------------------------------| | 값 | 청구지 | {Lookup(CustomerId, CustomerID, Address, "Customers")} | {Lookup(CustomerId, CustomerID, City, "Customers")} {Lookup(CustomerId, CustomerID, PostalCode, "Customers")} | {Lookup(CustomerId, CustomerID, Country, "Customers")} | | 테두리 두께 | 0.25pt | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | | 아래쪽 테두리 스타일 | 단색 | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | | 테두리 색 | 옅은 회색 | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | | 텍스트 색 | \#3da7a8 | \#3c3c3c | \#3c3c3c | \#3c3c3c | | 글꼴 크기 | 12pt | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | | 글꼴 두께 | 굵게 | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | | 세로 맞춤 | 가운데 | 가운데 | 가운데 | 가운데 | | 왼쪽 | 0in | 0in | 0in | 0in | | 위쪽 | 2.2in | 2.9in | 3.2in | 3.5in | | 너비 | 3.4in | 3.4in | 3.4in | 3.4in | | 높이 | 0.4in | 0.3in | 0.3in | 0.3in | | 안쪽 여백 | 6pt 2pt 6pt 2pt | 6pt 2pt 6pt 2pt | 6pt 2pt 6pt 2pt | 6pt 2pt 6pt 2pt | 동일한 방식으로 ```배송지``` 주소를 위한 텍스트 상자를 추가합니다. | 속성 | 헤더 텍스트 상자 | 배송지 이름 텍스트 상자 | 배송지 주소 텍스트 상자 | 배송지 구/군/시 및 우편 번호 텍스트 상자 | 배송지 국가 텍스트 상자 | |---------------------|-----------------|--------------------|----------------------|-------------------------------|----------------------| | 값 | 배송지 주소 | {ShipName} | {ShipAddress} | {ShipCity} {ShipPostalCode} | {ShipCountry} | | 테두리 두께 | 0.25pt | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | | 아래쪽 테두리 스타일 | 단색 | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | | 테두리 색 | 옅은 회색 | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | | 텍스트 색 | \#3da7a8 | \#3c3c3c | \#3c3c3c | \#3c3c3c | \#3c3c3c | | 글꼴 크기 | 12pt | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | | 글꼴 두께 | 굵게 | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | | 세로 맞춤 | 가운데 | 가운데 | 가운데 | 가운데 | 가운데 | | 왼쪽 | 3.8in | 3.8in | 3.8in | 3.8in | 3.8in | | 위쪽 | 2.2in | 2.6in | 2.9in | 3.2in | 3.5in | | 너비 | 3.7in | 3.7in | 3.7in | 3.7in | 3.7in | | 높이 | 0.4in | 0.3in | 0.3in | 0.3in | 0.3in | | 안쪽 여백 | 6pt 2pt 6pt 2pt | 6pt 2pt 6pt 2pt | 6pt 2pt 6pt 2pt | 6pt 2pt 6pt 2pt | 6pt 2pt 6pt 2pt | 이제 보고서 출력을 미리 보고 고객과 주문을 선택한 다음 ```미리 보기``` 버튼을 클릭하여 페이지에 지정한 주문의 청구지 및 배송지 주소가 표시되는지 확인할 수 있습니다. 대부분의 경우 청구지 주소와 배송지 주소는 동일하지만 주소가 다른 주문도 있습니다. 청구지 주소와 배송지 주소가 다른 주문을 찾아보십시오. ### 고정 표 추가 ```Orders``` 데이터 집합에는 중첩된 ```OrderDetails``` 데이터 집합이 포함되어 있습니다. 여기서는 고정 표 레이아웃을 사용하여 주문 세부 정보를 인쇄합니다. * 도구 모음 왼쪽에 있는 ```햄버거``` 메뉴를 사용하여 도구 상자를 확장합니다. * [표](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Table) 항목을 도구 상자에서 보고서 페이지 가운데의 아무 곳으로 끌어 놓습니다. * 속성 패널에서 새로 추가된 표에 대해 다음 속성을 설정합니다. | 속성 | 값 | |----------------------------|---------------------------------------| | 데이터 집합 이름 | OrderDetails | | 왼쪽 | 0in | | 위쪽 | 4in | | 너비 | 7.5in | | 고정 높이 | 5.5in | ```고정 높이```는 페이지에서 표의 공간에 대한 한계를 설정합니다. 고정된 표 높이가 수용할 수 있는 것보다 데이터가 많은 경우 고정 레이아웃 구성에 따라 새 페이지에 인쇄됩니다. 이 주제는 뒷부분에서 다룰 것입니다. 새로 추가된 표에는 기본적으로 [헤더](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-header), [푸터](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-footer) 및 [세부 정보](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#details) 행이 있습니다. 여기서는 요약 값을 수용하기 위해 표 푸터에 행을 추가합니다. * 표에서 아무 곳이나 클릭하여 [열 및 행 처리기](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-designer)를 표시합니다. * 마지막 행을 마우스 오른쪽 버튼으로 클릭하고 ```행``` 메뉴 항목으로 이동합니다. * ```아래에 행 삽입``` 항목 오른쪽에 있는 카운터를 늘린 다음 클릭하여 행 2개를 추가합니다.

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

확장하여 실행 중인 표 푸터 열 추가 보기

DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/GetStartedWithFixedReports/AddingExtraRows.gif)

DOC-DETAILS-TAG-CLOSE

### 표 열 서식 지정 여기서 작성한 표에서 첫 번째 열에는 제품 이름, 두 번째 열에는 수량, 세 번째 열에는 단가, 네 번째 열에는 합계가 표시되어야 합니다. 이 정보를 바탕으로 열의 너비를 설정해 보겠습니다. * 표에서 아무 곳이나 클릭하여 [열 및 행 처리기](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-designer)를 표시합니다. * 첫 번째 열 처리기를 클릭하고 속성 패널에서 ```너비```를 ```1.2in```로 설정합니다. * 두 번째 열과 세 번째 열에 대해 위 단계를 반복합니다. * 첫 번째 열 처리기를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 ```열 > 왼쪽에 열 삽입``` 항목을 선택합니다. * 새로 추가한 열 처리기를 클릭하고 속성 패널에서 ```너비```를 ```3.9in```로 설정합니다.

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

확장하여 실행 중인 새 열 및 설정 추가 보기

DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/GetStartedWithFixedReports/SettingColumnsWidth.gif)

DOC-DETAILS-TAG-CLOSE

속성 패널에서 ```텍스트 상자```로 전환합니다. 이제 선택한 열에서 모든 표 셀의 속성을 수정할 수 있습니다. 다음 맵을 사용하여 표 열의 텍스트 모양을 구성합니다. | 속성 | 첫 번째 열 | 두 번째 열 | 세 번째 열 | 네 번째 열 | |----------------|--------------------|--------------------|-----------------|-----------------| | 테두리 두께 | 0.25pt | 0.25pt | 0.25pt | 0.25pt | | 테두리 스타일 | 단색 | 단색 | 단색 | \#Solid | | 테두리 색 | \#e6e6e6 | \#e6e6e6 | \#e6e6e6 | e6e6e6 | | 텍스트 맞춤 | 왼쪽 | 오른쪽 | 오른쪽 | 오른쪽 | | 세로 맞춤 | 가운데 | 가운데 | 가운데 | 가운데 | | 서식 | *기본값으로 두기* | *기본값으로 두기* | c2 | c2 | | 안쪽 여백 | 6pt 2pt 6pt 2pt | 6pt 2pt 6pt 2pt | 6pt 2pt 6pt 2pt | 6pt 2pt 6pt 2pt | ### 표 행 서식 지정 동일한 방식으로 행 처리기를 클릭하고 속성 패널의 ```행``` 및 ```텍스트 상자``` 탭에서 행 처리기의 속성을 수정하여 행 모양을 구성합니다. | 속성 | 첫 번째 행 | 두 번째 행 | 세 번째 행 | 네 번째 행 | 다섯 번째 행 | |------------------|----------|--------------------|--------------------|--------------------|--------------------| | 높이 | 0.4in | 0.3in | 0.3in | 0.3in | 0.3in | | 배경색 | \#f7f7f7 | *기본값으로 두기* | \#f9f9f9 | \#f9f9f9 | \#f9f9f9 | | 텍스트 색 | \#3da7a8 | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | *기본값으로 두기* | | 글꼴 두께 | 굵게 | *기본값으로 두기* | 굵게 | 굵게 | 굵게 | ### 표 데이터 표시 이제 표에 주문 세부 정보를 표시할 차례입니다. 아래 구성표에 따라 표 셀을 채웁니다. 표 셀을 두 번 클릭하여 값을 입력하거나 복사한 값을 붙여넣습니다. | | 첫 번째 열 | 두 번째 열 | 세 번째 열 | 네 번째 열 | |---------|---------------------------------------------------------|------------|-------------|----------------------------------------------| | 첫 번째 행 | 설명 | 수량 | 단가 | 합계 | | 두 번째 행 | {Lookup(ProductId, ProductId, ProductName, "Products")} | {Quantity} | {UnitPrice} | {Quantity * UnitPrice} | | 세 번째 행 | | | SUBTOTAL | {Sum(Quantity * UnitPrice)} | | 네 번째 행 | | | DISCOUNT | {Sum(Quantity * UnitPrice * Discount)} | | 다섯 번째 행 | | | BALANCE DUE | {Sum(Quantity * UnitPrice * (1 - Discount))} | 보고서 출력을 미리 보고 ```Rattlesnake Canyon Grocery``` 회사와 주문 ```11077```을 선택한 다음 ```미리 보기``` 버튼을 클릭합니다. 그러면 앞에서 디자인 타임에 표에 대해 설정한 고정 높이 때문에 주문 세부 정보 데이터가 두 페이지로 분할된 것을 확인할 수 있습니다. ### 오버플로우 자리 표시자 추가 주문 세부 정보가 여러 페이지에 걸쳐 분할된 경우 페이지마다 송장 헤더를 인쇄할 필요가 없을 수 있습니다. 송장의 첫 페이지에만 표시하면 됩니다. 이 기능을 구성하기 위해 여기서는 [고정 레이아웃 오버플로](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Layouts#overflow-place-holder)를 사용합니다. * 보고서 디자인으로 돌아가 디자인 화면의 오른쪽 하단에서 ```페이지 추가``` 버튼을 클릭합니다. * 도구 모음 왼쪽에 있는 ```햄버거``` 메뉴를 사용하여 도구 상자를 확장합니다. * ```오버플로우 자리 표시자``` 항목을 도구 상자에서 보고서 페이지 영역의 오른쪽 위로 끌어 놓습니다. * 오버플로우 자리 표시자의 ```왼쪽``` 및 ```위쪽``` 속성을 ```0in```로 설정합니다. * ```고정 페이지 탭```을 사용하여 ```1페이지```로 이동합니다. * 주문 세부 정보 표에서 아무 곳이나 클릭하여 [루트 처리기](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Table#table-designer)를 표시합니다. * 표 처리기를 클릭하여 속성 패널에서 표를 로드하고 ```OverflowName``` 속성을 새로 추가된 오버플로 자리 표시자의 이름인 ```OverflowPlaceHolder1```로 설정합니다. 또한 ```채우기 반복``` 스위치를 켭니다.

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

확장하여 실행 중인 오버플로 자리 표시자 설정 보기

DOC-SUMMARY-TAG-CLOSE

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/GetStartedWithFixedReports/SettingOverflowPlaceHolder.gif)

DOC-DETAILS-TAG-CLOSE

보고서 출력을 미리 보고 ```Rattlesnake Canyon Grocery``` 회사와 주문 ```11077```을 선택한 다음 ```미리 보기``` 버튼을 클릭합니다. 그러면 주문 세부 정보 데이터가 두 페이지로 분할된 것을 확인할 수 있습니다. 그런데 두 번째 페이지에는 주문 세부 정보만 표시되는데, 요약 값이 함께 표시되고 첫 번째 페이지에 맞지 않습니다. 오버플로 자리 표시자는 표와 높이가 동일하고 ```RepeatToFill``` 속성을 사용하면 빈 줄을 삽입하여 전체 여유 공간을 채울 수 있습니다. 주문 세부 정보 데이터가 두 번째 페이지에 맞지 않는 경우 세 번째 페이지가 생성되어 오버플로된 부분을 인쇄합니다. 최종 보고서 버전은 [데모 웹 사이트](/activereportsjs/demos/Reports/GetStartedWithFixedReports/purejs)에서 확인할 수 있습니다.