項目幅・入力フィールド長・テキストエリアの行数を設定する

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

項目が画面で占める幅と、入力欄の見た目の長さを分けて調整できます。長文には複数行の入力欄を用意できます。

2. Wagby11で実現できること

作業名は同じ行の60%、担当者は40%の領域に置きます。作業名の入力欄は40文字相当、担当者は20文字相当にしています。

補足事項は5行のテキストエリアです。表示の幅や行数を変えても、保存できる文字数は別の長さ定義に従います。

3. AIへの指示例

最小限の指示例

作業名を広く、担当者を短くし、補足事項は5行で入力できるようにしてください。

AIは項目の領域と入力欄の長さ、保存文字数を類推して補います。どれを広げたいのか、複数行にしたいのかを分けて伝えます。

より詳細な指示例

uidefsのprojectNameはwidth60%、ownerNameは40%にしてください。ui.fieldsのinput.sizeはそれぞれ40と20、notesはtextarea・rows5・size60にします。文字列lengthは維持して、画面の幅と保存可能長を混同しないよう確認してください。
既存のモデル・項目・主キー・データ・権限を保持し、Wagby11のguide・referenceを確認してください。メニューと一般利用者向け操作マニュアルを更新し、生成・ビルド完了後に起動して画面と保存結果を確認してください。

4. 編集されるAppSchemaの例

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

ui:
  fields:
    - name_en: projectName
      input: { size: 40 }
    - name_en: ownerName
      input: { size: 20 }
    - name_en: notes
      input: { control: textarea, rows: 5, size: 60 }

widthは配置領域、input.sizeは入力欄のおおよその文字幅、rowsは表示行数です。同じセクションではwidthを全項目に指定するか、全項目で省略します。

5. 参考資料

guide：項目幅・入力フィールド長・テキストエリアの行数を設定する

designer/docs/appschema/html/guide/06-layout/06-field-width.html

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

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