サポート > リポジトリ > レイアウト > ウィザードとタブレイアウト

ja | en

一画面に多くの項目がある場合、ウィザードまたはタブレイアウトで整理することができます。

ウィザード

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

図1 ウィザードの画面例

タブレイアウト

5つのタブを用意した例を示します。(図2,図3)

図2 タブレイアウトの利用 (1)
図3 タブレイアウトの利用 (2)

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

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

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

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

タブに含める項目すべてについて、レイアウト名を設定します。(これはタブ名として用いられます。)

図4 レイアウト名(タブ名)の設定

図4で設定した各タブの並び方向で「タブ」を選択します。

図5 タブの指定

画面例

デフォルトのタブを指定することができます。図6は、詳細表示画面を開いた例です。デフォルトタブ「営業」が最初に表示されています。

図6 詳細表示画面でデフォルトタブが有効になっている

図7は新規登録画面を開いた例です。ここでもデフォルトタブ「営業」が最初に表示されています。

図7 新規登録画面でデフォルトタブが有効になっている

定義方法

デフォルトタブをチェックします。デフォルトを指定できるタブは一つです。

図8 デフォルトタブの設定

デフォルトタブと同時に、条件に合致した場合にデフォルトタブとする指定を行うことができます。優先度は 1. 条件に合致したタブ、2. デフォルトタブ、となります。

書式は次のようになります。

項目ID=値

図9の例では、item1項目の値が100のとき「営業」タブをデフォルトとします。そうでない場合は「配送先」タブがデフォルトとなります。

図9 デフォルトタブの条件を設定する

実行例

新規登録画面を開いた時、item1は空白であるため「配送先」タブがデフォルトとなっています。

図10 新規登録時はデフォルトタブが設定される

ここで item1 に 100 を入力して保存します。すると保存後の詳細画面は「営業」タブがデフォルトとなっています。

図11 登録後のデフォルトタブが変わっている

画面例

図12では「適用」タブの中に「伝票」と「その他」という二つのタブを用意しています。

図12 タブレイアウトの入れ子

定義方法

レイアウトの入れ子設定と同様に、「>」で区切ります。

レイアウト>レイアウト
図13 レイアウトの入れ子を設定する

各レイアウトに「タブ」を設定します。

図14 タブの設定

図14では同時に、入れ子となったタブ「適用>>その他」に対して「デフォルトタブ」を指定しています。
このように、同じ階層のタブ同士でデフォルトタブをそれぞれ設定することができます。

画面例

タブレイアウト内の項目に対して、縦並びや横並びといったレイアウト指定を行うことができます。(図15)

図15 タブレイアウト内に縦並び・横並びレイアウトを指定した例

定義方法

図16に示すように、タブ名のあとに「>」文字を続けてレイアウト名を指定することができます。

図16 入れ子のレイアウトを指定する

図17では「グループの表示方法」と「並び方向」を指定して、横並びレイアウトの中に縦並びレイアウトを実現しています。

図17 横並びレイアウトと縦並びレイアウト

画面例

タブをグループ化し、別々に表示することができます。

図18 タブをグループ化した

定義方法

それぞれのタブを区別するために「タブ番号」を指定します。同じ番号は、同じタブ(グループ)として扱われます。

図19 タブ番号の設定

タブ番号は 1 から連続して割り当ててください。

繰り返しコンテナ・親子関係(子モデル)とタブレイアウトの関係

繰り返しコンテナにタブレイアウトを設定できます。また、親子関係(子モデル)にもタブレイアウトを設定できますこれらを一つにまとめることはできません。

図20 タブの関係

タブレイアウトの表示位置

タブレイアウトは、常に画面の下部領域に配置されます。

ja | en