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

概要

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

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

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

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

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

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

• データを連結する

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

• 画像を埋め込む

• 画像を表示する

• 請求書で住所を表示する

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

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

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

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

• 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コントロールに次のプロパティを設定します。これにより、会社名が表示されます。

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

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

画像を埋め込む

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

• デザイン面に戻り、デザイン面の周囲にあるグレーの領域をクリックします。

• ［プロパティ］ ウィンドウでは、 ［レイアウト］ セクションの ［埋め込み画像］ プロパティの右側にあるリストアイコンをクリックします。

• ［+ 項目の追加］ ボタンをクリックします。

• ［開く］ ダイアログで、保存した画像を選択し、 ［開く］ ボタンをクリックします。

画像を表示する

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

• ツールボックスからImageコントロールをドラッグ＆ドロップしてページの右上隅に配置します。

• プロパティで、 ［外観］ セクションの ［画像］ プロパティの右側にあるアイコンをクリックします。

• ［ソース］ プロパティで 「Embedded」 、 ［値］ プロパティで 「Northwind-Logo」 、 ［MIMEの種類］ プロパティで 「image/png」 を選択します。

• 新しく追加された画像に次のプロパティを設定します。

請求書で住所を表示する

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

• ツールボックスからTextBoxコントロールををドラッグしてレポートページの左上隅にドロップします。

• ［プロパティ］ウィンドウでは、新しく追加されたTextBoxコントロールの次のプロパティを設定します。

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

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

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

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

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

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

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

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

• ツールボックスからTableコントロールをドラッグ＆ドロップしてページの中央に配置します。

• ［プロパティ］ウィンドウでは、新しく追加されたテーブルの次のプロパティを設定します。

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

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

• テーブル内の任意の場所をクリックして、列と行のハンドラを表示します。

• 最後の行のハンドラを右クリックし、コンテストメニューから ［行］ メニュー項目に移動します。

• ［行の挿入］ >［下］ の右側にあるカウンタを増やし、2つの行を追加します。

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

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

• テーブル内の任意の場所をクリックして、列と行のハンドラを表示します。

• 最初の列ハンドラをクリックし、プロパティで ［高さ］ プロパティを 「1.2in」 に設定します。

• 2番目と3番目の列のハンドラをクリックし、プロパティで ［高さ］ プロパティを 「1.2in」 に設定します。

• 最初の列ハンドラを右クリックし、コンテキストメニューで ［列］ > ［列の挿入］ > ［左］ の順に選択します。

• プロパティでは、新しく追加された列ハンドラの ［幅］ プロパティを 「3.9in」 に設定します。

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

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

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

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

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

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

OverflowPlaceHolderを追加する

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

• デザイン面に戻り、右下隅にある ［ページの追加］ ボタンをクリックします。

• ツールボックスから OverflowPlaceHolder コントロールををドラッグ＆ドロップしてページの左上隅に配置します。

• ［プロパティ］ウィンドウでは、OverflowPlaceHolderの次のプロパティを設定します。

• タブを使用してページ1に切り替えます。

• 注文詳細テーブル内の任意の場所をクリックして、テーブルのハンドラを表示します。

• テーブルのハンドラをクリックし、［プロパティ］ウィンドウでテーブルの ［OverflowName］ プロパティを新しく追加されたOverflowPlaceHolderコントロールの名前を設定します。また、 ［空行出力］ を 「FillPage」 に設定します。

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