[]
デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

ツールバーのカスタマイズ

ビューワはAPIを使用して、ツールバーおよびサイドバーをカスタマイズすることができます。このトピックでは、ツールバーおよびサイドバーをカスタマイズする方法について説明します。

ツールバーのレイアウト設定

ツールバーはビューワの状態によって、3つの表示モードが提供されています。

  • デフォルト: ビューワが通常時のツールバーのレイアウト設定

  • フルスクリーン：ビューワがフルスクリーン時のツールバーのレイアウト設定

  • モバイル：ビューワがモバイル表示時のツールバーのレイアウト設定

デフォルトでは、各レイアウトに次のアイテムが含まれています。

内部ID

説明

$navigation

先頭ページ、前ページ、ページ番号／ページ合計、次ページ、最終ページに移動するボタン

$split

セパレーター

$refresh

レポートを更新するボタン

$history

親レポートに戻る、親レポートで前ページおよび次ページに移動するボタン

$zoom

レポートの縮小、ズーム、拡大するボタン

$fullscreen

フルスクリーンモードに切り替えるボタン

$print

印刷ボタン

$singlepagemode

単一ページモードに切り替えるボタン

$continuouspagemode

連続ページモードに切り替えるボタン

$galleymode

ゲラモードに切り替えるボタン

ビューワのtoolbarにアクセスし、updateLayoutメソッドを使用すると、各ビューワの状態で指定されたアイテムのみツールバーに表示できます。

次のコードは、デフォルトでは［ズーム］、［フルスクリーン］、［印刷］ボタンを、フルスクリーンでは［フルスクリーン］および［印刷］ボタンを、モバイルでは［移動］ボタンのみ表示するよう設定しています。この例はReactを使用していますが、JavaScript、Angular、Vueでも同じ方法を使用できます。

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

JavaScript、Angular、React、Vueでツールバーをカスタマイズする方法については、デモを参照してください。

ツールバーのボタンの動作を更新する

ビューワのtoolbarにアクセスし、updateItemメソッドを使用すると、ツールバーのボタンの動作をオーバーライドすることができます。

次のコードは、レポートを印刷したときにイベントを分析サーバーに送信する処理を追加しています。この例はReactを使用していますが、JavaScript、Angular、Vueでも同じ方法を使用できます。

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

ツールバーのボタンの追加と削除

ビューワのtoolbarにアクセスし、addItemメソッドを使用するとボタンを追加することができます。同様にremoveItemメソッドを使用するとボタンを削除することができます。

ツールバーとサイドバーの非表示

ビューワのtoolbarVisibleプロパティを使用するとツールバーを、sidebarVisibleプロパティを使用するとサイドバーを非表示にすることができます。ツールバーやサイドバーを非表示にしたビューワを操作する場合はAPIを使用して操作することができます。

関連トピック