これからはじめるActiveReports帳票~ページレポート実践編(2)

.NET帳票コンポーネント「ActiveReports for .NET(アクティブレポート)」の使い方を解説する、「これからはじめるActiveReports帳票」。

前回のページレポート実践編(1)では、ActiveReports 20.0J SP1への移行と、複数ページレイアウト帳票を作成するためのレポートファイルやデータソース/データセットの準備を行いました。

今回はその後編として、建設業の見積書を題材に、表紙・集計・明細で構成される複数ページレイアウト帳票を作成します。実際の業務で利用される見積書では、表紙に見積概要を掲載し、続くページで金額の内訳や明細を表示するなど、ページごとに異なる役割とレイアウトが求められます。

ページレポートでは、1つの帳票に複数のページレイアウトを持たせることができ、ページごとに異なるデザインを適用できます。本記事では、ページレイアウトのグループ化やTableコントロールの集計・グループ化機能を活用しながら、表紙ページ・集計ページ・明細ページから構成される実践的な見積書帳票を作成していきます。

ページレポート実践編(2)

帳票レイアウト作成の流れ

今回作成する見積書帳票は、次の3つのページレイアウトで構成されます。

  • 表紙ページ:御見積書のタイトル、発注者名、工事概要、お見積金額を表示します。
  • 集計ページ:工事区分ごとの見積金額の内訳と合計金額を表示します。
  • 明細ページ:工事区分ごとの明細一覧を表示します。

前回作成した「MultiPageReport.rdlx」を開き、これら3つのレイアウトを順に作成していきます。それぞれのページは、見積書ごとに繰り返し出力されるよう、共通のグルーピング設定を適用します。

表紙ページの作成

まずは、見積書の1ページ目にあたる表紙ページを作成します。

新規作成した「MultiPageReport.rdlx」を開くと、デフォルトで1つのページレイアウトが用意されています。このページを表紙として利用します。表紙のデザインは次のとおりです。

完成した表紙ページのデザイン

ページのグルーピング設定

まず、見積書ごとに表紙・集計・明細のセットを繰り返し出力するため、ページのプロパティ設定ダイアログでグルーピングと並べ替えの設定を行います。

レポートエクスプローラーから「ページ1」を選択した状態で、プロパティウィンドウ下部の「プロパティ設定ダイアログ」リンクをクリックします。表示される「ページ」ダイアログの全般でデータセット名「estimates」を設定します。

FixedLayoutのDataSetNameとGroupingを設定した画面

続いて、左メニューの「グループ化」を選択し、「全般」タブのグループ化の条件(式)に=Fields!estimateNo.Valueを設定します。

ページのグループ化設定

さらに、「レイアウト」タブの「グループ毎にページ番号を設定する」にチェックを入れます。これにより、後述の「ページ番号の配置」で利用するPageNumberInSectionTotalPagesInSectionが、見積書ごとに独立して1からカウントされるようになります。

グループ毎にページ番号を設定

最後に、左メニューの「並べ替え」を選択し、右上の[+]ボタンで並べ替え条件を追加します。「式」に=[estimateNo]を指定し、方向は「昇順」のまま「OK」で確定します。これにより、見積番号順に見積書が出力されます。

ソート順の設定

※ グループ化の設定はレポート全体で共通のため、いずれか1つのページレイアウトで設定を変更すると、他のすべてのページレイアウトにも同じ設定が適用されます。集計ページや明細ページを追加した際に、あらためて設定する必要はありません。

タイトルと発注者名の配置

続いて、レイアウトのデザインを行っていきます。

タイトルと下線付きの発注者名を配置した表紙

まず最初に、ページの中央上部に「御見積書」のタイトルを配置します。ツールボックスから「TextBox」をドラッグして配置し、値に御見積書を入力します。文字が指定した幅いっぱいに均等に配置されるように、TextBoxのTextAlignTextJustifyプロパティを設定します。

次に、タイトルの下に発注者名を配置します。発注者名はestimatesデータセットのclientIdをキーに、clientsマスタから取得します。TextBoxを配置し、次の式を値に設定します。

=Lookup(Fields!clientId.Value, Fields!clientId.Value, Fields!name.Value, "clients") & " 様"

Lookup関数は、指定したキーと一致する最初のレコードから、対応する値を取得する関数です。ここでは、estimatesclientIdをキーに、clientsマスタから該当する発注者名を取得しています。

発注者名を目立たせるため、BorderStyleプロパティを使用して上下に罫線を表示します。

各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)

タイトルTextBox(御見積書)
プロパティ
Value御見積書
Location.Left2cm
Location.Top4cm
Size.Width8cm
Size.Height2cm
Font.Nameメイリオ
Font.Size36pt
TextAlignJustify
TextJustifyDistributeAllLines
WrapModeNoWrap
発注者名TextBox
プロパティ
Value=Lookup(Fields!clientId.Value, Fields!clientId.Value, Fields!name.Value, "clients") & " 様"
Location.Left6cm
Location.Top0cm
Size.Width16cm
Size.Height2cm
Font.Nameメイリオ
Font.Size28pt
BorderStyle.TopSolid
BorderStyle.BottomSolid

