ActiveReportsJSとWijmoを使って業務システムへ帳票機能を組み込む

第2回

　前回はNext.jsアプリケーションにWijmoとActiveReportsJS Viewerを組み込み、仮データを使ってUIの表示を確認しました。今回は、業務データを帳票に反映する「データバインド」の仕組みと、WijmoコンポーネントからActiveReportsJSへデータを連携させるパターンを解説します。

対象読者

• Next.jsで業務システムを開発している方
• 帳票機能の組み込みを検討している方
• ActiveReportsJSやWijmoに興味がある方

前提環境

　筆者の検証環境は以下の通りです。

• macOS Tahoe 16.1
• Node.js 25.2.1
• npm 11.6.2
• Next.js 16.1.3
• React 19.2.3
• Wijmo 5.20252.44
• ActiveReportsJS 6.0.1
• Firebase 12.8.0

はじめに

　前回は、Next.js + Firebase + Wijmo + ActiveReportsJSの4つの技術スタックを組み込み、FlexGridやTreeViewといったWijmoコンポーネントと、ActiveReportsJS Viewerによる基本的な帳票表示を確認しました。ただし、データは仮のモックデータを使い、帳票にはまだ業務データが反映されていない状態でした。

　今回は、データバインドの仕組みを理解した上で、以下の2つを実現します。

1. 業務データをActiveReportsJSの帳票に反映する（データバインド）
2. WijmoのFlexGridで選択したデータを帳票に連携する（Wijmo → ActiveReportsJS連携）

　これにより、UIで操作した内容がそのまま帳票に反映される、実践的な業務システムの姿を構築します。

ActiveReportsJSのデータバインド

　ActiveReportsJSでJSONデータを帳票に反映するには、「データソース（DataSource）」と「データセット（DataSet）」という2つの概念を理解する必要があります。まずDesignerを使ってこれらの概念と設定手順を確認し、続いてプログラムから実行時にデータをバインドする実装を見ていきます。

Designerでのデータソース設定

　ActiveReportsJS Designerを使って、データソースとデータセットを設定しましょう。
　Designerのデータタブを開き、データソース右側の「+追加」アイコンをクリックすると、データソース編集ダイアログが表示されます（図1）。ダイアログで以下を設定します。

• 名前：ProductsDataSource（任意）
• 種類：JSON
• 形式：埋め込み

　「埋め込み」形式は、実行時にプログラムからデータを渡す際に使用します。サンプルとなるJSONデータをあらかじめ入力しておくことで、設計時にフィールド構造を確認できます。ここでは、サンプルプロジェクトに含まれている「products.json」を入力しています。

図1：Designerのデータソース設定ダイアログ

　次に、データソース名横の「+」アイコンをクリックします（図2）。

図2：データソース名横の「+」アイコン

　データセットダイアログが表示されるので、以下のように設定します（図3）。

• 名前：Products（任意）
• クエリ（JSONPath式）：$.*（配列のルートから各要素を取得する指定）

　「検証」ボタンをクリックすると、サンプルデータからフィールドが自動検出されます。code、name、price、stock、unitといったフィールドがデータセットに追加されます。フィールドをレポートアイテムにバインドする際はDataFieldを指定します（Valueを直接指定するとデータがバインドされず、フィールド名がそのまま表示されてしまいます）。

図3：Designerのデータセット設定ダイアログ

実行時のデータバインド

　ReportViewerWithDataコンポーネントでは、レポート定義を取得した後にConnectStringを書き換えることで、任意のJSONデータをレポートにバインドしています（リスト1）。

［リスト1］src/components/reports/ReportViewerWithData.tsx（データバインド部分）

// レポート定義を取得
const response = await fetch(reportUri);
const reportDef = await response.json();

// データソースにデータをバインド
if (reportDef.DataSources && reportDef.DataSources.length > 0) {
  reportDef.DataSources[0].ConnectionProperties.ConnectString =
    "jsondata=" + JSON.stringify(data);
}

// Viewer を動的インポートして初期化
const ArViewer = await import("@mescius/activereportsjs/reportviewer");
if (!viewerRef.current) {
  viewerRef.current = new ArViewer.Viewer(hostRef.current);
}

// レポートを開く
await viewerRef.current.open(reportDef);

　"jsondata="プレフィックスに続けてJSON文字列を設定することで、外部ファイルではなくプログラムから渡したデータをレポートに反映できます。レポート定義のJSON取得 → ConnectString書き換え → Viewerでオープン、という3ステップがデータバインドの基本フローです。

　図3は、この仕組みで商品データをバインドした帳票の表示例です。

図4：データバインドされた商品一覧帳票