사용자 정의

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

도구 모음 레이아웃 설정

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

• 일반 - 기본 레이아웃

• 전체 화면 - 뷰어의 전체 화면 모드가 켜져 있는 경우 표시됨

• 모바일 - 좁은 화면에서 표시됨

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

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

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>
  );
};

이 온라인 데모에서는 React, Angular, Vue 및 순수 JavaScript 응용 프로그램에서 이 접근 방식의 완전한 예를 확인할 수 있습니다.

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

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

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, Angular 및 Vue 래퍼에서도 액세스할 수 있는 뷰어 컴포넌트 도구 모음 속성의 addItem 메서드와 removeItem 메서드는 도구 모음에서 사용자 정의 요소를 추가하고 제거하는 데 사용할 수 있습니다.

링크된 온라인 데모에서 React, Angular, Vue 및 순수 JavaScript 응용 프로그램의 도구 모음에 "About" 버튼을 삽입하는 예를 확인 할 수 있습니다.

패널 레이아웃 구성

React, Angular, 그리고 Vue 래퍼의 PanelsLayout 속성과 Viewer 생성자에 전달되는 options 객체는 검색, 내보내기, 문서 맵, 그리고 매개변수 패널의 위치를 결정합니다. 기본적으로 이러한 패널은 열기 버튼과 나란히 뷰어 인터페이스의 왼쪽에 위치합니다. PanelsLayout 속성을 sidebar로 설정하여 패널을 오른쪽으로 이동하고 열기 버튼을 도구 모음에 위치 시킬 수 있습니다.

Configuring the Parameters Panel Location

The location of the Parameters Panel can be adjusted using the ParameterPanelLocation property available in the React, Angular, and Vue wrappers. In a pure JavaScript application, you can set this property via the options object that is passed into the Viewer constructor. This property can be set to one of the following values:

• auto - If the report utilizes the Custom Parameters View, the Parameters Panel is positioned at the top of the viewer component. If not, it's placed on the left side of the viewer.

• default - The Parameters Panel is located on the left or on the right side of the viewer, depending on the PanelsLocation value described above.

• top - The Parameters Panel is located at the top of the viewer.

• bottom - The Parameters Panel is positioned at the bottom of the viewer.

도구 모음 및 사이드바 교체

마지막으로, 뷰어 컴포넌트의 toolbarVisible 및 sidebarVisible 속성(React, Angular 및 Vue 래퍼에 사용할 수 있음)을 사용하여 보고서 뷰어의 기본 도구 모음과 사이드바 컴포넌트를 숨길 수 있습니다. 이 접근 방식은 공개 API를 사용하여 뷰어 기능을 호출하는 데 사용자 정의 UI를 사용하기로 결정한 경우 유용할 수 있습니다.

관련 항목

• 라이브 데모

• 사용자 인터페이스

• Angular 컴포넌트

• React 컴포넌트

• Vue 컴포넌트

• 순수 JavaScript 통합