사용자 정의

공통

ActiveReportsJS API를 사용하면 보고서 뷰어의 도구 모음과 사이드바의 기본 사용자 인터페이스를 완벽하게 사용자 지정할 수 있습니다. 이 페이지에서는 이러한 구성 요소를 특정 애플리케이션 요구 사항에 맞게 조정하는 몇 가지 방법을 설명합니다.

도구 모음 사용자정의

ActiveReportsJS 보고서 뷰어는 뷰어 상태 또는 장치 유형에 따라 자동으로 전환되는 세 가지 기본 도구 모음 레이아웃을 제공합니다.

기본 도구 모음 항목

도구 모음은 기본 항목과 그룹으로 구성됩니다. getDefaultToolbarItems 메서드를 사용하여 항목 컬렉션을 가져올 수 있습니다.

세부적인 사용자 정의 (하위 항목)

보다 세밀한 제어를 위해 $navigation, $history, $zoom 그룹 내의 개별 항목에 접근하여 조작할 수 있습니다. 이러한 하위 항목은 기본 항목과 마찬가지로 updateLayout, updateItem 및 removeItem 메서드에서 사용할 수 있습니다. getDefaultToolbarItems 메서드는 그룹 이름(예: $navigation)을 매개변수로 전달하면 하위 항목 목록을 반환합니다.

• $navigation 하위 항목: $navigation-firstPage, $navigation-prevPage, $navigation-pageNumber, $navigation-nextPage, $navigation-lastPage

• $history 하위 항목: $history-backToParent, $history-goBack, $history-goForward

• $zoom 하위 항목: $zoom-zoomOut, $zoom-zoomLevel, $zoom-zoomIn

updateLayout 메서드를 사용하여 각 레이아웃 모드에 표시되는 항목을 재정의할 수 있습니다. 다음 React 예제는 모바일 사용자를 위한 간소화된 환경을 제공하기 위해 특정 탐색 하위 항목을 사용하는 것을 포함하여 세 가지 레이아웃 모드 모두에 대한 도구 모음을 재정의하는 방법을 보여줍니다.

import { Viewer } from "@mescius/activereportsjs-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-prevPage", "$navigation-pageNumber", "$navigation-nextPage"],
    });
  }, []);
  return (
    <div id="viewer-host">
      <Viewer
        ref={viewerRef}
        report={{ Uri: "/reports/Customers.rdlx-json" }}
      />
    </div>
  );
};

React, Angular, Vue 및 순수 JavaScript 애플리케이션의 전체 예제를 온라인 데모에서 확인할 수 있습니다.

도구 모음 항목 추가, 제거 및 업데이트

addItem 메서드를 사용하여 도구 모음 항목 컬렉션에 새로운 버튼을 추가하거나 드롭다운을 추가할 수 있습니다.

removeItem 메서드를 사용하여 항목을 제거할 수 있습니다. 이 메서드는 하위 항목(예: $navigation-lastPage)과 $refresh 또는 $mousemode와 같은 표준 항목을 포함하여 모든 내부 ID를 허용합니다.

기존 항목의 동작이나 모양을 수정하려면 updateItem을 사용하세요. 이 기능은 사용자 정의 항목과 모든 기본 제공 항목/하위 항목에 적용됩니다.

아래 예시는 특정 탐색 버튼의 툴팁과 '인쇄' 버튼의 동작을 업데이트합니다.

import { Viewer } from "@mescius/activereportsjs-react";

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

  React.useEffect(() => {
    const viewerInstance = viewerRef.current?.Viewer;
    viewerInstance?.toolbar.updateItem("$navigation-firstPage", { 
      title: "Open Page 1️⃣" 
    });
    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 래퍼와 [Report Viewer]에 전달되는 options 객체에서 사용할 수 있는 PanelsLayout 속성입니다. Viewer 생성자는 검색, 내보내기, 문서 맵 및 매개변수 패널의 위치를 제어합니다.

기본적으로 이러한 패널과 해당 도구모음 버튼은 뷰어 인터페이스의 왼쪽에 나타납니다. 오른쪽으로 이동하려면 PanelsLayout 속성을 sidebar로 설정하십시오. 이 설정은 패널과 열려 있는 버튼을 모두 오른쪽으로 이동합니다.

매개변수 패널 위치 구성

ParameterPanelLocation 속성을 사용하여 매개변수 패널의 위치를 제어할 수 있습니다. 이 속성은 React, Angular 및 Vue 래퍼에서 사용할 수 있습니다. 순수 자바스크립트 애플리케이션에서는 [Viewer 생성자]에 전달되는 option 객체를 통해 설정할 수 있습니다.

• auto – 보고서에서 사용자 정의 매개변수 보기를 사용하는 경우 매개변수 패널이 뷰어의 상단에 나타납니다. 그렇지 않으면 왼쪽에 나타납니다.

• default – 매개변수 패널은 위에서 설명한 PanelsLayout 설정에 따라 뷰어의 왼쪽 또는 오른쪽에 표시됩니다.

• top – 매개변수 패널이 뷰어의 상단에 고정됩니다.

• bottom – 매개변수 패널이 뷰어의 하단에 고정됩니다.

도구 모음 및 사이드바 교체

Viewer 컴포넌트의 toolbarVisible 및 sidebarVisible 속성을 사용하여 기본 도구 모음과 사이드바를 숨길 수 있습니다. 이러한 속성은 React, Angular 및 Vue 래퍼에서 사용할 수 있습니다.

이 접근 방식은 내장된 뷰어 인터페이스를 공개 API를 통해 뷰어 함수를 호출하는 사용자 정의 UI로 대체하려는 경우에 유용합니다.

관련 항목

• 라이브 데모

• 사용자 인터페이스

• Angular 컴포넌트

• React 컴포넌트

• Vue 컴포넌트

• 순수 JavaScript 통합