[{"id":"d1ffb4db-74d8-4220-a972-c13d6fa8123b","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"1ea0de02-4d95-4f9a-bd1e-e4f1e58e5146","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cd911f7e-e532-41c5-b415-fd5a1a83b8d6","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"54a4a5be-ed96-43df-a901-6a53495a4ff7","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"fe055276-b12c-40ab-9569-c2d9ebd4f5b8","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"71be3f0b-8a29-45e8-8d43-4965d3e0897e","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"ea12b649-a786-495c-ad0f-7ef38ce94a9e","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9582e49d-f693-4f0d-96b3-7f4accc2bb6e","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"a6f863bb-031a-44cc-8a12-fc91219e8c15","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"c5da505a-f378-4333-b85f-2429d057b519","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"7daee9d7-e908-4166-9d62-2ca3e93547fb","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8659262c-9b4e-4e31-9c6c-b97d1d0e0740","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"966a73cf-5b72-4f4b-8939-e7a06e0863da","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"6c63e26a-a944-4aa9-a190-ecc8ac767287","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"3af6c981-53ee-41ba-8ef7-03efb56a8fff","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8f1b28f2-c419-43fb-b765-5fde0a36fb08","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"d67bf68e-cb2e-4b6f-9253-68ca0ee46560","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e23050c1-7dc0-4265-a2d9-eaaf938c2d35","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"c9c6aa74-7d95-41b4-9702-98774683bf0a","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"83a0368a-9a1a-4b31-8081-d2edc554d42f","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0e562678-2dd4-4972-ab4d-e718f050accb","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9965a8b8-f6c2-4727-a6d6-4cf12bd5b14f","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e805fe27-20e5-4468-85b9-078665b18438","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"a1a9a9bc-d0b6-4d18-8abf-5c6f2a7cfa40","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"fdcc0c41-acb5-4465-9b66-7e06200a48c4","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"05d00001-6629-4aea-be2a-ddc570ca6a09","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]}]
ActiveReportsJS API를 사용하면 개발자가 도구 모음의 기본 사용자 인터페이스와 뷰어 컴포넌트의 사이드바를 완전히 덮어쓸 수 있습니다. 이 페이지에서는 특정 응용 프로그램 요구 사항을 충족하는 데 사용할 수 있는 여러 방법을 설명합니다.
ActiveReportJS 뷰어에는 다음과 같이 기본 제공되는 3가지 도구 모음 레이아웃이 있습니다.
일반 - 기본 레이아웃
전체 화면 - 뷰어의 전체 화면 모드가 켜져 있는 경우 표시됨
모바일 - 좁은 화면에서 표시됨
기본적으로 각 레이아웃에는 다음 항목이 포함되어 있습니다.
내부 ID | 설명 |
---|---|
$navigation | 첫 페이지로 이동, 이전 페이지로 이동, 페이지 번호/전체 페이지 수, 다음 페이지로 이동, 마지막 페이지로 이동 버튼 |
$split | 구분 기호 |
$refresh | 보고서 새로 고침 버튼 |
$history | 부모 보고서로 이동, 기록에서 뒤로 이동, 기록에서 앞으로 이동 버튼 |
$zoom | 확대/축소 모드 드롭다운 |
$fullscreen | 전체 화면 모드 설정/해제 버튼 |
인쇄 버튼 | |
$singlepagemode | 단일 페이지 모드로 전환 버튼 |
$continuouspagemode | 연속 페이지 모드로 전환 버튼 |
$galleymode | 갤러리 페이지 모드로 전환 버튼 |
뷰어 도구 모음
속성의 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"],
});
}, []);
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 "@mescius/activereportsjs-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
로 설정하여 패널을 오른쪽으로 이동하고 열기 버튼을 도구 모음에 위치 시킬 수 있습니다.
매개변수 패널의 위치는 React, Angular, and Vue 래퍼에서 사용 가능한 ParameterPanelLocation
속성을 이용하여 조정할 수 있습니다. 순수 JavaScript 응용프로그램에서는 뷰어 생성자에 전달되는 options
객체를 통해 이 속성을 설정할 수 있습니다. 이 속성은 다음의 값들 중 하나로 설정될 수 있습니다:
auto
- 보고서가 사용자정의 매개변수 보기를 사용하는 경우, 매개변수 패널은 뷰어 컴포넌트의 상단에 위치합니다. 그렇지 않은 경우, 뷰어의 왼쪽에 배치됩니다.
default
- 매개변수 패널은 위에 설명된 PanelsLocation
값에 따라 뷰어의 왼쪽이나 오른쪽에 위치합니다.
top
- 매개변수 패널은 뷰어의 상단에 위치합니다.
bottom
- 매개변수 패널은 뷰어의 하단에 위치합니다.
마지막으로, 뷰어 컴포넌트의 toolbarVisible
및 sidebarVisible
속성(React, Angular 및 Vue 래퍼에 사용할 수 있음)을 사용하여 보고서 뷰어의 기본 도구 모음과 사이드바 컴포넌트를 숨길 수 있습니다. 이 접근 방식은 공개 API를 사용하여 뷰어 기능을 호출하는 데 사용자 정의 UI를 사용하기로 결정한 경우 유용할 수 있습니다.