固定レイアウトを使ったレポート

概要

このチュートリアルではページレポートを使用したレポートを作成します。ページレポートはページ単位でレイアウトをデザインする固定レイアウトのレポート形式です。固定レイアウトのレポートの例としては、見積書、注文書、請求書などがあります。このチュートリアルでは、請求書を作成する手順を説明します。

• 新しいレポートを作成する
• レポートをデータ連結しデータセットを追加する
• レポートパラメータを追加する
• カスケード型パラメータを構築する
• パラメータを使用してデータセットを取得する
• データを連結する
• 請求書のヘッダを表示する
• 画像を埋め込む
• 画像を表示する
• 請求書で住所を表示する
• 固定レイアウトのテーブルを追加する
• テーブル列に書式を設定する
• テーブル行に書式を設定する
• テーブルにデータを表示する
• OverflowPlaceHolderを追加する

前提条件

次の内容は、デザイナアプリを使用することを前提としています。また、データソースとして利用するGrapeCity Data Serviceにアクセスするには、インターネット接続環境が必要です。

新しいレポートを作成する

デザイナアプリでは、［ファイル］メニューをクリックし、**［ページレポート］を選択して、新しいレポートを作成します。デザイン面の周囲にあるグレーの領域をクリックし、デザイン面の周囲にあるグレーの領域をクリックし、表示されるより、［余白］セクションの［スタイル］に「狭い」**を設定し、余白を設定します。

新しいレポートを作成する方法

レポートをデータ連結しデータセットを追加する

レポートとデータの接続を行うため、データ連結を行います。このチュートリアルでは、データソースとして「GrapeCity Data Service」のNorthWind Data Serviceを使用します。

• データソースを追加する

  データベースに接続するには、「NorthWind Data Service」のWebAPIを使用します。その中に/Customers、/Products、/Ordersのデータを使用します。データソースを作成するには、次の手順を実行します。

  • データタブを開き、**［データソース］の横の［+ 追加］**アイコンをクリックします。
  • **［データソースの編集］ダイアログで、［名前］に「Northwind」と入力し、［エンドポイント］に「https://demodata-jp.grapecity.com/northwind/odata/v1」**と入力します。
  • **［変更を保存］**ボタンをクリックします。

データソースを追加する方法

• データセットを追加する

  データセットは、データソースの1つ以上のエンドポイントを表します。「請求書」を作成するためNorthwindデータソース/Customersの値を取得します。以下の手順に従ってCustomersデータセットを追加します。

  • データタブをクリックし、**「Northwind」データソースの横の［+ 追加］**アイコンをクリックします。
  • **［新規データセット］ダイアログで、［名前］に「Customers」と入力、［URI/パス］に「/Customers」と入力し、［JSONパス］に「$.value.*」**と入力します。
  • そのままですと**「Customer」**には不要なデータが含まれています。以下のようにクエリパラメータを使用して必要なフィールドのみ取得します。
    • **［パラメータ］の右側にある［+ 項目追加］**アイコンをクリックします。
    • 新しく追加された［パラメータ］に**「$select」**と入力します。
    • **［値］に「CustomerId, CompanyName, Address, City, PostalCode, Country」**と入力します。
  • **［検証］**ボタンをクリックします。
  • **［データベースフィールド］に［6項目］**というテキストが表示されていることを確認します。
  • **［変更を保存］**ボタンをクリックします。

  次に、同じ要領でProductsデータセットを追加します。

  • データタブをクリックし、**「Northwind」データソースの横の［+ 追加］**アイコンをクリックします。
  • **［新規データセット］ダイアログで、［名前］に「Products」と入力、［URI/パス］に「/Products」と入力し、［JSONパス］に「$.value.*」**と入力します。
  • そのままですと**「Products」**には不要なデータが含まれています。以下のようにクエリパラメータを使用して必要なフィールドのみ取得します。
    • **［パラメータ］の右側にある［+ 項目追加］**アイコンをクリックします。
    • 新しく追加された［パラメータ］に**「$select」**と入力します。
    • **［値］に「ProductId, ProductName」**と入力します。
  • **［検証］**ボタンをクリックします。
  • **［データベースフィールド］に［2項目］**というテキストが表示されていることを確認します。
  • **［変更を保存］**ボタンをクリックします。

