タブで項目を分ける

1. このページで伝える機能

項目が多い画面を、意味のあるタブへ分けられます。利用者が目的のまとまりへ切り替えながら入力・確認できます。

2. Wagby11で実現できること

作業計画は「基本情報」と「進捗・予算」に分けました。最初は基本情報を開きます。

進捗・予算へ切り替えると、そのタブの入力欄が表示されます。基本情報の入力途中の値を残したまま切り替えられます。

3. AIへの指示例

最小限の指示例

作業計画を基本情報と進捗・予算の二つのタブに分けてください。

AIは各タブへ置く項目と、最初に開くタブを類推して補います。よく入力する順番と、まとめたい項目を具体的に伝えます。

より詳細な指示例

LayoutProjectのuidefsでbasicとstatusのタブを用意し、default_tabをbasicにしてください。基本情報へ作業名・担当者・連絡先・補足事項、進捗・予算へ進捗率・リスク点数・予算・お知らせを配置し、タブ切替で入力が保持されることを確認します。
既存のモデル・項目・主キー・データ・権限を保持し、Wagby11のguide・referenceを確認してください。メニューと一般利用者向け操作マニュアルを更新し、生成・ビルド完了後に起動して画面と保存結果を確認してください。

4. 編集されるAppSchemaの例

以下は関連する定義の抜粋です。構文を覚えなくても、画面でどう見せたいかをAIへ伝えられます。

version: 1
layouts:
  - default_tab: basic
    tabs:
      - id: basic
        title: 基本情報
        sections:
          - fields: [{ name_en: projectName }, { name_en: ownerName }]
      - id: status
        title: 進捗・予算
        sections:
          - fields: [{ name_en: progress }, { name_en: budget }]

タブの識別子と表示タイトルを分けて指定します。screensを使うと画面別の配置を用意できます。入力エラーのある項目を見つけやすい構成にします。

5. 参考資料

guide：タブで項目を分ける

designer/docs/appschema/html/guide/06-layout/03-tabs.html

reference：uidefs画面レイアウト定義

designer/docs/appschema/html/reference/15-ui-layout.html