行と列で配置する

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

関連する短い項目を横に並べ、説明や長文は縦に置けます。利用者が入力する順番に合わせて画面を構成できます。

2. Wagby11で実現できること

作業名と担当者、メールアドレスと電話番号を、それぞれ同じ行に並べています。

進捗・予算では、評価項目を横並び、予算とお知らせを縦に配置しました。段の分け方と項目の定義順で、入力順を整えられます。

3. AIへの指示例

最小限の指示例

作業名と担当者を横に並べ、予算とお知らせは縦に置いてください。

AIは同じ行へまとめる項目と、縦に読む項目を類推して補います。狭い画面でも使うこと、入力順序も伝えると配置を決めやすくなります。

より詳細な指示例

作業内容のdirectionをrowとしてprojectNameとownerNameを置いてください。予算とお知らせのdirectionはcolumnにします。幅の指定は同じセクション内の全項目へ揃え、登録・詳細の配置を確認してください。
既存のモデル・項目・主キー・データ・権限を保持し、Wagby11のguide・referenceを確認してください。メニューと一般利用者向け操作マニュアルを更新し、生成・ビルド完了後に起動して画面と保存結果を確認してください。

4. 編集されるAppSchemaの例

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

sections:
  - title: 作業内容
    direction: row
    fields:
      - { name_en: projectName, width: 60% }
      - { name_en: ownerName, width: 40% }
  - title: 予算とお知らせ
    direction: column
    fields: [{ name_en: budget }, { name_en: attention }]

横並びでも項目の読み上げ順は定義順を基準にします。画面幅と内容に合わせ、固定幅に依存し過ぎない配置を指定します。

5. 参考資料

guide：行と列で配置する

designer/docs/appschema/html/guide/06-layout/05-rows-and-columns.html

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

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