データセットを追加する方法

レポートパラメータを追加する

請求書では、選択した顧客と注文番号に応じて請求書を表示します。このようにユーザーが入力した値でレポートの表示を操作する場合はパラメータを使用します。次の手順に従って、Customerパラメータを作成します。

• データタブをクリックし、レポートパラメータの横の**［+ 追加］**アイコンをクリックします。
• **［名前］フィールドに「Customer」と入力し、［ダイアログの表示文字列］フィールドに「顧客を選択する」**と入力します。
• ［使用できる値］で、［データセットの名前］に「Customers」、［値フィールド］に「CustomerId」、**［ラベルフィールド］に「CompanyName」**を入力します。

レポートパラメータを追加する方法

カスケード型パラメータを構築する

先ほど作成したCustomerパラメータを利用して、指定された顧客のデータのみ抽出するOrderIdsデータセットを作成します。

• データタブをクリックし、**「Northwind」データソースの横の［+ 追加］**アイコンをクリックします。
• **［新規データセット］ダイアログで、［名前］に「OrderIds」と入力、［URI/パス］に「/Orders」と入力し、［JSONパス］に「$.value.*」**と入力します。
• そのままですと**「Orders」**には不要な項目データが含まれています。以下のようにクエリパラメータを使用して必要なフィールドのみ取得します。
  • **［パラメータ］の右側にある［+ 項目追加］**アイコンをクリックします。
  • 新しく追加された［パラメータ］に**「$select」**と入力します。
  • **［値］に「orderId」**と入力します。
• そのままですと**「Orders」**には顧客のデータが含まれています。以下のようにクエリパラメータを使用して必要なフィールドのみ取得します。
  • **［パラメータ］の右側にある［+ 項目追加］**アイコンをクリックします。
  • 新しく追加された［パラメータ］に**「$filter」**と入力します。
  • **［値］に「CustomerId+eq+'{@Customer}'」**と入力します。
• **［検証］**ボタンをクリックします。
• 表示される**［パラメータ値］プロンプトダイアログでは、［@Customer］に「51」と入力し、［保存して実行］**ボタンをクリックします。
• **［データベースフィールド］に［1項目］**というテキストが表示されていることを確認します。
• **［変更を保存］**ボタンをクリックします。

次に、Orderパラメータを追加します。

• データタブをクリックし、レポートパラメータの横の**［+ 追加］**アイコンをクリックします。
• **［名前］フィールドに「Order」と入力し、［ダイアログの表示文字列］フィールドに「注文番号を選択する」**と入力します。
• **［データタイプ］ドロップダウンで「Integer」**を選択します。
• ［使用できる値］で、［データセットの名前］に「OrderIds」、［値フィールド］に「OrderId」、**［ラベルフィールド］に「OrderId」**を選択します。

レポートをプレビューすると、パラメータパネルが表示され、事前に決定された値のリストから顧客を選択するように求められます。顧客を選択すると、顧客からの注文が「Order」パラメータのドロップダウンリストに表示されます。これは、カスケード型パラメータと呼ばれます。この方法で、複数の従属パラメータを作成できます。

パラメータを使用してデータセットを取得する

次に、レポートが表示する実際のデータを含むOrdersデータセットを追加します。

• デザイン面に戻り、**［データ］タブの上部にある［←］アイコンをクリックし、［パラメータの編集］**を終了します。
• **「Northwind」**データソースの横の［+ 追加］アイコンをクリックします。
• **［新規データセット］ダイアログで、［名前］フィールドに「Orders」と入力し、［Uri/パス］フィールドに「/Orders」と入力し、［JSONパス］**フィールドに「$.value.*」と入力します。
• そのままですと**「Orders」にはすべての注文が含まれているため、クエリパラメータを使用してODataの$filterクエリーオプションを利用します。フィルタ値は、上記の手順で追加したOrder**レポートパラメータにバインドされます。
  • **［パラメータ］セクションの右側にある［+　項目追加］**アイコンをクリックします。
  • 新しく追加された［パラメータ］フィールドに「$filter」と入力します。
  • **［値］フィールドに、「OrderId+eq+{@Order}」**と入力します。