工事情報の配置

工事名・工事場所・工期を配置した表紙

タイトルの下に、工事名・工事場所・工期の3項目を配置します。

まず、左側にラベル用のTextBoxを3つ配置し、それぞれ工事名工事場所工期と入力します。ラベルは項目名の文字数が異なるため、均等割付を設定して幅を揃えます。

続いて、ラベルの右側に値用のTextBoxを配置し、estimatesデータセットから工事情報を取得します。

工事名と工事場所は、estimatesのフィールドをそのまま値に設定します。

  • 工事名
    =Fields!projectName.Value
  • 工事場所
    =Fields!constructionSite.Value

工期は、開始日と終了日をそれぞれ「yyyy年MM月dd日」の書式に整形し、「~」でつなげて表示します。Format関数を使って、次の式を設定します。

=Format(Fields!constructionPeriodStart.Value, "yyyy年MM月dd日") & "~" & Format(Fields!constructionPeriodEnd.Value, "yyyy年MM月dd日")

Format関数は、値を指定した書式に整形する関数です。日付項目に対してyyyy年MM月dd日の書式を指定することで、2026-09-01のようなISO形式の日付を2026年09月01日のように整形できます。

各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)

工事名ラベルTextBox
プロパティ
Value工事名
Location.Left1cm
Location.Top11cm
Size.Width5cm
Size.Height1cm
Font.Nameメイリオ
Font.Size16pt
TextAlignJustify
TextJustifyDistributeAllLines
工事場所ラベルTextBox
プロパティ
Value工事場所
Location.Left1cm
Location.Top12cm
Size.Width5cm
Size.Height1cm
Font.Nameメイリオ
Font.Size16pt
TextAlignJustify
TextJustifyDistributeAllLines
工期ラベルTextBox
プロパティ
Value工期
Location.Left1cm
Location.Top13cm
Size.Width5cm
Size.Height1cm
Font.Nameメイリオ
Font.Size16pt
TextAlignJustify
TextJustifyDistributeAllLines
工事名TextBox
プロパティ
Value=Fields!projectName.Value
Location.Left7cm
Location.Top11cm
Size.Width8cm
Size.Height1cm
Font.Nameメイリオ
Font.Size16pt
ShrinkToFitTrue
工事場所TextBox
プロパティ
Value=Fields!constructionSite.Value
Location.Left7cm
Location.Top12cm
Size.Width8cm
Size.Height1cm
Font.Nameメイリオ
Font.Size16pt
ShrinkToFitTrue
工期TextBox
プロパティ
Value=Format(Fields!constructionPeriodStart.Value, "yyyy年MM月dd日") & "~" & Format(Fields!constructionPeriodEnd.Value, "yyyy年MM月dd日")
Location.Left7cm
Location.Top13cm
Size.Width8cm
Size.Height1cm
Font.Nameメイリオ
Font.Size16pt
WrapModeNoWrap

お見積金額の配置

グレー帯で強調されたお見積金額

工期の下に、税込みのお見積金額を表示します。金額はestimateDetailsデータセットから該当する見積の明細を絞り込み、Sum関数で合計したうえで、消費税10%を加えて算出します。

「お見積金額」のラベルTextBoxと金額TextBoxをそれぞれ配置し、金額TextBoxのValueに次の式を設定します。

=Format(Sum(LookupSet(Fields!estimateNo.Value, Fields!estimateNo.Value, Fields!amount.Value, "estimateDetails")) * 1.1, "¥#,##0") + "(税込)"

LookupSet関数は、指定したキーに一致する複数の値を配列として取得する関数です。ここでは、現在の見積書のestimateNoをキーに、estimateDetailsから該当する明細のamountをすべて取得しています。取得した金額をSumで合計し、1.1倍することで消費税10%を加算しています。

金額を強調するため、TextBoxの背景にShapeコントロールを配置し、薄いグレーで塗りつぶします。ShapeコントロールのShapeStyleプロパティにRoundRect(角丸長方形)を指定することで、角に丸みを付けられ、帳票の印象を柔らかくできます。

各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)

ラベルTextBox(お見積金額)
プロパティ
Valueお見積金額
Location.Left1cm
Location.Top15cm
Size.Width5cm
Size.Height1cm
Font.Nameメイリオ
Font.Size18pt
Font.WeightBold
TextAlignJustify
TextJustifyDistributeAllLines
金額TextBox
プロパティ
Value=Format(Sum(LookupSet(Fields!estimateNo.Value, Fields!estimateNo.Value, Fields!amount.Value, "estimateDetails")) * 1.1, "¥#,##0") + "(税込)"
Location.Left7cm
Location.Top15cm
Size.Width8cm
Size.Height1cm
Font.Nameメイリオ
Font.Size18pt
Font.WeightBold
TextAlignRight
BackgroundColorTransparent
背景Shape
プロパティ
Location.Left6.8cm
Location.Top14.8cm
Size.Width8.4cm
Size.Height1.4cm
ShapeStyleRoundRect
RoundingRadius.Default5pt
BackgroundColorLightGray
BorderStyleSolid
BorderWidth0.5pt

発行日、有効期限、見積番号の配置

