ウィザードとタブレイアウト

ウィザードとタブレイアウトの違い

ウィザード

項目を複数画面に分け、順番に従って入力を行うようにする方式です。
ウィザードを使うことで、入力項目に加えてそれらの入力順までルール化することができます。
入力中の画面に必須項目がある場合、同項目を入力しなければ、次の画面に進むことはできません。

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

タブレイアウト

入力項目をグループ化したものです。ウィザードとは異なり、入力順は考慮されません。
2つのタブを用意した例を示します。

ウィザードの詳細および設定方法は「画面機能 > ウィザード」をお読みください。
以降はタブレイアウトについて説明します。

タブレイアウトの設定方法

「顧客」モデルを例に、タブを複数用意し、グループ化する例を示します。（図3、図4）

1. モデルの編集画面で「レイアウト>詳細」タブをクリックして開きます。初期状態では定義順に項目が並んでいます。

   

2. 左側の欄の「タブ」をクリックして開き、その中にあるタブコンテナの「追加」ボタンをクリックします。
   画面右側のスクリーンエディタ部に新しいタブが用意されます。

   

3. 右側のスクリーンエディタでタブをクリックして選択し、左側でラベル（タブ名）を入力します。
   ここでは「基本情報」としました。

   

4. 項目をドラッグ&ドロップして、タブ内に項目を配置します。

   

5. このタブコンテナの中に、タブをもう一つ追加します。
   このタブをクリックして選択した状態で、「タブ設定」の枠内の「追加」ボタンをクリックします。

   

6. 新しいタブがタブコンテナの中に追加されました。
   先程の「基本情報」タブと同様の手順で、ラベル名を編集して項目をドラッグ&ドロップで追加します。

   

   注意

   タブ内の項目を別のタブへ直接移動することはできません。
   いったんタブの外へ項目を移してから、移動先のタブを選択して項目を移動してください。

7. 左側の設定欄の上部にある「レイアウト設定保存」ボタンを押下し、編集内容を保存します。
   この操作により、リポジトリに反映されます。

   重要

   「レイアウト設定保存」ボタンを押下せずに他の画面に切り替えた場合、これまでの編集内容は反映されません。ご注意ください。

   

デフォルトタブの指定

画面の初期表示時に、複数あるタブのうちデフォルトで表示されるタブを指定することができます。
図12は新規登録画面を開いた例です。「問い合わせと回答」が最初に表示されるように設定されています。

設定方法

1. デフォルト表示したいタブを選択し、左側のタブ設定の「デフォルト表示タブ」をチェックします。
   ※デフォルト指定できるタブは一つだけです。

   

2. 左側の設定欄の上部にある「レイアウト設定保存」ボタンを押下し、編集内容を保存します。
   この操作により、リポジトリに反映されます。

   

   重要

   「レイアウト設定保存」ボタンを押下せずに他の画面に切り替えた場合、これまでの編集内容は反映されません。ご注意ください。

デフォルトタブの制御

”モデル項目Aの値が〇〇の時、タブ「△△」をデフォルトタブとする。”
といったように、指定した条件に合致する場合のデフォルトタブを設定することができます。
優先度は 指定条件に合致したタブ＞デフォルト指定したタブ となります。

図18に例を示します。
「基本情報」、「問い合わせ」、「回答」という3つのタブを例に説明します。
このモデルのデフォルトタブは「問い合わせ」タブです。
しかし、「対応状況」項目の値が「未回答」のときは「回答」タブをデフォルト表示するように設定しました。

設定方法

1. 「問い合わせ」タブを選択し、左側のタブ設定で「デフォルト表示タブ」にチェックを入れます。
   条件に合致しない場合、この設定が有効になります。

   

2. 「回答」タブを選択し、条件を指定します。書式は次のようになります。

   項目ID=値

   今回は、status 項目の主キーの値が 1 であること（すなわち「未回答」のとき）を条件に指定します。

   

   注意

   他モデル参照型の項目を条件式に用いる場合、参照先の主キー（id）の値を指定します。
   他モデル参照型でない項目は、「status="未回答"」のように、値を直接指定します。

3. 最後に、リポジトリを保存します。

   

タブの入れ子

図19のように、タブ同士を入れ子にすることができます。

設定方法

1. 入れ子にしたいタブをドラッグ&ドロップします。

   

2. 最後に、レイアウト情報を保存します。

   

タブと他レイアウトとの組み合わせ

タブレイアウト内の項目を縦並びや横並びのグループとして指定できます。
図22は、タブレイアウト内に横並びのグループを作成した例です。

設定方法

1. スクリーンエディタで、タブの中にグループを作成します。
   グループの作成方法の詳細はこちらをご覧ください。

   

2. レイアウト設定を保存します。

   

複数のタブコンテナを用意する

図25のように、複数のタブコンテナを用意することができます。

設定方法

1. 一つ目のタブコンテナを作成します。

   

2. タブの「追加」ボタンをクリックし、二つ目のタブコンテナを作成します。

   

3. 二つ目のタブコンテナに項目をドラッグ&ドロップして配置します。

   

4. 「レイアウト設定保存」ボタンを押下して、設定を保存します。

   

タブの移動

項目の移動と同じように、タブもドラッグ&ドロップで移動させることができます。

設定方法

1. タブコンテナを選択し、ドラッグ&ドロップします。

   

2. 移動後は「レイアウト設定保存」を行なってください。