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

ビューワは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メソッドを使用するとボタンを削除することができます。

パネル位置の設定

React、Angular、VueラッパーコンポーネントのpanelsLayoutプロパティと、Viewerコンストラクタに渡されるoptionsオブジェクトは、［検索］、［エクスポート］、［見出しマップ］、および［パラメータ］パネルの位置を決定します。デフォルトでは、これらのパネルとパネルを開くボタンはビューワの左側に表示されます。panelsLayoutプロパティをsidebarに設定して、パネルの位置を右側に変更し、パネルの開くボタンをツールバーに表示できます。

パラメータパネルの表示位置の設定

React、Angular、VueラッパーコンポーネントのparameterPanelLocationプロパティを使用して、パラメータパネルの表示位置を設定できます。JavaScriptアプリケーションでは、Viewerコンストラクタに渡されるoptionsオブジェクトによってこのプロパティを設定できます。このプロパティには、次のいずれかの値を指定できます。

• auto ：レポートにカスタムパラメータビューがある場合は、パラメータパネルはビューワの上部に表示されます。カスタムパラメータビューがない場合は、ビューワの左側に表示されます。

• default ：PanelsLocationプロパティに設定された値に応じて、パラメータパネルはビューワの左側または右側に表示されます。

• top ：パラメータパネルはビューワの上部に表示されます。

• bottom ：パラメータパネルはビューワの下部に表示されます。

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

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

関連トピック

• ビューワのインターフェイス

• JavaScript

• Angular

• React

• Vue

• ツールバーのカスタマイズ[デモ]