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

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

ウィザード

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

図1 ウィザードの画面例

タブレイアウト

2つのタブを用意した例を示します。

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

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

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

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

図4に示す、サンプルの顧客モデル定義で説明します。

図4 顧客モデル(サンプル)

「レイアウト>詳細」タブを開きます。初期状態は定義順に項目が並んでいます。

図5 初期のレイアウト

左側の欄から「タブ」を選択し、その中にある「タブコンテナ追加」ボタンを押下します。画面右側のスクリーンエディタ部に新しいタブが用意されます。

図6 タブコンテナを追加する

右側のスクリーンエディタからタブを選択し、ラベル(タブの名称)を入力します。ここでは"基本情報"としました。

図7 ラベルを指定する

項目をドラッグ&ドロップして、タブ内に項目を配置することができます。

図8 タブ内に項目を配置する

このタブコンテナに、複数のタブを用意することができます。スクリーンエディタでタブコンテナを選択後、「タブ追加」ボタンを押下します。

図9 タブを追加する

タブ毎にラベルを指定できます。

図9 追加したタブにラベルを設定する

同じように項目をドラッグ&ドロップして、タブ内に配置します。

図10 新しいタブに項目を配置する
タブからタブへの項目の配置を行うことはできません。いったんタブの外へ項目を移し、それから移動先のタブを選択し、項目を移動してください。

スクリーンエディタの編集を保存する

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

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

リポジトリの確認

ここまでの設定が、どのようにリポジトリに反映されたかを確認します。「リポジトリ」タブを開きます。「レイアウト名」タブには、タブのラベル名として入力した値が反映されていることがわかります。

図12 リポジトリの確認 (1)

「グループ・タブ」の内容を確認します。並び方向が「タブ」となっています。

図13 リポジトリの確認 (2)
開発者はリポジトリを直接、編集することもできます。ここで編集した内容は、スクリーンエディタに反映されます。

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

図14 デフォルトタブが有効になっている

レイアウト設計

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

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

リポジトリの確認

リポジトリを確認します。「デフォルトタブ」がチェックされています。

図16 リポジトリの確認

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

図17に例を示します。このモデルは「問い合わせ」タブをデフォルトタブと指定しています。新規登録画面を開くと、問い合わせタブが最初に選択されます。

図17 デフォルトタブの動作 (1)

ここでは「対応状況」項目が "未回答" のとき、デフォルトタブを「回答」とするように設定しました。

図18 デフォルトタブの動作 (2)

更新画面を開くと、デフォルトタブが「回答」に切り替わったことがわかります。

図19 デフォルトタブの動作 (3)

準備

ここではラジオボタンの値 (ID部) によってデフォルトタブを制御する例を説明します。図20の項目を追加します。

図20 対応状況項目を追加する

参照先の選択肢モデル「対応状況マスタ」は次のように設定しました。

図21 対応状況マスタモデル

レイアウト設計

"基本情報","問い合わせ","回答" という3つのタブを用意します。

図22 3つのタブを用意する

"問い合わせ" タブをデフォルトと指定しておきます。条件が合致しない場合、この設定が有効になります。

図23 デフォルトタブを指定する(条件が合致しない場合)

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

項目ID=値

今回は、status 項目の値 (ID部) が 1 のとき、すなわち"未回答"のときは「回答」タブをデフォルトとするようにしました。

このようにモデル参照項目を用いる場合、ID部のみが利用できます。
図24 デフォルトタブ条件の指定

設定後、リポジトリを保存します。

リポジトリの確認

リポジトリを確認します。「デフォルトタブ」に表示条件が含まれています。

図25 リポジトリの確認

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

レイアウト設計

スクリーンエディタで、タブの中にドラッグ&ドロップ操作でタブを含めることができます。

図27 タブの入れ子 (1)

入れ子のタブに、ドラッグ&ドロップ操作で項目を配置することができます。

図28 タブの入れ子 (2)
図29 タブの入れ子 (3)
図30 タブの入れ子 (4)

リポジトリの確認

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

レイアウト>レイアウト
図31 リポジトリの確認 (1)

入れ子の場合、異なるタブ番号が割り当てられます。

図32 リポジトリの確認 (2)
入れ子となったタブに「デフォルトタブ」を指定することもできます。
同じ階層のタブ同士でデフォルトタブをそれぞれ設定することができます。

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

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

レイアウト設計

スクリーンエディタで、タブの中にグループを作成することができます。

図34 タブの中にグループを作成し、横並び設定を行った

リポジトリの確認

タブ名のあとに「>」文字を続けてグループ名がつながっています。

図35 リポジトリの確認 (1)

「グループの表示方法」と「並び方向」もそれぞれ反映されています。

図36 リポジトリの確認 (2)

複数のタブコンテナを用意することができます。

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

レイアウト設計

一つ目のタブコンテナを用意します。

図 一つ目のタブコンテナ

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

図 二つ目のタブコンテナを作成する

二つ目のタブコンテナに項目をドラッグ&ドロップして配置することができます。

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

リポジトリの確認

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

タブ番号は自動的に割り当てられます。
図 リポジトリの確認

タブレイアウトの表示位置をドラッグ&ドロップで変更することができます。

図 タブレイアウトの位置を変更した例

レイアウト設計

タブコンテナを選択し、ドラッグ&ドロップで位置を移動させてください。

図 タブレイアウトの位置を移動する (1)

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

図 タブレイアウトの位置を移動する (2)