サポート > リポジトリ > 画面機能 > ウィザード

ウィザード機能を利用すると項目を複数画面に分割することができます。

画面例

顧客モデルにウィザードを適用し、二画面に分割した例を図1,図2に示します。画面移動ボタン(「前画面へ」「次画面へ」)で前後のページに移動します。さらに画面指定ボタン(「画面1」「画面2」)を使って直接、特定の画面を開くこともできます。

図1 最初の画面

図2 二枚目の画面

詳細画面もウィザードで分割されています。

図3 詳細画面の例

定義方法

顧客モデルの各項目に「ウィザード画面番号」を設定します。

数値は画面番号を表しています。上記の例の場合、「顧客ID」や「氏名」などの項目は1つ目の画面に表示され、「問合せ」や「備考」などの項目は2つ目の画面に表示されます。

画面番号は上から順に指定していく必要はありません。例えば図4の設定で、「電子メール」項目のウィザード画面番号を "2" と指定することは可能です。(2つ目の画面に表示されるようになります。)

割り当てしない項目はウィザードの対象外となります。

図4 ウィザード画面番号を割り当てる

一括設定を利用する

ウィザード画面番号の設定は「モデル項目の一括設定」を使うと、さらに効率よく行うことができます。

図5 一括設定を利用する

類似のユーザーインタフェースに「タブレイアウト」があります。 両方式の相違点は次のとおりです。

ウィザード
順番に従って入力を行なう方式です。順番に、業務のルール(意図)が含まれます。ある画面に必須項目が用意されていた場合、同項目を入力しなければ、次の画面に進むことができません。
タブレイアウト
入力項目をグループ化したものです。入力の順番を意識する必要はありません。

ウィザードとタブレイアウトのどちらが適切かは、開発する業務アプリケーションによって異なります。上記の違いを元に判断してください。

画面例

画面指定ボタンを非表示にした例を図6に示します。

図6 画面指定ボタンを非表示にする

定義方法

画面タブ内の「その他」タブを開きます。「ウィザード>画面ボタン」の「表示する」設定を解除します。

図7 画面ボタンの表示制御

画面指定ボタンの名称を指定する

画面指定ボタンの名称を指定することもできます。図8はウィザード画面にそれぞれ「基本」「応用」と名付けた例です。

図8 画面指定ボタンを命名する

ボタン名にコンマ区切りで画面名を指定します。ウィザードの画面数と合致するようにしてください。

図9 画面指定ボタンの設定

画面例

画面移動ボタンの表示位置を指定することができます。標準値は空白で、"上"と同等です。(図1)

これを "下" にすると、画面指定ボタンと同じ位置に表示されるようになります。(図10)

図10 画面移動ボタンの表示位置が "下" の例

さらに、画面移動ボタンを非表示にすることもできます。(図11)

図11 画面移動ボタンを非表示とした例

定義方法

「前画面へ」「次画面へ」ボタンの配置を選択肢から指定します。

図12 画面指定ボタンの設定

図13,14は、氏名項目をすべてのウィザード画面で共通に用いると指定した例です。図13で入力した値が、図14でも読み取り専用項目として表示されていることがわかります。

図13 氏名項目を共通とした例 (1)
図14 氏名項目を共通とした例 (2)

この設定は、どのデータか特定できるような項目で、登録・更新時に常に画面に表示させながら別の項目も入力したい、という場合に有効です。

定義方法

全ての画面に表示させたい項目に "all" と記述します。

図15 共通項目には "all" と指定する
"all" で指定した項目の画面での並び順は、リポジトリで定義した順番により異なります。連続して表示させたい場合には、リポジトリ上でも連続させるなど、工夫してください。

ウィザード利用と、確認画面を併用することができます。確認画面の詳細は"画面機能 > 新規登録 > 確認画面を用意する"をお読みください。

確認画面を用意すると、登録ボタンが "登録確認" となります。

図16 確認画面を用意したウィザード登録画面 (1)
図17 確認画面を用意したウィザード登録画面 (2)

確認画面では、ウィザードとして分割されていた各画面を統合した一つの画面として内容を確認できます。

図18 確認画面を用意したウィザード登録画面 (3)

詳細画面を(確認画面のように)一画面にまとめて表示することができます。

図19 詳細画面をまとめて表示した例

定義方法

この例では、入力時は3つのウィザード画面を利用するようにしています。

図20 ウィザードの設定

「画面 > 詳細表示 > ウィザード表示を一つにまとめる」を有効にします。

図21 ウィザード表示を一つにまとめる

「画面指定ボタン」を条件によって非表示とするような制御を行うことができます。

条件を指定しない場合の動作は下図のようになります。画面指定ボタンのボタン名は「画面1」「画面2」となっており、いずれも押下可能です。

図22 標準の画面指定ボタン (1)
図23 標準の画面指定ボタン (2)

定義方法

「画面 > その他」タブから、「ウィザード」設定欄を開きます。ボタン名は空欄になっています。

図24 ウィザード設定欄

最初に、ボタン名を設定します。ここでは二画面のウィザードですので、コンマ区切りで二つのボタン名を指定しています。

図25 ボタン名を設定する

ボタンの数に応じて、「表示条件」の入力欄が用意されます。

図26 表示条件の入力欄が用意される

表示条件(式)を設定します。常に表示する場合は、空白とします。

図27 表示条件を設定する

今回の例は、次の式を設定しました。メールアドレス項目と、会社名項目の両方が入力されたらボタンが表示されるように、としています。

AND(
  NOT(ISBLANK(${email})),
  NOT(ISBLANK(${companyname}))
)

ここで指定した項目の値が変更されたら、画面を再描画するようにします。再描画によりサーバの判定処理が有効になります。

図28 項目の値が変わったら画面を再描画する

実行

新規登録画面を開きます。メールアドレス項目と、会社名項目が未入力のため、「オプション」ボタンは表示されていません。「基本」ボタンは表示されていますが、自画面なので押下できないようになっています。(これは正常な動作です。)

図28 新規登録画面を開く

必要な項目を設定すると(画面が再描画され)「オプション」ボタンが表示されました。

図29 オプションボタンが表示される

ウィザードを移動すると、「基本」ボタンを押下することができるようになっていることがわかります。

図30 ウィザードを移動した場合

画面移動ボタンを非表示にする

上の例で、さらに画面移動ボタンを「表示しない」に設定すると、ウィザード画面の遷移を厳密に制御することができます。

図31 画面移動ボタンを表示しない

繰り返しコンテナを分割しない

繰り返しコンテナ項目を利用する場合、同一コンテナ内の項目には同じページ番号を指定してください。

設定する数値は連続させる

ウィザードに設定する数値は連続である必要があります。欠番は認められません。

マップビュー欄の設定を行った項目は、1つの画面に収まるように設定する

マップビューとウィザードを併用する場合、マップビューの設定を行った項目は、同じページ番号を指定してください。(そのように設定しない場合、マップビューが正常に機能しなくなります。)

登録画面/更新画面は必要

ウィザードを利用するモデルでは、登録画面・更新画面は必ず必要になります。

入力チェックのタイミング

入力チェックは画面毎に行われます。エラーがあった場合は、次の画面へ進むことができません。

Wagby Developer Day 2017