• 各注文には、複数の注文のデータが含まれ、$expandクエリオプションを使用して取得できます。
  • **［パラメータ］セクションの右側にある［+　項目追加］**アイコンをクリックします。
  • 新しく追加された［パラメータ］フィールドに**「$expand」**と入力します。
  • **［値］フィールドに、「OrderDetails」**と入力します。
• **［検証］**ボタンをクリックします。
• 表示される**［パラメータ値］プロンプトダイアログでは、［@Order］フィールドに「270」と入力し、［保存して実行］**ボタンをクリックします。
• **［データベースフィールド］セクションに［15項目］**のテキストが表示されていることを確認します。
• **［ネストデータセット］フィールドには「OrderDetails」**が表示されます。クリックすると、ネストされたデータセットの構成を確認できます。これに、5つのフィールドが含まれます。
• **［変更を保存］**ボタンをクリックします。

データを連結する

• **［プロパティ］**ウィンドウに切り替えます。
• デザイン面の周囲にあるグレーの領域をクリックします。
• **［データ］セクションの［データセット］プロパティで、「Orders」**を選択します。
• **［グループ］セクションの［式］**プロパティの右側にあるリストアイコンをクリックします。
• **［+ 項目の追加］**ボタンをクリックします。
• 新しく追加された項目の右側にあるグレーのボックスをクリックし、ドロップダウンリストで**「OrderId」**を選択します。

請求書のヘッダを表示する

請求書のヘッダには、会社名、ロゴ、注文日、注文番号、およびタイトルを含める必要があります。最初にテキスト情報を追加します。

• ツールボックスからTextBoxコントロールをドラッグ＆ドロップしてページの左上隅に配置します。
• 新しく追加されたTextBoxコントロールに次のプロパティを設定します。これにより、会社名が表示されます。

プロパティ	値
共通 > 値	Northwind Traders
テキスト > 色	#3da7a8
テキスト > サイズ	22pt
テキスト > 太さ	Bold
テキスト > 垂直方向の整列	Middle
位置とサイズ > 左	0in
位置とサイズ > 上	0in
位置とサイズ > 幅	5in
位置とサイズ > 高さ	0.5in
レイアウト > パディング	6pt 2pt 6pt 2pt

請求書のヘッダを表示する

同様に、次のテキストボックスを追加します。

プロパティ	「注文日」テキストボックス	「注文番号」テキストボックス	「タイトル」テキストボックス
共通 > 値		注文番号：	請求書
テキスト > 色	#3c3c3c	#3c3c3c	#3c3c3c
テキスト > サイズ	デフォルト値	デフォルト値	24pt
テキスト > 太さ	Bold	Bold	Bold
テキスト > 垂直方向の整列	Middle	Middle	Middle
位置とサイズ > 左	0in	0in	0in
位置とサイズ > 上	0.7in	1in	1.5in
位置とサイズ > 幅	2in	2in	7.5in
位置とサイズ > 高さ	0.3in	0.3in	0.5in
レイアウト > パディング	6pt 2pt 6pt 2pt	6pt 2pt 6pt 2pt	6pt 2pt 6pt 2pt

レポートをプレビューし、顧客と注文を選択して、**［プレビュー］**ボタンをクリックすると、選択した注文ID、日付、注文日、役職がページに表示されます。

画像を埋め込む

次に、会社のロゴを追加します。その前に、レポート定義に画像を埋め込む必要があります。以下の画像を右クリックし、コンテキストメニューから**「名前を付けて画像を保存」**を選択して、マシン上で任意のフォルダに保存します。

• デザイン面に戻り、デザイン面の周囲にあるグレーの領域をクリックします。
• **［プロパティ］ウィンドウでは、［レイアウト］セクションの［埋め込み画像］**プロパティの右側にあるリストアイコンをクリックします。
• **［+ 項目の追加］**ボタンをクリックします。
• **［開く］ダイアログで、保存した画像を選択し、［開く］**ボタンをクリックします。

