一覧・詳細の項目スタイルを設定する

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

重要な値を色や背景、文字の太さで強調できます。金額の右寄せや桁区切りも指定できます。

2. Wagby11で実現できること

作業計画の一覧では、リスク点数80以上を赤・太字にし、重要なお知らせに淡い背景を付けています。予算は桁区切りと円を付け、右寄せで表示します。

詳細にも同じ項目設定を使えます。表示書式や色を変えても保存した数値そのものは変わりません。

参照先から取り出した値の表示については、ルックアップ項目の表示書式の継承を参照してください。

項目とは独立した見出し・固定説明文やセクション名の装飾は、見出しと説明文を装飾するを参照してください。

数値入力欄で桁区切り表示と元の値を切り替える動作は、桁区切り表示と編集する値を切り替えるを参照してください。

3. AIへの指示例

最小限の指示例

高いリスク点数を赤くし、重要なお知らせを強調、予算を右寄せにしてください。

AIは強調する条件、色、適用画面を類推して補います。色だけに頼らず、数値や文言も読めるようにする意図を伝えます。

より詳細な指示例

riskScoreが80以上なら赤・太字、それ以外は灰色にするstyle_expressionを指定してください。attentionは赤文字・淡い赤の背景・太字、budgetは#,##0と円の書式、value.alignはendにします。一覧と詳細で確認してください。
既存のモデル・項目・主キー・データ・権限を保持し、Wagby11のguide・referenceを確認してください。メニューと一般利用者向け操作マニュアルを更新し、生成・ビルド完了後に起動して画面と保存結果を確認してください。

4. 編集されるAppSchemaの例

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

ui:
  fields:
    - name_en: riskScore
      presentation:
        value:
          style_expression: 'riskScore == null ? "" : (riskScore >= 80 ? "color:#C7243A;font-weight:700" : "color:#555555")'
    - name_en: budget
      format: { pattern: '#,##0', suffix: 円 }
      presentation:
        value: { align: end }

使用できるCSSは限定されています。幅や余白などの配置変更は、項目スタイルではなくレイアウトの設定を使います。固定スタイルと式によるスタイルを併用できます。

5. 参考資料

guide：一覧・詳細の項目スタイルを設定する

designer/docs/appschema/html/guide/06-layout/11-output-style.html

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

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

reference：一覧・詳細の項目スタイル

designer/docs/appschema/html/reference/18-output-style.html