レポートパーツとDesignerで帳票開発を効率化する

第3回

レポートパーツで共通部品を作成する

　帳票の種類が増えると、会社名・住所・ロゴといった共通要素を帳票ごとに作り直す問題が出てきます。ActiveReportsJSのレポートパーツ機能を使うと、これらの共通要素をライブラリ化して再利用できます。

レポートパーツの作成手順

　レポートパーツは、Designer上で作成します。共通ヘッダー（会社名・住所・電話番号）を例に、作成手順を説明します。

1. Designerで新規レポートを作成する
2. TextBoxを配置して、会社名（16pt）、住所（9pt）、電話番号（9pt）を縦に並べる
3. 配置した要素をすべて選択し、右クリックメニューから「レポートパーツの作成」を選ぶ
4. 右ペインの「レポートパーツ」タブで表示名を設定する
5. 「名前を付けて保存」でライブラリファイルとして保存する

　図3は、レポートパーツを作成した後のDesigner画面です。右ペインに「レポートパーツ」タブが表示され、パーツの表示名を設定できます。

図3：Designerでレポートパーツを作成

ライブラリの読み込み

　保存したレポートパーツライブラリは、Designerの初期化時にsetReportPartsLibrariesで読み込みます（リスト5）。

［リスト5］src/components/reports/ReportDesigner.tsx（レポートパーツライブラリ設定）

// レポートパーツライブラリを設定（ファイルが存在する場合のみ）
// HEADリクエストでライブラリファイルの存在を確認
const libRes = await fetch("/reports/parts-library.rdlx-json",
  { method: "HEAD" });
// ファイルが存在する場合のみライブラリとして登録
if (libRes.ok) {
  await designer.setReportPartsLibraries([
    {
      id: "/reports/parts-library.rdlx-json",
      name: "CommonParts",
      displayName: "共通パーツ",
    },
  ]);
}

　ライブラリを設定すると、Designerの左パネルの「ライブラリ」タブから、登録されたパーツを帳票上にドラッグ&ドロップで配置できるようになります。共通ヘッダーを複数の帳票で統一したい場合に便利です。

　図4は、Designerの「ライブラリ」タブを開いた状態です。「共通パーツ」の下に登録されたパーツが一覧表示され、帳票上にドラッグ＆ドロップで配置できます。

図4：Designerのライブラリタブに共通パーツが表示された状態

マスターレポートで帳票テンプレートを管理する

　レポートパーツが「部品の再利用」を実現する機能だとすると、マスターレポートは「テンプレートの共通化」を実現する機能です。マスターレポートを使うと、共通レイアウトをベースに新規帳票を効率的に作成できます。

マスターレポートへの変換

　既存のレポートをマスターレポートに変換するには、Designerの「レポート」タブから「マスターレポートに変換」を選びます。変換後、ツールバーに「エリアの追加」ボタンが表示され、レポートエリア（コンテンツプレースホルダ）を定義できるようになります。

　図5は、受発注明細レポートをマスターレポートに変換した画面です。

図5：マスターレポートに変換した画面

マスターレポートの保存と利用

　マスターレポートを保存する際は、拡張子を.rdlx-json-masterにする必要があります。通常の.rdlx-jsonで保存すると、派生レポート作成時にDecodingErrorが発生します。

　マスターレポートをベースに新規レポートを作成するには、createReportにmasterReportIdを指定します（リスト6）。

［リスト6］マスターレポートベースの新規レポート作成

// マスターレポートをベースにした新規レポートを作成
await designer.createReport({
  reportType: "CPL",
  masterReportId: "/reports/invoice-template.rdlx-json-master",
});

　派生レポートでは、マスターレポートのレイアウトが読み取り専用で表示され、レポートエリア内のみ編集可能になります。請求書・納品書・注文書のように共通レイアウトを持つ帳票群を管理する際に有効です。

　図6は、マスターレポートをベースに作成した派生レポートをDesignerで開いた状態です。右側のプロパティパネルに「マスターレポート」フィールドが表示され、マスター部分がグレーアウトして読み取り専用になっていることが確認できます。

図6：派生レポートをDesignerで開いた状態