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

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

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

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

• デフォルト: ビューワが通常時のツールバーのレイアウト設定
• フルスクリーン：ビューワがフルスクリーン時のツールバーのレイアウト設定
• モバイル：ビューワがモバイル表示時のツールバーのレイアウト設定

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

ビューワの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を使用して操作することができます。

関連トピック

• ビューワのインターフェイス
• JavaScript
• Angular
• React
• Vue
• ツールバーのカスタマイズ[デモ]