右下に配置された発行日・有効期限・見積番号

続いて、ページ右下に発行日・有効期限・見積番号の3項目を配置します。

値はestimatesデータセットのフィールドをそのまま設定します。発行日と有効期限は日付項目のため、TextBoxのFormatプロパティにyyyy年MM月dd日を指定して書式を整えます。
※ 工期のように複数のフィールドを結合する必要がない場合は、Format関数ではなくTextBoxのFormatプロパティを使うと、式をシンプルに保てます。

最後に、3項目をひとつのブロックとして見せるため、背景にShapeコントロールを配置して枠で囲みます。ShapeStyleにはRoundRectを指定し、枠線のみを表示します。

各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)

発行日TextBox
プロパティ
Value=Fields!issueDate.Value
Location.Left10cm
Location.Top18cm
Size.Width4cm
Size.Height0.6cm
Font.Nameメイリオ
Font.Size11pt
Formatyyyy年MM月dd日
有効期限TextBox
プロパティ
Value=Fields!expiryDate.Value
Location.Left12cm
Location.Top18.6cm
Size.Width4cm
Size.Height0.6cm
Font.Nameメイリオ
Font.Size11pt
Formatyyyy年MM月dd日
見積番号TextBox
プロパティ
Value=Fields!estimateNo.Value
Location.Left12cm
Location.Top19.2cm
Size.Width4cm
Size.Height0.6cm
Font.Nameメイリオ
Font.Size11pt
背景Shape
プロパティ
Location.Left10cm
Location.Top17.8cm
Size.Width6.2cm
Size.Height2.2cm
ShapeStyleRoundRect
RoundingRadius.Default8pt
BorderStyleSolid
BorderWidth0.5pt

受注者情報の配置

右下に配置された発行日・有効期限・見積番号

ページ右下に、受注者情報として会社名・郵便番号・住所・電話番号・担当者の5項目を配置します。

値はLookup関数を使ってマスタから取得します。会社名・郵便番号・住所・電話番号の4項目はcontractorsマスタから、担当者はmanagersマスタから、それぞれcontractorIdおよびmanagerIdをキーに取得します。

郵便番号・電話番号・担当者はラベルを別途配置する代わりに、値の先頭に「〒」「TEL 」「担当 」の文字列を連結して表示します。

各TextBoxのValueには、次のように式を設定します。

会社名TextBox
=Lookup(Fields!contractorId.Value, Fields!contractorId.Value, Fields!name.Value, "contractors")

郵便番号TextBox
="〒" & Lookup(Fields!contractorId.Value, Fields!contractorId.Value, Fields!postalCode.Value, "contractors")

住所TextBox
=Lookup(Fields!contractorId.Value, Fields!contractorId.Value, Fields!address.Value, "contractors")

電話番号TextBox
="TEL " & Lookup(Fields!contractorId.Value, Fields!contractorId.Value, Fields!phone.Value, "contractors")

担当者TextBox
="担当 " & Lookup(Fields!managerId.Value, Fields!managerId.Value, Fields!name.Value, "managers")

最後に、5項目をひとつのブロックとして見せるため、背景にShapeコントロールを配置して枠で囲みます。発行日ブロックと同じく、ShapeStyleにはRoundRectを指定し、枠線のみを表示します。

各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)

会社名TextBox
プロパティ
Value上記コードブロック参照
Location.Left10cm
Location.Top20.95cm
Size.Width6cm
Size.Height0.75cm
Font.Nameメイリオ
Font.Size12pt
郵便番号TextBox
プロパティ
Value上記コードブロック参照
Location.Left10cm
Location.Top21.7cm
Size.Width6cm
Size.Height0.75cm
Font.Nameメイリオ
Font.Size12pt
住所TextBox
プロパティ
Value上記コードブロック参照
Location.Left10cm
Location.Top22.45cm
Size.Width6cm
Size.Height0.75cm
Font.Nameメイリオ
Font.Size12pt
電話番号TextBox
プロパティ
Value上記コードブロック参照
Location.Left10cm
Location.Top23.2cm
Size.Width6cm
Size.Height0.75cm
Font.Nameメイリオ
Font.Size12pt
担当者TextBox
プロパティ
Value上記コードブロック参照
Location.Left10cm
Location.Top23.95cm
Size.Width6cm
Size.Height0.75cm
Font.Nameメイリオ
Font.Size12pt
背景Shape
プロパティ
Location.Left10cm
Location.Top20.8cm
Size.Width6.2cm
Size.Height3.9cm
ShapeStyleRoundRect
RoundingRadius.Default8pt
BorderStyleSolid
BorderWidth0.5pt

集計ページの作成

続いて、2ページ目にあたる集計ページを作成します。集計ページには、工事区分ごとの見積金額の内訳と合計金額を表示します。

集計ページのデザインは次のとおりです。

工事区分ごとの内訳と合計金額を表示した集計ページ

新しいページを作成するため、レポートに2つ目のページレイアウトを追加します。デザイナ画面下部のタブの隣にある「新規」ボタンをクリックすると、新しいページレイアウトが追加されます。

ヘッダの配置

工事名・発注者名・見積番号・お見積内訳を配置した集計ページのヘッダ

