# 사용자 정의

## Content



ActiveReportsJS API를 사용하면 개발자가 도구 모음의 기본 사용자 인터페이스와 뷰어 컴포넌트의 세로 막대를 완전히 덮어쓸 수 있습니다. 이 페이지에서는 특정 응용 프로그램 요구 사항을 충족하는 데 사용할 수 있는 여러 방법을 설명합니다.

### 도구 모음 레이아웃 설정

ActiveReportJS 뷰어에는 다음과 같이 기본 제공되는 3가지 도구 모음 레이아웃이 있습니다.

- 일반 - 기본 레이아웃
- 전체 화면 - 뷰어의 전체 화면 모드가 켜져 있는 경우 표시됨
- 모바일 - 좁은 화면에서 표시됨

기본적으로 각 레이아웃에는 다음 항목이 포함되어 있습니다.

| 내부 ID          | 설명                                                                                                           |
| -------------------- | --------------------------------------------------------------------------------------------------------------------- |
| $navigation         | 첫 페이지로 이동, 이전 페이지로 이동, 페이지 번호/전체 페이지 수, 다음 페이지로 이동, 마지막 페이지로 이동 버튼 |
| $split              | 구분 기호                                                                                                             |
| $refresh            | 보고서 새로 고침 버튼                                                                                                 |
| $history            | 부모 보고서로 이동, 기록에서 뒤로 이동, 기록에서 앞으로 이동 버튼                                            |
| $zoom               | 확대/축소 모드 드롭다운                                                                                                   |
| $fullscreen         | 전체 화면 모드 설정/해제 버튼                                                                                        |
| $print              | 인쇄 버튼                                                                                                          |
| $singlepagemode     | 단일 페이지 모드로 전환 버튼                                                                                 |
| $continuouspagemode | 연속 페이지 모드로 전환 버튼                                                                             |
| $galleymode         | 갤러리 페이지 모드로 전환 버튼                                                                                 |

뷰어 `도구 모음` 속성의 [updateLayout](@api/classes/reportviewer.toolbar.html#updatelayout) 메서드를 사용하여 각 레이아웃 모드의 도구 모음에서 지정된 항목만 표시할 수 있습니다. 다음은 React 응용 프로그램에서 이 접근 방식을 사용하여 일반 레이아웃에서 "확대/축소", "전체 화면 설정/해제" 및 "인쇄" 항목을, 전체 화면 레이아웃에서 "전체 화면 설정/해제" 및 "인쇄" 항목을, 모바일 레이아웃에서 "탐색" 항목만 표시하는 예입니다.

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

const ViewerApp: React.FC = () => {
  const viewerRef = React.useRef < Viewer > null;

  React.useEffect(() => {
    const viewerInstance = viewerRef.current?.Viewer;
    viewerInstance?.toolbar.updateLayout({
      default: ["$zoom", "$split", "$fullscreen", "$split", "$print"],
      fullscreen: ["$fullscreen", "$split", "$print"],
      mobile: ["$navigation"],
    });
  }, []);
  return (
    <div id="viewer-host">
      <Viewer
        ref={viewerRef}
        report={{ Uri: "/reports/Customers.rdlx-json" }}
      />
    </div>
  );
};
```

[이 온라인 데모](/activereportsjs/demos/features/viewer-customization-toolbar)에서는 React, Angular, Vue 및 순수 JavaScript 응용 프로그램에서 이 접근 방식의 완전한 예를 확인할 수 있습니다.

### 도구 모음 항목의 기본 동작 업데이트

[React](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSViewer/React-Component), [Angular](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSViewer/Angular-Component) 및 [Vue](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSViewer/Vue-Component) 래퍼에서도 액세스할 수 있는 뷰어 컴포넌트 [도구 모음](@api/classes/reportviewer.toolbar.html) 속성의 [updateItem](@api/classes/reportviewer.toolbar.html#updateitem) 메서드는 도구 모음 항목의 기본 동작을 재정의하는 데 사용할 수 있습니다. 예를 들어 응용 프로그램에서 분석을 추가하고 사용자가 보고서를 인쇄할 때 분석 서버로 이벤트를 보내려는 경우 다음 코드를 사용할 수 있습니다. 다음 예는 React 응용 프로그램에 해당하지만 Angular, Vue 및 순수 JavaScript 응용 프로그램에 동일한 기법을 사용할 수 있습니다.

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

const ViewerApp: React.FC = () => {
  const viewerRef = React.useRef < Viewer > null;

  React.useEffect(() => {
    const viewerInstance = viewerRef.current?.Viewer;
    viewerInstance?.toolbar.updateItem("$print", {
      action: function () {
        ga("send", {
          hitType: "event",
          eventCategory: "action",
          eventAction: "print",
          eventLabel: "report",
        });
        viewerInstance.print();
      },
    });
  }, []);
  return (
    <div id="viewer-host">
      <Viewer
        ref={viewerRef}
        report={{ Uri: "/reports/Customers.rdlx-json" }}
      />
    </div>
  );
};
```

### 도구 모음 항목 추가 및 제거

[React](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSViewer/React-Component), [Angular](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSViewer/Angular-Component) 및 [Vue](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSViewer/Vue-Component) 래퍼에서도 액세스할 수 있는 뷰어 컴포넌트의 [도구 모음](@api/classes/reportviewer.toolbar.html) 속성의 [addItem](@api/classes/reportviewer.toolbar.html#additem) 및 [removeItem](@api/classes/reportviewer.toolbar.html#removeitem) 메서드를 사용하여 도구 모음에서 사용자 정의 요소를 추가 및 제거할 수 있습니다. [이 온라인 데모](/activereportsjs/demos/features/viewer-customization-toolbar)에서는 React, Angular, Vue 및 순수 JavaScript 응용 프로그램의 도구 모음에서 "정보" 버튼을 삽입하는 예를 확인할 수 있습니다.

### 도구 모음 및 세로 막대 교체

마지막으로, 뷰어 컴포넌트의 `toolbarVisible` 및 `sidebarVisible` 속성([React](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSViewer/React-Component), [Angular](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSViewer/Angular-Component) 및 [Vue](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSViewer/Vue-Component) 래퍼에 사용할 수 있음)을 사용하여 보고서 뷰어의 기본 도구 모음과 세로 막대 컴포넌트를 숨길 수 있습니다. 이 접근 방식은 [공개 API](@api/classes/reportviewer.viewer.html)를 사용하여 뷰어 기능을 호출하는 데 사용자 정의 UI를 사용하기로 결정한 경우 유용할 수 있습니다.

### 관련 항목

- [라이브 데모](/activereportsjs/demos/features/viewer-customization-toolbar)
- [사용자 인터페이스](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSViewer/Interface-Elements)
- [Angular 컴포넌트](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSViewer/Angular-Component)
- [React 컴포넌트](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSViewer/React-Component)
- [Vue 컴포넌트](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSViewer/Vue-Component)
- [순수 JavaScript 통합](/activereportsjs/docs/v2.1/DeveloperGuide/ActiveReportsJSViewer/VanillaJS)