画像を埋め込む方法

画像を表示する

埋め込まれた画像はレポートファイル内に保存されます。この画像を使用して、次のように会社のロゴを表示できます。

• ツールボックスからImageコントロールをドラッグ＆ドロップしてページの右上隅に配置します。
• プロパティで、**［外観］セクションの［画像］**プロパティの右側にあるアイコンをクリックします。
• ［ソース］プロパティで「Embedded」、［値］プロパティで「Northwind-Logo」、**［MIMEの種類］プロパティで「image/png」**を選択します。
• 新しく追加された画像に次のプロパティを設定します。

プロパティ	値
外観 > サイズ設定	FitProportional
外観 > 水平方向の整列	Center
テキスト > 垂直方向の整列	Middle
位置とサイズ > 左	6in
位置とサイズ > 上	0in
位置とサイズ > 幅	1.5in
位置とサイズ > 高さ	1.5in

請求書で住所を表示する

次に、請求書に請求先住所と出荷先住所を表示します。この情報を表示するには、いくつかのテキストボックスを追加します。最初に、顧客の会社名を表示します。OrdersデータセットにはCustomerIdフィールドが含まれているが、CompanyNameフィールドは含まれていません。Lookup関数を使用して、CustomerIdによって会社名を表示します。

• ツールボックスからTextBoxコントロールををドラッグしてレポートページの左上隅にドロップします。
• ［プロパティ］ウィンドウでは、新しく追加されたTextBoxコントロールの次のプロパティを設定します。

プロパティ	値
共通 > 値	{Lookup(CustomerId, CustomerID, CompanyName, "Customers")}
テキスト > 色	#3c3c3c
テキスト > 垂直方向の整列	Middle
位置とサイズ > 左	0in
位置とサイズ > 上	2.6in
位置とサイズ > 幅	3.4in
位置とサイズ > 高さ	0.3in
レイアウト > パディング	6pt 2pt 6pt 2pt

Lookup関数は、現在のスコープで最初の引数としてCustomerIdを受け取り、Customersデータセットで同じCustomerIdの値を持つ行を検索し、対応するCustomerNameの値を返します。

レポートをプレビューし、顧客と注文を選択して、**［プレビュー］**ボタンをクリックすると、選択した会社名がページに表示されます。

デザイン面に戻り、請求先住所の残りのテキストボックスを追加して、次の表のようにプロパティを設定します。

**メモ：下の罫線のスタイルを設定するには、［罫線］セクションの［スタイル］**プロパティの右側にあるアイコンをクリックし、下罫線の値を設定します。

プロパティ	ヘッダテキストボックス	住所テキストボックス	市区町村および郵便番号テキストボックス	国テキストボックス
共通 > 値	請求先	{Lookup(CustomerId, CustomerID, Address, "Customers")}	{Lookup(CustomerId, CustomerID, City, "Customers")} {Lookup(CustomerId, CustomerID, PostalCode, "Customers")}	{Lookup(CustomerId, CustomerID, Country, "Customers")}
罫線 > 幅	0.25pt	デフォルト値	デフォルト値	デフォルト値
罫線 > スタイル > 下	Solid	デフォルト値	デフォルト値	デフォルト値
罫線 > 色	Gainsboro	デフォルト値	デフォルト値	デフォルト値
テキスト > 色	#3da7a8	#3c3c3c	#3c3c3c	#3c3c3c
テキスト > サイズ	12pt	デフォルト値	デフォルト値	デフォルト値
テキスト > 太さ	Bold	デフォルト値	デフォルト値	デフォルト値
テキスト > 垂直方向の整列	Middle	Middle	Middle	Middle
位置とサイズ > 左	0in	0in	0in	0in
位置とサイズ > 上	2.2in	2.9in	3.2in	3.5in
位置とサイズ > 幅	3.4in	3.4in	3.4in	3.4in
位置とサイズ > 高さ	0.4in	0.3in	0.3in	0.3in
レイアウト > パディング	6pt 2pt 6pt 2pt	6pt 2pt 6pt 2pt	6pt 2pt 6pt 2pt	6pt 2pt 6pt 2pt

