사용자 정의

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

Configuring the Panels Layout

The PanelsLayout property of the React, Angular, and Vue wrappers and the options object that is passed into the Viewer constructor determines the location of the Search, Export, Document Map and Parameters panels. By default these panels alongside their open buttons locate on the left side of the viewer interface. You can set the PanelsLayout property to sidebar to change the location of the panels to the right side and the open buttons on the toolbar:

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 통합