사용자 정의

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 응용 프로그램의 도구 모음에서 "정보" 버튼을 삽입하는 예를 확인할 수 있습니다.

도구 모음 및 세로 막대 교체

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

관련 항목

• 라이브 데모
• 사용자 인터페이스
• Angular 컴포넌트
• React 컴포넌트
• Vue 컴포넌트
• 순수 JavaScript 통합