ウィザードとタブレイアウト最終更新日: 2020年9月4日
R8 | R9

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

ウィザード

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

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

図1 ウィザードの画面例

タブレイアウト

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

図2 タブレイアウトの利用

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

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

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

図3 顧客モデル
図4 タブレイアウト
  1. モデルの編集画面で「レイアウト>詳細」タブをクリックして開きます。初期状態では定義順に項目が並んでいます。
    図5 初期のレイアウト
  2. 左側の欄の「タブ」をクリックして開き、その中にあるタブコンテナの「追加」ボタンをクリックします。
    画面右側のスクリーンエディタ部に新しいタブが用意されます。
    図6 タブコンテナを追加する
  3. 右側のスクリーンエディタでタブをクリックして選択し、左側でラベル(タブ名)を入力します。
    ここでは「基本情報」としました。
    図7 ラベル名の設定
  4. 項目をドラッグ&ドロップして、タブ内に項目を配置します。
    図8 タブ内に項目を配置する
  5. このタブコンテナの中に、タブをもう一つ追加します。
    このタブをクリックして選択した状態で、「タブ設定」の枠内の「追加」ボタンをクリックします。
    図9 タブを追加する
  6. 新しいタブがタブコンテナの中に追加されました。
    先程の「基本情報」タブと同様の手順で、ラベル名を編集して項目をドラッグ&ドロップで追加します。
    図10 追加したタブにラベルを設定する

    注意

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

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

    重要

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

    図11 レイアウトの保存

デフォルトタブの指定

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

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

設定方法

  1. デフォルト表示したいタブを選択し、左側のタブ設定の「デフォルト表示タブ」をチェックします。
    ※デフォルト指定できるタブは一つだけです。
    図13 デフォルトタブの設定
  2. 左側の設定欄の上部にある「レイアウト設定保存」ボタンを押下し、編集内容を保存します。
    この操作により、リポジトリに反映されます。
    図14 レイアウトの保存

    重要

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

デフォルトタブの制御

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

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

図15 デフォルトタブの動作

設定方法

  1. 「問い合わせ」タブを選択し、左側のタブ設定で「デフォルト表示タブ」にチェックを入れます。
    条件に合致しない場合、この設定が有効になります。
    図16 デフォルトタブを指定する(条件が合致しない場合)
  2. 「回答」タブを選択し、条件を指定します。書式は次のようになります。
    項目ID=値
    今回は、status 項目の主キーの値が 1 であること(すなわち「未回答」のとき)を条件に指定します。
    図17 デフォルトタブ条件の指定

    注意

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

  3. 最後に、リポジトリを保存します。
    図18 リポジトリの確認

タブの入れ子

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

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

設定方法

  1. 入れ子にしたいタブをドラッグ&ドロップします。
    図20 タブの入れ子
  2. 最後に、レイアウト情報を保存します。
    図21 レイアウトの保存

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

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

図22 タブレイアウト内に横並びグループを作成

設定方法

  1. スクリーンエディタで、タブの中にグループを作成します。
    グループの作成方法の詳細はこちらをご覧ください。
    図23 タブの中にグループを作成
  2. レイアウト設定を保存します。
    図24 レイアウトの保存

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

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

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

設定方法

  1. 一つ目のタブコンテナを作成します。
    図26 一つ目のタブコンテナ
  2. タブの「追加」ボタンをクリックし、二つ目のタブコンテナを作成します。
    図27 二つ目のタブコンテナを作成する
  3. 二つ目のタブコンテナに項目をドラッグ&ドロップして配置します。
    図28 項目の配置
  4. 「レイアウト設定保存」ボタンを押下して、設定を保存します。
    図29 レイアウトの保存

タブの移動

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

設定方法

  1. タブコンテナを選択し、ドラッグ&ドロップします。
    図30 タブの移動
  2. 移動後は「レイアウト設定保存」を行なってください。
    図31 レイアウトの保存