同様に、出荷先住所のテキストボックスを追加します。

プロパティ	ヘッダテキストボックス	船名テキストボックス	住所テキストボックス	市区町村および郵便番号テキストボックス	国テキストボックス
共通 > 値	出荷先
罫線 > 幅	0.25pt	デフォルト値	デフォルト値	デフォルト値	デフォルト値
罫線 > スタイル > 下	Solid	デフォルト値	デフォルト値	デフォルト値	デフォルト値
罫線 > 色	Gainsboro	デフォルト値	デフォルト値	デフォルト値	デフォルト値
テキスト > 色	#3da7a8	#3c3c3c	#3c3c3c	#3c3c3c	#3c3c3c
テキスト > サイズ	12pt	デフォルト値	デフォルト値	デフォルト値	デフォルト値
テキスト > 太さ	Bold	デフォルト値	デフォルト値	デフォルト値	デフォルト値
テキスト > 垂直方向の整列	Middle	Middle	Middle	Middle	Middle
位置とサイズ > 左	3.8in	3.8in	3.8in	3.8in	3.8in
位置とサイズ > 上	2.2in	2.6in	2.9in	3.2in	3.5in
位置とサイズ > 幅	3.7in	3.7in	3.7in	3.7in	3.7in
位置とサイズ > 高さ	0.4in	0.3in	0.3in	0.3in	0.3in
レイアウト > パディング	6pt 2pt 6pt 2pt	6pt 2pt 6pt 2pt	6pt 2pt 6pt 2pt	6pt 2pt 6pt 2pt	6pt 2pt 6pt 2pt

これで、レポートをプレビューし、顧客と注文を選択して、**［プレビュー］**ボタンをクリックすると、指定した注文の請求先住所と出荷先住所がページに表示されます。ほとんどの場合、これらの住所は同じですが、住所が異なる場合もあります。

固定レイアウトのテーブルを追加する

Ordersデータセットには、ネストされたOrderDetailsデータセットが含まれています。固定テーブルレイアウトを使用して、注文の詳細を印刷します。

• ツールボックスからTableコントロールをドラッグ＆ドロップしてページの中央に配置します。
• ［プロパティ］ウィンドウでは、新しく追加されたテーブルの次のプロパティを設定します。

プロパティ	値
データ > データセット	OrderDetails
位置とサイズ > 左	0in
位置とサイズ > 上	4in
位置とサイズ > 幅	7.5in
位置とサイズ > 固定の高さ	5.5in

固定の高さは、ページ上のテーブルのスペースの制限を設定します。固定テーブルの高さが収容できるよりも多くのデータがある場合、固定レイアウト構成に従って新しいページに印刷されます。

デフォルトでは、新しく追加されたテーブルには、ヘッダ行、詳細行、フッタ行があります。集計値を表示するために、テーブルフッタに行を追加します。

• テーブル内の任意の場所をクリックして、列と行のハンドラを表示します。
• 最後の行のハンドラを右クリックし、コンテストメニューから**［行］**メニュー項目に移動します。
• ［行の挿入］>**［下］**の右側にあるカウンタを増やし、2つの行を追加します。

テーブルに追加のフッタ行を追加する方法

テーブル列に書式を設定する

作成するテーブルでは、最初の列に製品名、2番目の列に数量、3番目の列に単価、4番目の列に金額を表示します。この情報に基づいて、列幅を設定します。

• テーブル内の任意の場所をクリックして、列と行のハンドラを表示します。
• 最初の列ハンドラをクリックし、プロパティで**［高さ］プロパティを「1.2in」**に設定します。
• 2番目と3番目の列のハンドラをクリックし、プロパティで**［高さ］プロパティを「1.2in」**に設定します。
• 最初の列ハンドラを右クリックし、コンテキストメニューで**［列］** > ［列の挿入］ > **［左］**の順に選択します。
• プロパティでは、新しく追加された列ハンドラの**［幅］プロパティを「3.9in」**に設定します。

テーブル列に書式を設定する方法