集計ページの上部に、この見積書がどの案件のものかを示すヘッダ情報を配置します。ヘッダには、工事名・発注者名・見積番号の3項目に加えて、「御見積書」のタイトルとテーブルの見出しとなる「お見積内訳」を配置します。

工事名と発注者名は、表紙ページと同じ式を利用します。工事名はestimatesのフィールドをそのまま参照し、発注者名はLookup関数でclientsマスタから取得します。

また、上部の背景としてShapeコントロールを配置し、薄いグレー(WhiteSmoke)で塗りつぶすことで、ヘッダの範囲を視覚的に区切ります。

各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)

御見積書ラベルTextBox
プロパティ
Value御見積書
Location.Left0cm
Location.Top0cm
Size.Width4cm
Size.Height1cm
Font.Nameメイリオ
Font.Size16pt
TextAlignJustify
TextJustifyDistributeAllLines
WrapModeNoWrap
工事名TextBox
プロパティ
Value=Fields!projectName.Value
Location.Left2cm
Location.Top1cm
Size.Width10cm
Size.Height1cm
Font.Nameメイリオ
Font.Size16pt
BorderStyle.BottomNone
発注者名TextBox
プロパティ
Value=Lookup(Fields!clientId.Value, Fields!clientId.Value, Fields!name.Value, "clients") & " 様"
Location.Left2cm
Location.Top2cm
Size.Width10cm
Size.Height1cm
Font.Nameメイリオ
Font.Size16pt
BorderStyle.BottomNone
見積№ラベルTextBox
プロパティ
Value見積№
Location.Left10cm
Location.Top0cm
Size.Width2cm
Size.Height1cm
Font.Nameメイリオ
Font.Size12pt
TextAlignRight
見積番号TextBox
プロパティ
Value=Fields!estimateNo.Value
Location.Left12cm
Location.Top0cm
Size.Width4cm
Size.Height1cm
Font.Nameメイリオ
Font.Size12pt
Formatd
お見積内訳ラベルTextBox
プロパティ
Valueお見積内訳
Location.Left0cm
Location.Top4cm
Size.Width4cm
Size.Height1cm
Font.Nameメイリオ
Font.Size16pt
TextAlignJustify
TextJustifyDistributeAllLines
WrapModeNoWrap
背景Shape
プロパティ
Location.Left0cm
Location.Top0cm
Size.Width16cm
Size.Height3cm
ShapeStyleRoundRect
RoundingRadius.Default10pt
BackgroundColorWhiteSmoke
BorderStyleNone

Tableコントロールの配置と設定

お見積内訳の下に配置したTableコントロールと、ヘッダ・詳細・フッタの構成

続いて、工事区分ごとの見積金額を集計するTableコントロールを配置します。Tableは、データセットのレコードを繰り返し表示するためのコントロールで、ヘッダ行・詳細行・フッタ行の3つの領域で構成されます。

ActiveReports for .NET 20.0J からは、Tableコントロールを配置すると自動的に「Tableの作成」ダイアログが表示され、フィールドの選択・列の設定・テーマの適用などをまとめて設定できるようになりました。従来はコントロール配置後にプロパティを個別に設定する必要がありましたが、この機能によりTableの初期構成を対話形式でスムーズに行えます。

ツールボックスから「Table」をお見積内訳のタイトル下にドラッグ&ドロップで配置すると、「Tableの作成」ダイアログが表示されます。次の動画のように、フィールドの選択から列の設定、テーマの設定までを順に指定し、Tableを作成します。

それぞれの手順は以下のとおりです。

  1. フィールドの選択:クエリにestimateDetailsを指定し、categoryamountのフィールドにチェックを入れます。
  2. グループの設定:グループ化は後のセクションで個別に設定するため、ここでは何も追加せずに「次へ」で進みます。
  3. 列の設定(category)category列のヘッダラベルや並べ替えなどを設定します。今回はデフォルトのまま進みます。
  4. 列の設定(amount)amount列の集計に「合計」を、表示形式に「通貨」を指定します。これにより、金額列に工事区分ごとの合計金額が集計行として表示されます。
  5. テーマの設定:今回は独自の書式を設定するため、「テーマ/スタイルを適用しない」にチェックを入れて「作成」ボタンをクリックします。

ダイアログを完了すると、指定した内容に基づいてTableが自動的に生成されます。生成直後のTableにはデータセット名(Estimate Details)のタイトル行と英語のヘッダが付いています。タイトル行はコンテキストメニューの「行を削除」で削除し、ヘッダの文字を「工事区分」「金額(円)」に変更します。

あわせて、金額列の表示形式(Formatプロパティ)を、Table作成ダイアログで指定した通貨の初期値c2(通貨・小数2桁)からc0(通貨・整数)に変更し、金額を整数で表示するよう調整します。

Tableの列幅・行の高さ、およびヘッダ行の各TextBoxの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)。

