レポートの読み込み

setReportメソッドを使用すると、特定のレポートをWebデザイナコンポーネントのインスタンスに読み込むことができます。このメソッドは、アプリケーション内でアクセス可能なURL（setReport({<id: URL>})）またはレポート定義オブジェクト（setReport({definition: <ReportDefinition>})）のいずれかを受け取ります。また、setReportメソッドに渡されるオブジェクトには、レポートのわかりやすい名前を示すdisplayNameプロパティを含めることができます。idプロパティの値は、setReport({<id: URL>})フォームのURLと一致するが、setReport({definition: <ReportDefinition>})フォームの引数とともに渡すこともできます。このトピックでは、いくつかの一般的なシナリオについて説明しています。

最初に表示されるレポートを設定する

Webデザイナコンポーネントのインスタンスは、既定で空白のRDLレポートを開きます。この動作を変更するには、Webデザイナコンポーネントを初期化した直後にsetReportメソッドを呼び出します。様々なアプリケーションでWebデザイナコンポーネントを初期化する方法については、Webデザイナコンポーネントの組み込みを参照してください。以下は、Reactアプリケーションで最初に表示されたレポートを設定するサンプルです。React、Angular、Vue、およびPureJSアプリケーションの完全な実装例については、デモを参照してください。

import React from "react";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";

const initDesigner = (designerHostSelector) => {
  const designer = new ReportDesigner(designerHostSelector);
  // 最初に表示されるレポートとしてcompany-templateを設定します。
  designer.setReport({ id: "/reports/company-template.rdlx-json" });
};

export const DesignerHost = () => {
  React.useEffect(() => initDesigner("#designer-host"), []);
  return <div id="designer-host"></div>;
};

［新規作成］ボタンを有効にする

Webデザイナコンポーネントでは、ツールバーに［新規作成］ボタンが含まれています。ただし、これは既定で非表示になっています。このボタンを有効にするには、コードでWebデザイナコンポーネントのインスタンスに対してonCreateアクションハンドラを設定する必要があります。詳細については、アクションハンドラを参照してください。onCreateハンドラは、レポートリンクまたはレポート定義のいずれかに解決されるPromiseを返す必要があります。これらのオブジェクトの構造は、上記に説明したsetReportの引数と同じです。以下は、ReactアプリケーションでonCreateハンドラを使用するサンプルです。React、Angular、Vue、およびJavaScriptアプリケーションの実装例については、デモを参照してください。

import React from "react";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";

const initDesigner = (designerHostSelector) => {
  const designer = new ReportDesigner(designerHostSelector);
  designer.setActionHandlers({
    onCreate: function () {
      return Promise.resolve({ id: "/reports/company-template.rdlx-json" });
    },
  });
};

export const DesignerHost = () => {
  React.useEffect(() => initDesigner("#designer-host"), []);
  return <div id="designer-host"></div>;
};

［開く］ボタンを有効にする

Webデザイナコンポーネントでは、ツールバーに［開く］ボタンが含まれています。ただし、これは既定で無効になっています。このボタンを有効にするには、コードでWebデザイナコンポーネントのインスタンスに対してonOpenアクションハンドラを設定する必要があります。詳細については、アクションハンドラを参照してください。onOpenハンドラは、レポートリンクまたはレポート定義のいずれかに解決されるPromiseを返す必要があります。これらのオブジェクトの構造は、上記に説明したsetReportの引数と同じです。React、Angular、Vue、およびJavaScriptアプリケーションの完全な実装例については、デモを参照してください。

UIイベントに応じてレポートを読み込む

アプリケーションでは、setReportメソッドを使用して、任意の時点でレポートを読み込むことができます。以下は、ReactアプリケーションでWebデザイナコンポーネントの外部にあるボタンのクリックイベントハンドラでsetReportメソッドを呼び出すサンプルです。React、Angular、Vue、およびJavaScriptアプリケーションの完全な実装例については、デモを参照してください。

import React from "react";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";

export const DesignerHost: React.FC = () => {
  const designerRef = React.useRef<ReportDesigner | undefined>();
  React.useEffect(() => {
    designerRef.current = new ReportDesigner("#designer-host");
  }, []);
  const resetDesigner = (reportId: string) => {
    designerRef.current?.setReport({ id: reportId });
  };
  return (
    <Fragment>
      <button onClick={() => resetDesigner("/reports/company-template.rdlx-json")}>
        Set New Report
      </button>
      <div id="designer-host"></div>
    </Fragment>
  );
};

レポートの読み込み

最初に表示されるレポートを設定する

［新規作成］ボタンを有効にする

［開く］ボタンを有効にする

UIイベントに応じてレポートを読み込む

関連トピック