サポート > リポジトリ > 画面機能 > 画面遷移 (3) 一覧表示画面から別のモデルへ遷移する

一覧表示画面から任意のモデルの詳細画面および更新画面へ遷移する方法を説明します。

顧客モデルの一覧表示画面から、サポートモデルの詳細画面へ遷移するボタンを用意した例を図1に示します。

図1 サポートモデルの詳細画面へ遷移するボタンを用意した例

このボタンを押すと、(顧客モデルが保持している)サポートモデルへの主キーを用いて、サポートモデルの詳細画面を開きます。

図2 サポートモデルの詳細表示

モデル定義

用意したモデルは「顧客」と「サポート」の二つです。

図3 顧客モデルとサポートモデル

顧客モデルに、サポートモデルの主キーを保持する項目「サポート番号」を用意します。

図4 顧客モデルに「サポート番号」項目を用意する

ボタンを用意する

図4で示した「顧客モデル」で、「画面>その他>Javaソースコードの設定」を開きます。
ここで追加ボタンを次のように定義します。

項目 説明 入力例
画面名 どの画面にボタンを追加するかを指定します。ここでは"一覧表示画面(行毎)"とします。 一覧表示画面(行毎)
表示する 有効にします。 (チェック)
表示条件 常にボタンを表示する場合、本欄は空白とします。条件については"ボタン表示条件"をお読みください。
ボタン名 任意の名前を指定します。式で表現することもできます。 サポート
イベント名 遷移した画面に対するイベントを指定します。遷移先は詳細画面ですので、詳細画面で受理できるイベント Show を指定します。 Show
アクション名 遷移する画面を指定します。[後述] showSupport
追加パラメータ 遷移する画面へパラメータを指定することができます。[後述] supportid=${supportid#id}
図5 追加ボタンの設定
イベント名は大文字小文字を区別します。正確に入力してください。

アクション名

モデルと画面の組み合わせから構成される文字列です。アドレスバー(URL)の一部になります。

詳細画面は次のようになります。

"show" + モデル名(キャメル記法)

このルールにより、モデル "support" の詳細画面に対応するアクション名は "showSupport" になります。 拡張子は不要です。

キャメル記法 : 先頭の1文字を大文字とします。モデル名に含まれるアンダースコアは取り除き、その次の文字を大文字にします。例えば my_funny_valentine は MyFunnyValentine になります。

追加パラメータ

詳細画面に対して、直接、主キーを渡すことができます。

書式は「キー=値」となっています。キー部分は(遷移先モデルの)項目IDになります。
値部分にプレースホルダ (${ ... }) を用いて、遷移元の項目の値を渡すことができます。遷移元項目がモデル参照の場合、#id を付与することで ID 部を渡すようになります。

#id表記の詳細は"計算式>モデル参照"をお読みください。

図2の動作を実現するための追加パラメータは次のようになります。イコールの左側はサポートモデルの項目で、主キーになります。イコールの右側は顧客モデルの項目です。たまたま同じ名前(supportid)ですが、両者はそれぞれモデルが異なります。

supportid=${supportid#id}

受ける側の初期値設定

受側のモデル(この例ではサポートモデル)の主キー項目に初期値を設定する必要はありません。主キー項目は、外部パラメータがあればそれを自動的に利用するようになっています。

制約

追加パラメータに記載する項目名に以下を指定することはできません。

  • 繰り返し項目
  • 繰り返しコンテナ項目
  • このモデルに紐づく外部キー子モデル

顧客モデルの一覧表示画面に二つの独自ボタン「サポート表示」と「サポート更新」を用意した例を紹介します。

図6 二つの独自ボタンを用意する

「サポート更新」ボタン押下により、サポートモデルの更新画面を開くことができます。

図7 サポートモデルの更新画面
ここで更新を終了またはキャンセルしたときは、サポートモデルの詳細画面へ遷移します。遷移元である顧客モデルの一覧表示画面へ戻る場合は、パンくずを利用します。

設定

二つ目の独自ボタンとして、更新用のボタンを設定します。

項目 説明 入力例
画面名 どの画面にボタンを追加するかを指定します。"一覧表示画面(行毎)"とします。 一覧表示画面(行毎)
表示する 有効にします。 (チェック)
表示条件 常にボタンを表示する場合、本欄は空白とします。条件については"ボタン表示条件"をお読みください。
ボタン名 任意の名前を指定します。式で表現することもできます。 サポート更新
イベント名 遷移した画面に対するイベントを指定します。遷移先は更新画面ですので、更新画面で受理できるイベント Update を指定します。これにより更新画面が開きます。 Update
アクション名 遷移する画面を指定します。 updateSupport
追加パラメータ 遷移する画面へパラメータを指定します。 supportid=${supportid#id}
図8 更新用のボタン

削除ボタンを追加した例を示します。

図9 削除ボタン (1)

削除ボタンを押下すると、データが削除され、一覧表示画面が再描画されます。

図10 削除ボタン (2)

設定

削除用のボタンを設定します。なお、対象モデルは削除機能が有効になっている必要があります。

項目 説明 入力例
画面名 どの画面にボタンを追加するかを指定します。"一覧表示画面(行毎)"とします。 一覧表示画面(行毎)
表示する 有効にします。 (チェック)
表示条件 常にボタンを表示する場合、本欄は空白とします。条件については"ボタン表示条件"をお読みください。
ボタン名 任意の名前を指定します。式で表現することもできます。 削除
イベント名 遷移先である削除画面が受理できるイベント Send を指定します。これは削除処理を行うものです。 Send
アクション名 削除画面を指定します。(実際にはこの画面は画面をもたず、削除機能のみを提供するものです。) deleteCustomer
追加パラメータ 遷移する画面へパラメータを指定します。標準で(このモデルの)主キーが渡されるため、記述は不要です。
図11 削除ボタンを用意する

印刷ボタンを追加した例を示します。ボタンを押下すると Excel 帳票が実行されます。(ファイルがダウンロードされています。)

図12 印刷ボタン

設定

削除用のボタンを設定します。なお、対象モデルは詳細画面の印刷機能が有効になっているものとします。

項目 説明 入力例
画面名 どの画面にボタンを追加するかを指定します。"一覧表示画面(行毎)"とします。 一覧表示画面(行毎)
表示する 有効にします。 (チェック)
表示条件 常にボタンを表示する場合、本欄は空白とします。条件については"ボタン表示条件"をお読みください。
ボタン名 任意の名前を指定します。式で表現することもできます。 印刷
イベント名 遷移先である詳細画面が受理できるイベント Print を指定します。これは印刷処理を行うものです。 Print
アクション名 詳細画面を指定します。 showCustomer
追加パラメータ 遷移する画面へパラメータを指定します。標準で(このモデルの)主キーが渡されるため、記述は不要です。
図13 帳票ボタンを用意する
Wagby Developer Day 2018