Table本体
プロパティ
DataSetNameestimateDetails
Location.Left2cm
Location.Top6cm
FixedSize.Width12.6cm
FixedSize.Height14.6cm
Size.Width12.6cm
Size.Height4cm
Font.Nameメイリオ
Font.Size16pt
列と行のサイズ
プロパティ
工事区分列 Width6.2cm
金額列 Width6.4cm
行(TableRow)Height0.8cm
ヘッダ行「工事区分」TextBox
プロパティ
Value工事区分
Font.Nameメイリオ
Font.Size16pt
TextAlignCenter
BorderStyle.TopNone
BorderStyle.BottomSolid
BorderStyle.LeftNone
BorderStyle.RightSolid
BorderWidth0.5pt
ヘッダ行「金額(円)」TextBox
プロパティ
Value金額(円)
Font.Nameメイリオ
Font.Size16pt
TextAlignCenter
BorderStyle.TopNone
BorderStyle.BottomSolid
BorderStyle.LeftSolid
BorderStyle.RightNone
BorderWidth0.5pt

工事区分ごとに詳細行をグループ化

続いて、Tableを工事区分(category)ごとにグループ化します。ここまでの手順では、Tableの作成ダイアログで表示列と集計を指定しましたが、そのままでは詳細行に明細レコードが1件ずつ表示された状態です。詳細行をcategoryでグループ化することで、明細レコードはcategory単位にグルーピングされた状態で出力されるようになります。

詳細行のグループ化を行うには、Tableを選択した状態で、プロパティウィンドウ下部の「プロパティ設定ダイアログ」リンクをクリックします。表示される「Table – 詳細行のグループ化」ダイアログの左メニューから「詳細行のグループ化」を選択し、「全般」タブの「グループ化の条件」の式に=Fields!category.Valueを指定します。

プロパティ設定ダイアログの「詳細行のグループ化」で式にFields!category.Valueを指定

グループ化はされましたが、amount列に表示されるのは先頭レコードの金額のみとなります。これを工事区分ごとの合計金額として表示するため、amount列の式を=Sum(Fields!amount.Value)に変更します。

続いて、Table作成時に自動追加されたフッタ行を編集して「小計」行として利用し、その下に「消費税(10%)」と「合計金額」の行を追加します。合計金額の行は視覚的に強調するため、背景色をSilverに、フォントをBoldに設定します。

それぞれの行に設定する式は次のとおりです。

フッタ行「小計」の右TextBox
=Sum(Fields!amount.Value)

フッタ行「消費税(10%)」右TextBox
=Sum(Fields!amount.Value) * 0.1

フッタ行「合計金額」右TextBox
=Sum(Fields!amount.Value) * 1.1

各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)

詳細行「工事区分」TextBox
プロパティ
Value=Fields!category.Value
Font.Nameメイリオ
Font.Size16pt
TextAlignLeft
Padding.Left15pt
BorderStyleSolid
BorderWidth0.5pt
詳細行「金額」TextBox
プロパティ
Value=Sum(Fields!amount.Value)
Font.Nameメイリオ
Font.Size16pt
Formatc0
TextAlignRight
Padding.Right5pt
BorderStyleSolid
BorderWidth0.5pt
フッタ行「小計」左TextBox
プロパティ
Value小計
Font.Nameメイリオ
Font.Size16pt
TextAlignLeft
Padding.Left10pt
BackgroundColorWhiteSmoke
BorderStyleSolid
BorderStyle.TopSolid(1.5pt)
BorderWidth0.5pt
フッタ行「小計」右TextBox
プロパティ
Value上記コードブロック参照
Font.Nameメイリオ
Font.Size16pt
Formatc0
TextAlignRight
Padding.Right5pt
BackgroundColorWhiteSmoke
BorderStyleSolid
BorderStyle.TopSolid(1.5pt)
BorderWidth0.5pt
フッタ行「消費税(10%)」左TextBox
プロパティ
Value消費税(10%)
Font.Nameメイリオ
Font.Size16pt
TextAlignLeft
Padding.Left10pt
BackgroundColorWhiteSmoke
BorderStyleSolid
BorderWidth0.5pt
フッタ行「消費税(10%)」右TextBox
プロパティ
Value上記コードブロック参照
Font.Nameメイリオ
Font.Size16pt
Formatc0
TextAlignRight
Padding.Right5pt
BackgroundColorWhiteSmoke
BorderStyleSolid
BorderWidth0.5pt
フッタ行「合計金額」左TextBox
プロパティ
Value合計金額
Font.Nameメイリオ
Font.Size16pt
Font.WeightBold
TextAlignJustify
TextJustifyDistributeAllLines
BackgroundColorSilver
BorderStyleSolid
BorderWidth0.5pt
フッタ行「合計金額」右TextBox
プロパティ
Value上記コードブロック参照
Font.Nameメイリオ
Font.Size16pt
Font.WeightBold
Formatc0
TextAlignRight
Padding.Right5pt
BackgroundColorSilver
BorderStyleSolid
BorderWidth0.5pt

Tableのフィルタ設定

続いて、Tableに表示される明細を、現在の見積書に該当するレコードのみに絞り込みます。表紙のグループ化で解説したとおり、レポート全体はestimateNoで見積書ごとにグループ化されています。ページレイアウトはグループ化された各見積書ごとに繰り返し出力されますが、Tableに設定したestimateDetailsデータセットには3件分すべての明細レコードが含まれているため、そのままではすべての明細が表示されてしまいます。