［プロパティ］ウィンドウの**［TEXTBOX］**タブに切り替え、選択した列のすべてのセルのプロパティを変更できます。以下の表は、テーブル列の外観をカスタマイズする設定を示します。

プロパティ	1列目	2列目	3列目	4列目
罫線 > 幅	0.25pt	0.25pt	0.25pt	0.25pt
罫線 > スタイル	Solid	Solid	Solid	#Solid
罫線 > 色	#e6e6e6	#e6e6e6	#e6e6e6	e6e6e6
テキスト > 水平方向の整列	Left	Right	Right	Right
テキスト > 垂直方向の整列	Middle	Middle	Middle	Middle
テキスト > 表示形式	デフォルト値	デフォルト値	c2	c2
レイアウト > パディング	6pt 2pt 6pt 2pt	6pt 2pt 6pt 2pt	6pt 2pt 6pt 2pt	6pt 2pt 6pt 2pt

テーブル行に書式を設定する

テーブル列の外観をカスタマイズするには、行のハンドラをクリックし、［プロパティ］ウィンドウの［行］タブと［TEXTBOX］タブでプロパティを次のように設定します。

プロパティ	1行目	2行目	3行目	4行目	5行目
位置とサイズ > 高さ	0.4in	0.3in	0.3in	0.3in	0.3in
背景 > 背景色	#f7f7f7	デフォルト値	#f9f9f9	#f9f9f9	#f9f9f9
テキスト > 色	#3da7a8	デフォルト値	デフォルト値	デフォルト値	デフォルト値
テキスト > 太さ	Bold	デフォルト値	Bold	Bold	Bold

テーブルにデータを表示する

次は、テーブルに注文の詳細を表示します。以下の設定でテーブルにデータを入力します。テーブルのセルをダブルクリックして値を入力するか、コピーした値を貼り付けることができます。

	1列目	2列目	3列目	4列目
1行目	品名	数量	単価	金額
2行目	{Lookup(ProductId, ProductId, ProductName, "Products")}			{Quantity * UnitPrice}
3行目			小計	{Sum(Quantity * UnitPrice)}
4行目			割引	{Sum(Quantity * UnitPrice * Discount)}
5行目			合計金額	{Sum(Quantity * UnitPrice * (1 - Discount))}

レポートをプレビューし、**「喫茶たいむましん」会社を選択して「510」注文番号を選択し、［Preview］**ボタンをクリックすると、設計時にテーブルの固定の高さを設定したので、注文に関するデータが2ページに分割されます。

OverflowPlaceHolderを追加する

注文の詳細が複数のページに分割されている場合、請求書のヘッダを最初のページでのみ表示し、後続のページに印刷したくない場合があります。その場合はOverflowPlaceHolderを使用します。

• デザイン面に戻り、右下隅にある**［ページの追加］**ボタンをクリックします。
• ツールボックスからOverflowPlaceHolderコントロールををドラッグ＆ドロップしてページの左上隅に配置します。
• ［プロパティ］ウィンドウでは、OverflowPlaceHolderの次のプロパティを設定します。

プロパティ	値
位置とサイズ > 左	0in
位置とサイズ > 上	0in
位置とサイズ > 幅	7.5in

• タブを使用してページ1に切り替えます。
• 注文詳細テーブル内の任意の場所をクリックして、テーブルのハンドラを表示します。
• テーブルのハンドラをクリックし、［プロパティ］ウィンドウでテーブルの**［OverflowName］プロパティを新しく追加されたOverflowPlaceHolderコントロールの名前を設定します。また、［空行で埋める］を「はい」**に設定します。

OverflowPlaceHolderを追加するする方法

レポートをプレビューし、**「大宮ユニオン」会社を選択、注文番号に「473」を選択し、プレビューボタンをクリックすると、注文詳細のデータが2つのページに分割されるが、2番目のページには最初のページに収まらない注文の詳細と集計値のみが表示されます。オーバーフロープレースホルダの高さはテーブルと同じであり、［空行で埋める］**プロパティを使用すると、使用可能なスペース全体を埋めるために空の行を配置できます。注文詳細のデータが2ページ目に収まらない場合は、オーバーフローを印刷するために3ページ目が生成されます。