本文へ移動
Wagby11
マニュアルのグループを選ぶ

WAGBY11 MANUAL / 23

メニューを階層化する

業務ごとに入口をまとめ、タブと階層メニューを使って目的の画面を探しやすくできます。

最終更新日:

メニューの小目次へ

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

業務ごとに入口をまとめ、タブと階層メニューを使って目的の画面を探しやすくできます。

2. Wagby11で実現できること

「業務メニュー」の中に「日常業務」「関連情報」を用意し、日常業務の配下を「備品申請」「案件の確認」に分ける例です。

業務メニューの直下に、業務や用途ごとのフォルダを表示します。
業務メニューの直下に、業務や用途ごとのフォルダを表示します。
日常業務を開くと、その直下の項目と「戻る」が表示されます。
日常業務を開くと、その直下の項目と「戻る」が表示されます。

メニュー画面では、選択したタブの直下を一階層ずつ表示します。フォルダを選ぶとその配下へ進み、「戻る」で一つ上へ戻ります。タブを切り替えると、そのタブの最上位へ戻ります。

利用者が探す業務のまとまりで分け、階層を深くしすぎない構成にします。親と子の表示権限は組み合わせて評価され、表示できる子がなくなったフォルダは表示されません。

3. AIへの指示例

最小限の指示例

備品申請と案件の確認を、業務別の階層メニューにまとめてください。

AIはタブやフォルダの名称、階層の深さ、項目の分け方と順番を類推して補います。利用者が普段どの業務から探すかを伝えると、分類を決めやすくなります。

より詳細な指示例

業務メニューの直下に日常業務と関連情報を用意してください。日常業務には備品申請と案件の確認のフォルダを置き、それぞれの中に必要な画面への入口をまとめます。既存メニューは残し、一階層ずつ開く標準操作と戻る操作で移動できることを確認してください。
既存の定義・データ・権限を保持し、Wagby11のguide・referenceを確認してください。表示文言をUTF-8のpropertiesへ用意し、生成・ビルド後に対象利用者の画面と実効メニューを確認してください。

4. 編集されるAppSchemaの例

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

id: menu-manual
order: 5000
title_key: menu.manual_nav.title
children:
  - kind: menu
    id: daily-work
    order: 10000
    title_key: menu.manual_nav.daily
    children:
      - kind: menu
        id: supplies
        order: 10000
        title_key: menu.manual_nav.supplies
        children:
          - kind: item
            id: supply-search
            order: 10000
            title_key: menu.manual_nav.supply_search
            target: { kind: entity, entity: WorkflowRequest, screen: search }

メニューYAMLはmenusフォルダへ配置し、title_keyに対応する表示文言を同名のpropertiesへ用意します。これは階層に関係する部分の抜粋です。メニューは既存の画面へ案内する定義で、画面自体を生成するものではありません。

5. 参考資料

メニュー階層
designer/docs/appschema/html/guide/11-menu/02-menu-hierarchy.html
メニュー概要
designer/docs/appschema/html/guide/11-menu/01-menu-overview.html
メニュー定義
designer/docs/appschema/html/reference/13-menus.html