Tableのフィルタ機能を利用して、現在の見積書のestimateNoと一致するレコードのみを表示するように絞り込みます。

Tableを選択し、プロパティウィンドウの一番下にある「プロパティ設定ダイアログ」リンクをクリックします。表示されるダイアログの左メニューから「フィルタ」を選択し、次の条件を追加します。

  • =Fields!estimateNo.Value
  • 演算子:Equal
  • =Fields!estimateNo.Value
プロパティ設定ダイアログの「フィルタ」タブで見積番号のフィルタを設定

「式」と「値」に同じ=Fields!estimateNo.Valueを指定しますが、Tableの内部(estimateDetails)から見たestimateNoと、レポート全体(estimates)から見たestimateNoを比較しています。この2つが一致するレコード、つまり現在表示中の見積書に紐づく明細のみが、Tableに表示されるようになります。

備考エリアとテーブル外枠の装飾

そのほか、固定表示するコントロールを配置します。集計ページには、次のコントロールを配置します。

  • テーブル外枠のShape:Tableの外側に配置し、Tableのヘッダ行で意図的に消していた罫線をShapeで補完します。
  • 備考エリア:見積書に関する注意事項を表示します。Shapeコントロールで枠を作成し、その中にラベルと本文の2つのTextBoxを配置します。

各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)

外枠のShape
プロパティ
Location.Left2cm
Location.Top5.98cm
Size.Width12.6cm
Size.Height0.99cm
ShapeStyleRoundRect
RoundingRadius.TopLeft5pt
RoundingRadius.TopRight5pt
RoundingRadius.BottomLeft0pt
RoundingRadius.BottomRight0pt
BackgroundColorGainsboro
BorderStyleSolid
BorderWidth0.5pt
備考エリアのShape
プロパティ
Location.Left1cm
Location.Top20.67cm
Size.Width14cm
Size.Height3.2cm
ShapeStyleRoundRect
RoundingRadius.Default8pt
BorderStyleSolid
BorderWidth0.5pt
備考ラベルTextBox
プロパティ
Value備考
Location.Left1.2cm
Location.Top20.78cm
Size.Width1.2cm
Size.Height0.75cm
Font.Nameメイリオ
備考本文TextBox
プロパティ
Value・本見積は上記有効期限内にご発注いただいた場合に有効です。
・工事期間は着工可能日以降となります。
Location.Left1.2cm
Location.Top21.53cm
Size.Width13.4cm
Size.Height2.2cm
Font.Nameメイリオ

明細ページの作成

続いて、3ページ目にあたる明細ページを作成します。明細ページには、工事区分ごとの明細一覧を表示します。

明細ページのデザインは次のとおりです。

集計ページと同様に、デザイナ画面下部のタブの隣にある「新規」ボタンをクリックして、3つ目のページレイアウトを追加します。

工事区分ごとに項目・数量・単位・単価・金額を表示した明細ページのデザイン画面

ヘッダの配置

明細ページの上部に配置するヘッダは、集計ページと同じ構成です。集計ページのヘッダのコントロールをまとめてコピーし、明細ページに貼り付けてください。

貼り付け後、テーブルの見出しとなる「お見積内訳」のTextBoxの値を「お見積明細」に変更します。

Tableコントロールの配置と設定

明細ページには、工事区分ごとの明細を表示するTableコントロールを配置します。基本的な作成手順は集計ページと同じですが、表示する列と書式が異なります。

また、明細ページでは工事区分ごとに列見出しを繰り返し表示するため、ヘッダ行は削除して、後のセクションでグループヘッダ内に列見出しを配置します。

ツールボックスから「Table」をお見積明細のタイトル下にドラッグ&ドロップで配置し、表示される「Tableの作成」ダイアログで、次のように設定します。

  1. フィールドの選択:クエリにestimateDetailsを指定し、itemquantityunitunitPriceamountの5つのフィールドにチェックを入れます。
  2. グループの設定:ここでは何も追加せずに「次へ」で進みます。
  3. 列の設定unitquantityの順序を入れ替えて、「項目」「数量」「単位」「単価」「金額」の順に並べます。あわせて、quantityunitPriceamountの3列は、横位置を「右揃え」、表示形式をそれぞれ「数値」「通貨」「通貨」に設定します。
  4. テーマの設定:「テーマ/スタイルを適用しない」にチェックを入れて「作成」ボタンをクリックします。

ダイアログを完了すると、5列のTableが自動的に生成されます。集計ページと同様にEstimate Detailsのタイトル行を削除し、続けてヘッダ行も削除します。

続いて、Tableの列幅やサイズなどの設定を行います。
各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)

Table本体
プロパティ
DataSetNameestimateDetails
Location.Left1cm
Location.Top5cm
FixedSize.Width18.8cm
FixedSize.Height2.98cm
Size.Width13.84cm
Size.Height2.98cm
Font.Nameメイリオ
列と行のサイズ
プロパティ
項目列 Width4.4cm
数量列 Width2.24cm
単位列 Width1.4cm
単価列 Width2.8cm
金額列 Width3cm
行(TableRow)Height0.75cm

