# 보고서 구성요소

## Content

## 소개

`보고서 구성요소`는 `ActiveReportsJS`의 혁신적인 기능으로, 개발자와 보고서 작성자가 `보고서 구성요소 라이브러리`에 사전 정의된 재사용 가능한 보고서 항목을 설계하고 조직할 수 있도록 도와줍니다. 이러한 라이브러리는 기술적 역량이 없는 사용자들도 쉽게 이 항목들을 자신의 보고서에 통합하고, 개발자가 설정한 제약 내에서 커스터마이징할 수 있습니다. 이 가이드는 개발자와 보고서 작성자가 이러한 라이브러리를 구축하는 방법을 설명하고, 최종 사용자가 특정 보고 요구 사항에 맞게 보고서 구성 요소를 조정하는 방법에 대한 지침을 제공합니다.

## 보고서 구성요소 라이브러리 초기화

`보고서 구성요소 라이브러리`는 기본적으로 보고서 구성요소의 선언을 포함하는 보고서입니다. 새로운 보고서 구성요소 라이브러리를 초기화하려면, 먼저 필요에 맞는 보고서 유형을 선택해야 합니다. 선택 가능한 옵션에는`연속 페이지 레이아웃`, `고정 페이지 레이아웃`, 또는 `페이지 없는 레이아웃`이 있습니다. 선택한 보고서 유형에 따라 보고서 항목의 속성이 약간 달라질 수 있으며, 이는 보고서 내에서 사용되는 방식에 영향을 미칠 수 있습니다. 각 레이아웃 유형의 사양과 장점에 대한 자세한 지침은 [레이아웃 유형](/activereportsjs/docs/ReportAuthorGuide/보고서-구성/Report-Layouts) 문서 페이지에서 확인할 수 있습니다.

## 보고서 구성 요소 초기화

새로운 보고서 구성요소를 만드는 과정에는 특정 속성을 고정하고 최종 사용자가 다른 속성을 사용자 정의할 수 있도록 허용하는 여러 중요한 단계가 포함됩니다. 다음은 회사 로고를 표시하고 최종 사용자가 테두리 스타일을 수정할 수 있도록 하는 `로고` 보고서 구성요소를 만드는 방법입니다. 유사한 단계를 사용하여 모든 보고서 항목을 기반으로 보고서 구성요소를 구성할 수 있습니다.

1. **보고서 항목 추가**: 도구상자에서 `이미지` 보고서 항목을 끌어다 보고서 레이아웃에 놓습니다.
2. **고정된 속성 구성**: 속성 패널에서, `이미지` 속성 편집기를 확장합니다. `원본`을 `외부`로 설정하고, `값`을 로고 URL `https://cdn.mescius.io/umb/media/pujnxfci/mescuis-logo-horiz.svg`로 설정합니다. `MIME 형식`을 `image/svg+xml`로 설정하고, `이미지 크기 조정`을 `비례 맞춤`으로 설정합니다.
    ![image.418d8d](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/ebb38eb0-17c6-468e-ab14-9dc8f4706b04/image.418d8d.d32ea4.png)
3. **보고서 구성요소 선언**: 애플리케이션 바에서 `보고서 구성요소` 탭으로 이동한 후, `보고서 구성요소 만들기` 버튼을 클릭합니다.
4. **사용자 정의를 위한 속성 설정**:
    * 속성 패널에서, `이미지` 항목을 선택한 채로 `구성 요소` 탭으로 전환합니다.
    * `디스플레이 이름`을 `회사 로고`로 설정하고 `설명`을 `회사 로고 표시`로 설정합니다.
    * `속성` 편집기 옆의 `+` 아이콘을 클릭하여 새로운 속성을 추가합니다. 이 속성의 이름은 `테두리스타일`입니다.
    * 새롭게 추가된 속성 옆의 `편집` 아이콘을 클릭하고 아래 설정으로 구성합니다. `디스플레이 이름` = `테두리 스타일`, `설명` = `로고 테두리 스타일을 사용자 정의할 수 있습니다`, `카테고리` = `스타일`, `유형` = `선 스타일`, `기본값` = `단색`.
        ![image.9e6abb](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/ebb38eb0-17c6-468e-ab14-9dc8f4706b04/image.9e6abb.9990a5.png)
5. **최종 사용자 사용자정의 허용**:
    * 속성 패널로 돌아가서 `이미지` 탭을 선택합니다.
    * 테두리/스타일 편집기를 확장하고 테두리 스타일의 `기본값`을 `{PartProperties!BorderStyle.Value}`으로 설정합니다. 이 설정은 최종 사용자가 테두리 스타일을 사용자 정의할 수 있도록 하면서, 테두리 너비와 색상은 미리 정의되어 변경할 수 없도록 보장합니다.
6. **보고서 라이브러리 저장**: 사용하시는 기기의 적절한 위치에 보고서 라이브러리를 저장합니다.

이 보고서 구성요소 설정 방법은 개발자와 보고서 작성자에게 유연성과 제어를 보장합니다. 설명된 단계를 따름으로써, 최종 사용자가 편집할 수 있도록 의도된 속성을 유사하게 구성할 수 있습니다. 이 기능을 통해 보고서 구성요소의 상호 작용 및 사용자 정의 옵션을 조정하여 다양한 보고 요구 사항과 사용자 선호에 맞게 적용할 수 있습니다.

## 독립 실행형 디자이너에서 보고서 라이브러리 사용하기

다음 단계를 따라 독립 실행형 디자이너 애플리케이션에서 보고서 라이브러리를 사용합니다:

1. **보고서 생성 또는 열기**: [독립 실행형 디자이너](/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App)를 실행하고 새로운 보고서를 생성하거나 존재하는 보고서를 오픈합니다.
2. **라이브러리 추가**:`File` 메뉴로 이동하여 `라이브러리 추가...` 를 선택합니다. 파일 열기 대화상자에서, 이전 섹션의 6단계에서 저장한 보고서 라이브러리 파일을 찾아 선택합니다.
3. **라이브러리 액세스**: 도구상자에서, `라이브러리` 노드를 확장하여 사용 가능한 보고서 구성요소를 확인합니다.
4. **보고서 구성요소 삽입**: 라이브러리로부터 `회사 로고` 항목을 끌어다 보고서 레이아웃에 놓습니다.
5. **속성 사용자 정의**: 속성 그리드에서, `스타일` 섹션을 찾아 `테두리 스타일`을 원하는 값으로 설정합니다.
    ![image.418d8d](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/ebb38eb0-17c6-468e-ab14-9dc8f4706b04/image.418d8d.f6dd9a.png)
6. **보고서 미리보기**: 보고서를 미리 보고 `회사 로고`가 예상대로 보여지는지, 테두리 스타일이 설정한 값으로 올바르게 반영되었는지 확인합니다.
    ![image.90446f](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/ebb38eb0-17c6-468e-ab14-9dc8f4706b04/image.90446f.d8d46d.png)

## 보고서 디자이너 컴포넌트와 함께 보고서 라이브러리 사용하기

보고서 구성요소 라이브러리를 응용프로그램으로 불러오는 방법에 대한 자세한 정보는 [보고서 구성요소 사용](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/보고서-구성요소-사용하기) 페이지에서 확인하실 수 있습니다.