FlexGrid選択行から帳票を表示する
ここからは、WijmoコンポーネントとActiveReportsJSを連携させるパターンを解説します。まず、FlexGridで選択した受発注データを帳票として表示するパターンです。
データフロー
連携のデータフローは以下の通りです。
FlexGrid（行選択） → React State → ActiveReportsJS Viewer
FlexGridのselectionChangedイベントで選択行のデータを取得し、Reactのstateに保存します。「帳票を表示」ボタンのクリック時に、stateに保持したデータをフラット化してActiveReportsJS Viewerにバインドします。
実装
FlexGridと帳票Viewerを左右に配置し、受発注データを選択すると右側に帳票が表示されるコンポーネントを作成します（リスト5）。
export default function OrderReportView({ orders }: OrderReportViewProps) {
const [selectedOrder, setSelectedOrder] = useState<SerializedOrder | null>(null);
const viewerHostRef = useRef<HTMLDivElement>(null);
const viewerRef = useRef<any>(null);
// FlexGridの行選択イベント
const handleSelectionChanged = (sender: any) => {
…中略（sender.collectionView.currentItemからorderを特定してsetSelectedOrder）…
};
// レポートを表示
const handleShowReport = useCallback(async () => {
if (!selectedOrder || !viewerHostRef.current) return;
…中略（レポート定義取得）…
// 選択された受発注データをフラット化してバインド
const flatData = flattenOrder(selectedOrder);
reportDef.DataSources[0].ConnectionProperties.ConnectString =
"jsondata=" + JSON.stringify(flatData);
…中略（Viewerの初期化とレポートオープン）…
}, [selectedOrder]);
return (
<div className="flex gap-6">
<div className="flex-1">
<FlexGrid itemsSource={view} selectionChanged={handleSelectionChanged}
isReadOnly={true} selectionMode={2}>
…中略（FlexGridColumn定義）…
</FlexGrid>
<button onClick={handleShowReport} disabled={!selectedOrder}>帳票を表示</button>
</div>
<div className="flex-1">
<div ref={viewerHostRef} style={{ height: "500px" }} />
</div>
</div>
);
}
selectionChangedイベントでは、sender.collectionView.currentItemで現在選択されている行のデータオブジェクトを取得できます。取得した受発注データをflattenOrderでフラット化し、レポート定義のConnectStringへ設定すると、帳票に反映されます。
図6は、FlexGridで受発注を選択した状態の画面です。
まとめ
本記事では、ActiveReportsJSのデータバインドの仕組みを解説し、WijmoのFlexGridと連携させる実践的なパターンを実装しました。ポイントを振り返ります。
-
データバインド：レポート定義の
ConnectStringに"jsondata=" + JSON.stringify(data)を設定する - Server Component連携：データ取得はServer Component、UI表示はClient Componentに分離する
-
ネストデータの伝票表現：
Order + OrderItem[]をフラット化し、=First()でヘッダーを表示する -
Wijmo連携：
selectionChangedイベントでReact Stateを更新し、Viewerにバインドする単方向データフロー
なお、サンプルコードにはTreeViewとFlexGridを組み合わせた複合パターンも含まれているので、あわせてご参照ください。次回は、ActiveReportsJSのレポートパーツとマスターレポートを活用して帳票の共通部品化・テンプレート管理を行い、さらにActiveReportsJS Designerを組み込んで「現場担当者が自分で帳票レイアウトを修正できる」仕組みを実現します。