工事区分ごとのグループ化と集計

続いて、Tableに工事区分でのグループ化を追加します。集計ページでは詳細行そのものをグループ化しましたが、明細ページでは詳細行を残したまま、工事区分ごとに表示します。また、グループヘッダに工事区分名の見出しと列見出しを、グループフッタに小計を配置します。

グループの追加

グループを追加するには、Tableを選択した状態で、プロパティウィンドウの一番下にある「プロパティ設定ダイアログ」リンクをクリックします。表示されるダイアログの左メニューから「グループ」を選択し、右上の[+]ボタンをクリックしてグループを追加します。

追加したグループについて、「全般」タブと「レイアウト」タブで次の内容を設定します。

グループダイアログでの設定(全般タブとレイアウトタブ)

グループの設定内容は次の通りです。

  • 全般タブ
    • グループ化の条件(式)=Fields!category.Value
  • レイアウトタブ
    • グループヘッダを含める:チェック
    • グループフッタを含める:チェック
    • 可能な限り1ページに収める:チェック

「可能な限り1ページに収める」にチェックを入れることで、工事区分ごとの明細がページの途中で分断されないよう、可能な限り同じページに表示されるようになります。

[OK]ボタンをクリックすると、Tableにグループヘッダ行とグループフッタ行が追加されます。

グループヘッダの編集

グループヘッダには、工事区分名の見出しと列見出しの2行を配置します。デフォルトで追加されたグループヘッダ行を右クリックし、コンテキストメニューから「上に行を挿入」を選択して2行目を追加します。

Tableのコンテキストメニューから「上に行を挿入」を選択してグループヘッダの2行目を追加

追加した2行に、次のように設定します。

  • 1行目:5つのセルをすべて結合して1つのTextBoxにし、値に="■ " & Fields!category.Valueを設定します。
  • 2行目:詳細行の列見出しとして、それぞれのセルに「項目」「数量」「単位」「単価」「金額」の固定文字を設定します。

各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)

グループヘッダ1行目(結合セル)
プロパティ
Value="■ " & Fields!category.Value
Font.Nameメイリオ
Font.Size12pt
グループヘッダ2行目「項目」TextBox
プロパティ
Value項目
Font.Nameメイリオ
Font.Size12pt
TextAlignCenter
BackgroundColorGainsboro
BorderStyleSolid
BorderWidth0.5pt
グループヘッダ2行目「数量」TextBox
プロパティ
Value数量
Font.Nameメイリオ
Font.Size12pt
TextAlignCenter
BackgroundColorGainsboro
BorderStyleSolid
BorderWidth0.5pt
グループヘッダ2行目「単位」TextBox
プロパティ
Value単位
Font.Nameメイリオ
Font.Size12pt
TextAlignCenter
BackgroundColorGainsboro
BorderStyleSolid
BorderWidth0.5pt
グループヘッダ2行目「単価」TextBox
プロパティ
Value単価
Font.Nameメイリオ
Font.Size12pt
TextAlignCenter
BackgroundColorGainsboro
BorderStyleSolid
BorderWidth0.5pt
グループヘッダ2行目「金額」TextBox
プロパティ
Value金額
Font.Nameメイリオ
Font.Size12pt
TextAlignCenter
BackgroundColorGainsboro
BorderStyleSolid
BorderWidth0.5pt

詳細行の編集

詳細行の各TextBoxには、対応するフィールドの値を設定します。書式と横位置はTable作成ダイアログで指定した内容が反映されているため、そのまま利用します。

詳細行の各TextBoxには、対応するフィールドの値を設定します。文字揃え(右揃え)はTable作成ダイアログで指定した内容が反映されているため、そのまま利用します。

表示形式(Formatプロパティ)についても、ダイアログで指定した「数値」「通貨」が反映されていますが、初期値では数量がn2(小数2桁)、単価・金額がc2(通貨・小数2桁)となっています。今回は数量をn1(小数1桁)に、単価・金額をc0(通貨・整数)に変更します。

各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)

詳細行「項目」TextBox
プロパティ
Value=Fields!item.Value
Font.Nameメイリオ
Font.Size12pt
TextAlignLeft
WrapModeTrue
BorderStyleSolid
BorderWidth0.5pt
詳細行「数量」TextBox
プロパティ
Value=Fields!quantity.Value
Font.Nameメイリオ
Font.Size12pt
Formatn1
TextAlignRight
BorderStyleSolid
BorderWidth0.5pt
詳細行「単位」TextBox
プロパティ
Value=Fields!unit.Value
Font.Nameメイリオ
Font.Size12pt
TextAlignCenter
BorderStyleSolid
BorderWidth0.5pt
詳細行「単価」TextBox
プロパティ
Value=Fields!unitPrice.Value
Font.Nameメイリオ
Font.Size12pt
Formatc0
TextAlignRight
BorderStyleSolid
BorderWidth0.5pt
詳細行「金額」TextBox
プロパティ
Value=Fields!amount.Value
Font.Nameメイリオ
Font.Size12pt
Formatc0
TextAlignRight
BorderStyleSolid
BorderWidth0.5pt

グループフッタの編集

