アイコンと並び順を設定する

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

アイコンや分類色で用途を見分けやすくし、よく使う項目を意図した順番で表示できます。

2. Wagby11で実現できること

備品申請の検索に青い検索アイコン、登録に緑の追加アイコンを付けます。検索を先に、登録を後に並べ、表示名と合わせて操作の違いを伝えます。

並び順は同じ親を持つ項目の中で、orderの小さい順に決まります。同じ値ならID順です。後で項目を挿入しやすいよう、10,000、20,000のように間隔を空けられます。異なるフォルダの項目まで通し番号にする必要はありません。

アイコンはBootstrap Iconsのアイコン名を指定します。分類色はblue・green・purple・orange・cyan・grayから選び、アイコンと淡い背景に反映されます。親の色やアイコンは子へ継承しないため、必要な項目へそれぞれ指定します。色だけで意味を伝えず、分かりやすい表示文言も付けます。

3. AIへの指示例

最小限の指示例

検索と登録のメニューを、アイコンと色で見分けやすくしてください。

AIはアイコン名、色、項目の順番を類推して補います。業務の分類に色を合わせるのか、操作の種類に色を合わせるのかを伝えると統一しやすくなります。

より詳細な指示例

備品申請の検索はorder 10000、icon search、icon_color blueにし、登録はorder 20000、icon plus-circle、icon_color greenにしてください。表示名も残し、検索・登録の順で見えるようにします。親の設定を引き継ぐ前提にせず、各項目へ指定してください。
既存の定義・データ・権限を保持し、Wagby11のguide・referenceを確認してください。表示文言をUTF-8のpropertiesへ用意し、生成・ビルド後に対象利用者の画面と実効メニューを確認してください。

4. 編集されるAppSchemaの例

以下は関連する定義の抜粋です。構文を覚えなくても、項目の名前・分類・遷移先・表示する利用者をAIへ伝えられます。

children:
  - kind: item
    id: supply-search
    order: 10000
    title_key: menu.manual_nav.supply_search
    icon: search
    icon_color: blue
    target: { kind: entity, entity: WorkflowRequest, screen: search }
  - kind: item
    id: supply-create
    order: 20000
    title_key: menu.manual_nav.supply_create
    icon: plus-circle
    icon_color: green
    target: { kind: entity, entity: WorkflowRequest, screen: create }

iconにはCSSクラス全体ではなくアイコン名だけを指定します。iconを省略してicon_colorだけを指定した場合は、共通のgridアイコンが使われます。

5. 参考資料

アイコンと並び順

designer/docs/appschema/html/guide/11-menu/06-icons-and-order.html

メニュー概要

designer/docs/appschema/html/guide/11-menu/01-menu-overview.html

メニュー定義

designer/docs/appschema/html/reference/13-menus.html