レポートの読み込み
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 "@mescius/activereportsjs/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 "@mescius/activereportsjs/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 "@mescius/activereportsjs/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>
);
};