グループフッタは、左側4列(項目・数量・単位・単価)を範囲選択して「セルの結合」でまとめ、「〇〇 小計」のラベルを表示します。右側(金額)は、Sum関数で工事区分ごとの合計金額を表示します。視覚的に強調するため、背景色をWhiteSmoke、フォントをBoldに設定します。

グループフッタのラベルTextBox(結合セル)
=Fields!category.Value & " 小計"

グループフッタ「金額」TextBox
=Sum(Fields!amount.Value)

各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)

グループフッタのラベルTextBox(結合セル)
プロパティ
Value上記コードブロック参照
Font.Nameメイリオ
Font.Size12pt
Font.WeightBold
TextAlignRight
グループフッタ「金額」TextBox
プロパティ
Value上記コードブロック参照
Font.Nameメイリオ
Font.Size12pt
Font.WeightBold
Formatc0
TextAlignRight
BackgroundColorWhiteSmoke

Tableのフィルタ設定

集計ページと同様に、Tableに表示される明細を、現在の見積書に該当するレコードのみに絞り込みます。プロパティ設定ダイアログの「フィルタ」から、集計ページと同じ条件を設定してください。

ページ番号の配置

最後に、集計ページと明細ページの最下部にページ番号を付加します。

ページ番号は、TextBoxの式エディタから定義済みの書式を選択して設定できます。今回は、表紙のグループ化により見積書ごとにページが繰り返し出力されるため、「ページ番号 / 総ページ(セクション)」を選択します。

「共通フィールド」から「ページ番号 / 総ページ(セクション)」を選択

Valueには次の式が自動的に設定されます。

=Globals!PageNumberInSection & " / " & Globals!TotalPagesInSection

各コントロールの詳細なプロパティ設定は以下のとおりです。(クリックで展開します)

ページ番号TextBox
プロパティ
Value上記コードブロック参照
Location.Left0cm
Location.Top23.95cm
Size.Width16cm
Size.Height0.75cm
Font.Nameメイリオ
TextAlignCenter

動作確認

ここまでの手順で、見積書のレポートが完成しました。プロジェクトをデバッグ実行して、動作を確認します。

JSビューワで表示するレポートファイルを、前回作成した「Report1.rdlx」から今回作成した「MultiPageReport.rdlx」に変更します。以下のコードの強調表示箇所を変更してください。

@{
}

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="utf-8">
	<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="theme-color" content="#000000">
	<title>JS Viewer</title>
	<link href="~/jsViewer.min.css" rel="stylesheet">
	<link href="~/index.css" rel="stylesheet">
</head>

<body onload="loadViewer()">
	<div style="width: 100%; overflow-x: hidden">
		<div style="float:right;width:100%" id="viewerContainer">
		</div>
	</div>
	<script type="text/javascript" src="~/jsViewer.min.js"></script>
	<script type="text/javascript">
		let viewer;
		function loadViewer() {
			viewer = GrapeCity.ActiveReports.JSViewer.create({
				element: '#viewerContainer'
			});
		viewer.openReport("MultiPageReport.rdlx");
		}
	</script>
</body>
</html>

変更後、「デバッグ」メニューから「デバッグの開始」を選択、またはF5キーを押してアプリケーションを起動します。ブラウザにJSビューワが表示され、作成した見積書が表示されます。

表紙のグループ化により、estimatesデータセットに含まれる3件の見積書が繰り返し出力され、各見積書ごとに「表紙 → 集計 → 明細」の3つのレイアウトが順に表示されることを確認できます。

  • 紫山邸 新築工事(EST-2026-0142):5ページ
  • 青葉ビル 内装リフォーム工事(EST-2026-0143):4ページ
  • 泉中央倉庫 新築工事(EST-2026-0144):5ページ

ページ番号は表紙を除く集計ページ以降に表示されます。見積書ごとに総ページ数が異なるため、集計ページには「2 / 5」「2 / 4」「2 / 5」のように、それぞれのセクション内で独立したページ番号が振られていることを確認できます。

さいごに

「これからはじめるActiveReports帳票」第8回は、ページレポート実践編(2)として、前回準備したレポートファイルとデータセットを利用し、建設業の見積書を題材に、複数ページレイアウトの帳票を作成しました。

表紙・集計・明細の3つのページレイアウトを組み合わせながら、マスタとトランザクションを分離したデータ構造を活用し、Lookup関数やLookupSet関数によるマスタ参照、Tableコントロールのグループ化と集計、Shapeコントロールによる装飾など、実務でも活用できる機能を盛り込んでいます。

ページレポートで複数のページレイアウトを組み合わせることで、表紙から明細まで、役割の異なるページを1つの帳票としてまとめて出力できます。今回のような見積書はもちろん、提案書や報告書など、複数の構成要素を持つ帳票の作成にもご活用いただけます。ぜひ本記事の内容を参考に、業務帳票の作成をお試しください。

今回作成したサンプルは、GitHubに公開しています。ぜひ参考にしてください。

今回の内容を実際に試してみたい方は、トライアル版をダウンロードしてお試しください。

製品の機能を手軽に体験できるデモアプリケーションも公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

\  この記事をシェアする  /