ラベル・ページタイトル・説明文を設定する

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

利用者が分かる項目名や見出しを表示し、画面の目的を説明できます。ラベルの位置や幅も調整できます。

2. Wagby11で実現できること

作業名のラベルは入力欄の左に置きました。項目名はモデルの日本語名から生成します。画面の見出しは「作業計画を登録」、説明文は入力の進め方にしています。

詳細画面は「作業計画の内容」として、登録とは異なる目的を伝えます。ページタイトルはパンくずやブラウザーのタブにも反映されます。

項目群の途中に共通の案内や小見出しを置く場合は、項目の間に見出し・説明文を配置するを参照してください。

3. AIへの指示例

最小限の指示例

作業名のラベルを左に置き、画面タイトルと入力の案内を分かりやすくしてください。

AIは項目名とページ見出し、ラベル位置を類推して補います。登録・更新・詳細でどのような文言にするかを伝えると、画面の目的を揃えられます。

より詳細な指示例

projectNameの日本語名を作業名にし、uidefsでlabel.positionをleft、label.width30%、value.width70%にしてください。page_headers.create.titleを作業計画を登録、descriptionを基本情報を入力し、進捗・予算を確認して保存してください。にします。詳細のtitleは作業計画の内容にしてください。
既存のモデル・項目・主キー・データ・権限を保持し、Wagby11のguide・referenceを確認してください。メニューと一般利用者向け操作マニュアルを更新し、生成・ビルド完了後に起動して画面と保存結果を確認してください。

4. 編集されるAppSchemaの例

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

ui:
  page_headers:
    create:
      title: 作業計画を登録
      description: 基本情報を入力し、進捗・予算を確認して保存してください。
    detail:
      title: 作業計画の内容
# uidefsの配置項目に指定
# presentation:
#   label: { position: left, width: 30% }
#   value: { width: 70% }

ページタイトルは完成した文言を指定し、モデル名などを自動付加しません。メニュー名やボタン名の変更とは別です。ラベルを左に置く場合の幅は、ラベル部・内容部を一組で指定します。

5. 参考資料

guide：ラベル・ページタイトル・説明文を設定する

designer/docs/appschema/html/guide/06-layout/07-labels.html

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

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

guide：ページタイトルと説明文

designer/docs/appschema/html/guide/07-screens/26-page-headers.html