# 기본 보고서 항목 속성

## Content



사용자가 보고서를 디자인하고 [TextBox](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Items/Data-Visualizers/TextBox) 같은 새 보고서 항목을 추가하면 보고서 디자이너에서 자동으로 새 보고서 항목의 속성을 기본값으로 설정합니다. 예를 들어 새로 추가한 TextBox에는 `Arial` 글꼴 이름, `10pt` 글꼴 크기, `Normal` 글꼴 스타일이 적용됩니다. 그러나 아래 설명된 절차에 따라 기본값을 재정의할 수 있습니다.

### 보고서 항목 템플릿

`보고서 항목 템플릿`은 속성이 원하는 값으로 설정된 보고서 항목을 포함하는 일반적인 보고서입니다. [독립 실행형 보고서 디자이너 앱](/activereportsjs/docs/v2.2/ReportAuthorGuide/Get-Started-With-Designer-App)에서 `보고서 항목 템플릿`을 만들 수 있습니다. 예를 들어 TextBox의 기본 글꼴 이름을 `Times New Roman`으로 설정하려는 경우 템플릿 보고서에 TextBox를 추가하고 글꼴 이름을 그에 따라 설정할 수 있습니다. 

새로 추가한 보고서 항목에는 `글꼴 이름` 같은 다양한 스타일 속성 외에도 기본 위치 및 치수가 적용됩니다. 치수는 UI의 오른쪽 아래에서 선택할 수 있는 보고서 디자이너의 현재 단위 시스템에 따라 `임페리얼` 또는 `미터법` 단위를 사용할 수 있습니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/developer-guide/designer-component/UnitSystemSwitch.png)

따라서 `임페리얼` 및 `미터법` 단위의 보고서 항목 템플릿을 둘 다 만드는 것이 좋습니다. 응용 프로그램 사용자가 하나의 단위 시스템만 사용하는 경우 단일 보고서 항목 템플릿을 만들어도 됩니다.

최종적으로, ActiveReportsJS는 [연속 페이지 레이아웃](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Layouts#continuous-page-layout) 및 [고정 페이지 레이아웃](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Layouts#fixed-page-layout)이라는 두 가지 유형의 보고서 레이아웃을 지원합니다. [고정 크기](/activereportsjs/docs/v2.2/ReportAuthorGuide/Report-Layouts#fixed-size) 같이 고정 페이지 레이아웃에서 지원되는 기본 보고서 항목 속성을 정의하려는 경우 고정 레이아웃 보고서 항목 템플릿을 만들 수 있습니다. 

즉, 다음과 같은 네 가지 보고서 항목 템플릿을 만들 수 있습니다.

* 연속 페이지 레이아웃, 임페리얼 단위
* 고정 페이지 레이아웃, 임페리얼 단위
* 연속 페이지 레이아웃, 미터법 단위
* 고정 페이지 레이아웃, 미터법 단위

보고서 템플릿을 만든 후 응용 프로그램 코드에서 다음 모양의 개체를 초기화할 수 있습니다. `ReportInfo` 개체에 대한 설명은 [설명서](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#report-info-object)를 참조하십시오.

```js
const reportItemTemplates = {
  imperialTemplates: [
    cplImperialReportTemplateInfo, // Report Info for the Continuous Page Layout Report Items Template with imperial units
    fplImperialReportTemplateInfo // Report Info for the Fixed Page Layout Report Items Template with imperial units
  ],
  metricTemplates: [
    cplMetricReportTemplateInfo, //  Report Info for the Continuous Page Layout Report Items Template with metric units
    fplMetricReportTemplateInfo // Report Info for the Fixed Page Layout Report Items Template with metric units
  ]
}
```

예를 들어 [React 앱의 공용 폴더](https://create-react-app.dev/docs/using-the-public-folder/) 같은 응용 프로그램의 정적 자산 폴더 안에 보고서 템플릿을 저장한 후 코드에서 다음 개체를 초기화할 수 있습니다.

```js
const reportItemTemplates = {
  imperialTemplates: [
    {id: "cpl-template-imperial.rdlx-json"}, // URL of the Continuous Page Layout Report Item Template with imperial units
    {id: "fpl-template-imperial.rdlx-json"} // URL of the Fixed Page Layout Report Item Template with imperial units
  ],
  metricTemplates: [
    {id: "cpl-template-metric.rdlx-json"}, //  URL of the Continuous Page Layout Report Item Template with metric units
    {id: "fpl-template-metric.rdlx-json"} // // URL of the Fixed Page Layout Report Item Template with metric units
  ]
}
```
단일 보고서 항목 템플릿을 사용할 수도 있습니다. 예를 들어 응용 프로그램 사용자가 `임페리얼` 단위만 사용하는데 텍스트 상자 보고서 항목의 기본 글꼴 이름을 설정하려 한다고 가정합니다. 이 경우 reportItemTemplates 개체는 하나의 보고서 항목 템플릿 참조만 포함할 수 있습니다.

```js
const reportItemTemplates = {
  imperialTemplates: [
    {id: "default-template.rdlx-json"}, // URL of the Continuous Page Layout Report Item Template with imperial units
  ]
}
```

### 보고서 디자이너 컴포넌트 구성

[React 보고서 디자이너 컴포넌트](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/React-Component), [Angular 보고서 디자이너 컴포넌트](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Angular-Component) 또는 [Vue 보고서 디자이너 컴포넌트](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Vue-Component)를 사용하는 경우 컴포넌트 인스턴스의 `customInitTemplates` 속성을 사용하여 보고서 항목 템플릿을 전달할 수 있습니다. 예를 들면 다음과 같습니다.

```js
import { Designer } from "@grapecity/activereports-react";

const reportItemTemplates = {
  imperialTemplates: [
    {id: "cpl-template.rdlx-json"}
  ]
}

function App() { 
  return (
    <div id="designer-host">
      <Designer customInitTemplates={reportItemTemplates}  />
    </div>
  );
}
```

Pure JS 응용 프로그램에서 `GC.ActiveReports.ReportDesigner.Designer`의 생성자는 특히 `customInitTemplates` 속성을 포함하는 두 번째 선택적 인수로 [디자이너 구성 개체](@api/modules/reportdesigner.html#designerconfig)를 수락합니다.

```js
var designer = new GC.ActiveReports.ReportDesigner.Designer(
    "#designer-host",
    { customInitTemplates: reportItemTemplates }
);
```

Pure JS, React, Angular, Vue 응용 프로그램의 전체 예제는 [라이브 데모](/activereportsjs/demos/features/designer-custom-defaults/purejs)를 참조하십시오.