3 請求書詳細画面の作成

請求書一覧画面から遷移して個々の請求書の詳細情報を表示するための請求書詳細画面を作成します。

1 「請求書詳細」ページを開きます。

ナビゲーションウィンドウで[請求書詳細]ページをダブルクリックするか、作業スペース下の部分で[請求書詳細]シートタブをクリックします。

 2 請求先情報を表示する部分にテーブルの各フィールドを連結します。

最初に請求先(会社名)を表示させるセル(C8セル)の設定を行います。

1) C8セルを選択します。

2) 【DEL】キーを押してExcelからインポートされた数式を削除します。

3) ナビゲーションウィンドウで「請求書」テーブルの横の[  ]をクリックしてフィールドを展開し、さらに展開された中にある「会社ID」フィールドの横の[  ]をクリックして展開します。

 

4) 展開されたフィールドの中にある「会社名」フィールドをナビゲーションウィンドウからC8セルにドラッグ&ドロップします。
これによりC8セルに「会社名」フィールドが連結されます。
なお、連結先の詳細は作業ウィンドウ右側のペインで[データ連結]タブを表示させることで確認できます([データ連結]タブ上でも連結を設定、変更することが可能です)。

 

5) 下の図のようにほかのフィールドについても同様の操作で連結します。連結を設定するフィールドは全部で12です。

 

3 請求書明細部分の作成

請求書明細部分を「リストビュー」として設定します。

リストビューの1行目は「行テンプレート」と呼ばれ、リストビューに表示するフィールドを指定します。
行テンプレートに設定されたフィールドのレコードデータが2行目以降に表示されます。
ページ編集画面ではレコードデータは表示されませんが「デバッグ」を実行してWebブラウザーで表示して確認することができます。

1) リストビューを設定する領域としてB14からM38までを範囲選択します。

2) 「請求書の詳細」テーブルをナビゲーションウィンドウから選択した領域にドラッグ&ドロップします。
ドラッグ&ドロップするのはフィールドではなくテーブルであるという部分に注意してください。

note
..\..\Media\pict-note.png

テーブルをナビゲーションウィンドウからドラッグ&ドロップする方法と、③-2 請求書一覧画面の作成で行った[リストビューとして設定]ボタンを使用する方法は、操作方法は異なりますが設定される結果は同様です。好みの方法を使用してください。

 

3) B14セルを選択します。

4) ナビゲーションウィンドウで「請求書の詳細」テーブルの横の[  ]をクリックしてフィールドを展開します。

5) 「品目番号」フィールドをナビゲーションウィンドウから行テンプレートにドラッグ&ドロップします。
これにより「請求書の詳細」テーブルの「品目番号」フィールドがリストビューの行テンプレートに連結されます。

6) 下の図のようにほかのフィールドについても同様の操作で連結します。

7) 価格を表示するL14セルには以下の数式を設定します。

=IFERROR((H14*I14)-K14,"")

8) リストビューの領域を選択し、リボン上部の[リストビュー ツール]と表示されている部分をクリックしてコンテキストタブを表示させます。

9) [リストビュー ツール]リボンタブの[ヘッダー]グループにある[列ヘッダー]チェックボックスをクリックしてチェックを外し、リストビューの列ヘッダーを表示させないように設定します。

10) [リストビュー ツール]リボンタブの[マスター/詳細]グループにある[詳細リストビューとして設定]ボタンをクリックします。

11) [詳細リストビューとして設定]ダイアログで、参照される詳細テーブル上のフィールドに「請求書番号」フィールド、[マスターテーブルの選択]に「請求書」テーブル、マスターテーブル上の外部キーとなるフィールドに「請求書番号」フィールドを選択して、[OK]ボタンをクリックします。

4 罫線などのスタイルや書式の設定を行います。

Excelと同様の操作で適宜、罫線や文字色などのスタイル、金額や日付などのセルの書式設定を行います。

5 デバッグ機能で実際の表示を確認します。

[ホーム]→[  (デバッグ)]をクリックします。

note
..\..\Media\pict-note.png

[開始(デバッグ)]ボタンの下半分の部分をクリックすると、Webブラウザーの種類を選択してデバッグすることができます。

Webブラウザーに「請求書一覧画面」が表示されます。請求書の一覧から請求書番号のリンクをクリックすると、作成した画面が表示され選択した請求書の情報が表示されていることを確認できます。

 

<次は請求書編集画面の作成