AtlasX

Name S.

Login

Menu

Menu Configuration

ในส่วนของ Menu ที่ navigation bar และ sidebar เราสามารถกำหนดค่าต่าง ๆ ได้ผ่านไฟล์ config เมื่อเราทำการ build Angular App ก็จะได้ menu ตามที่ต้องการ

Menu Configuration Desktop

Menu Configuration Desktop

Menu Configuration Mobile

Menu Configuration Mobile

รวมถึงเรายังสามารถกำหนด menu ให้แสดงผลได้ตามสิทธิ์ของผู้ใช้งาน โดยจะแสดงเฉพาะ menu ที่ผู้ใช้งานมีสิทธิ์เท่านั้น

ในการตั้งค่า menu จะแบ่งออกเป็น 4 ส่วนหลัก ๆ คือ

  1. Navigation Bar
  2. Sidebar
  3. Mobile Navigation Bar
  4. Mobile Sidebar

ซึ่งทั้งหมดจะอยู่ที่ไฟล์ ClientApp/src/app/core/config/menu-config.ts ซึ่งเราได้กำหนดรูปแบบของ config ไว้ดังนี้

export interface MenuConfigModel {
  navItemGroup?: NavItemGroup[]
  siderItems?: SiderItems[]
  mobileNavItems?: MenuItem[]
  mobileSubMenuItems?: TreeNode<MenuItem>[]
}

ในการกำหนด menu ใน Navigation Bar เราจะแบ่งออกเป็นกลุ่ม โดยแต่ละกลุ่มจะถูกกั้นด้วย separator ซึ่งจะแสดงเป็นเส้นขีด ๆ ระหว่างกลุ่มดังรูป

Menu Configuration Desktop

ซึ่ง property ที่ใช้กำหนด กลุ่มของ Navigation Bar คือ navItemGroup: NavItemGroup[] ซึ่งมีรูปแบบดังนี้

export interface NavItemGroup {
  items?: NavItem[]
  position: 'start' | 'end'
}

สังเกตได้ว่าจะประกอบไปด้วย properties 2 ตัวคือ items และ position หมายความว่ากลุ่มของ Navigation Bar จะประกอบไปด้วย menu อะไรบ้างอีกทั้งยังกำหนดได้ว่าจะแสดงผล menu ที่ด้านซ้ายหรือด้านขวาของ Navigation Bar

ซึ่ง items: NavItem[] จะประกอบไปด้วย properties ต่าง ๆ ดังนี้

export interface MenuItem {
  title?: string
  icon?: PrimeIcons
  functionId?: string
  url?: string
}

export interface NavItem extends MenuItem {
  dropdownItems?: NavDropdownItem[]
  showInTablet?: boolean
  type: 'link' | 'dropdown'
}

menu แต่ละตัวจะประกอบไปด้วย properties ต่าง ๆ ดังนี้

  • title : ชื่อของ menu
  • icon : ไอคอนของ menu ซึ่งจะใช้ไอคอนจาก PrimeIcons
  • functionId : id ของ menu ที่เก็บในระบบของ UM สามารถกำหนดสิทธิการมองเห็นของ menu ได้จาก id นี้
  • url : url ของ menu ที่จะ redirect ไป สามารถกำหนดเป็น angular path หรือ external url ก็ได้
  • dropdownItems : กำหนด menu ย่อยที่จะแสดงใน dropdown ของ menu นี้ (เฉพาะ type เป็น dropdown เท่านั้น)
  • showInTablet : กำหนดว่าจะแสดง menu นี้ในหน้าจอที่มีขนาดตามมาตรฐาน tablet หรือไม่
  • type : กำหนดว่า menu นี้เป็นประเภท link หรือ dropdown
Note

หากต้องการใช้ชื่อ menu จากระบบ UM เราสามารถกำหนด functionId แล้วไม่ต้องกำหนด title ได้ template จะไปดึงชื่อ menu จากระบบ UM แทน

ในส่วนของ dropdownItems จะประกอบไปด้วย properties ต่าง ๆ ดังนี้

export interface NavDropdownItem {
  title?: string
  icon?: PrimeIcons
  functionId?: string
  url?: string
}

เหมือนกับ NavItem แต่ไม่มี property type และ dropdownItems เพราะเป็น menu ย่อยของ dropdown และไม่สามารถมี dropdown ซ้อนกันได้

Note

🚀 ใน AtlasX Web Template (Canberra) จะมีการรองรับการทำ dropdown ซ้อนทับกัน

ตัวอย่างการกำหนดค่าให้กับ navItemGroupคลิกเพื่อดูตัวอย่างโค้ด

navItemGroup: [
    {
      items: [
        {
          title: 'Home',
          icon: PrimeIcons.HOME,
          url: '/',
          type: 'link',
          showInTablet: true,
        },
        {
          title: 'Product',
          url: 'http://portal-atlasx.cdg.co.th',
          type: 'link',
        },
      ],
      position: 'start',
    },
    {
      items: [
        {
          title: 'Standard Tools',
          functionId: 'STD-01',
          type: 'dropdown',
          dropdownItems: [
            {
              functionId: 'STD-01',
            },
            {
              functionId: 'STD-02',
            },
          ],
        },
        {
          functionId: 'GIS-01',
          type: 'dropdown',
          dropdownItems: [
            {
              functionId: 'GIS-02',
              icon: PrimeIcons.MAP,
              url: '/',
            },
          ],
        },
      ],
      position: 'start',
    },
    {
      items: [
        {
          title: 'Dropdown-1',
          type: 'dropdown',
          showInTablet: true,
          dropdownItems: [
            {
              title: 'Dropdown-1-1',
              url: '/',
            },
          ],
        },
        {
          title: 'Dropdown-2',
          type: 'dropdown',
          dropdownItems: [
            {
              title: 'Dropdown-2-1',
              url: '/',
            },
          ],
        },
      ],
      position: 'end',
    },
  ],

ตัวอย่าง menu ที่ไม่มีสิทธิ์ใช้งานและ menu ที่มีสิทธิ์ใช้งาน

Navbar Menu without Permission

Navbar Menu without Permission

Navbar Menu with Permission

Navbar Menu with Permission

ในการกำหนด menu ใน SideBar เราสามารถกำหนดแต่ละ menu โดยใช้รูปแบบดังนี้

export interface SiderItems {
  item?: SiderItem
  position: 'start' | 'end'
}

สังเกตได้ว่าจะประกอบไปด้วย properties 2 ตัวคือ item และ position ซึ่งก็คือการกำหนด menu ว่ามีส่วนประกอบอะไรบ้างอีกทั้งยังกำหนดได้ว่าจะแสดงผล menu ที่ด้านบนหรือด้านล่างของ Sider

ในส่วนของ item จะประกอบไปด้วย properties ต่าง ๆ ดังนี้

import { PrimeIcons, TreeNode } from 'primeng/api'

export interface MenuItem {
  title?: string
  icon?: PrimeIcons
  functionId?: string
  url?: string
}

export interface SiderItem extends MenuItem {
  subMenu?: TreeNode<MenuItem>[]
}

menu แต่ละตัวจะประกอบไปด้วย properties ต่าง ๆ ดังนี้

  • title : ชื่อของ menu
  • icon : ไอคอนของ menu ซึ่งจะใช้ไอคอนจาก PrimeIcons
  • functionId : id ของ menu ที่เก็บในระบบของ UM สามารถกำหนดสิทธิการมองเห็นของ menu ได้จาก id นี้
  • url : url ของ menu ที่จะ redirect ไป สามารถกำหนดเป็น angular path หรือ external url ก็ได้
  • subMenu : กำหนด sub menu ของ menu นี้ ซึ่งจะต้องกำหนดให้อยู่ในรูปแบบของ TreeNode<MenuItem>[] ของ PrimeNG
Note

หากต้องการใช้ชื่อ menu จากระบบ UM เราสามารถกำหนด functionId แล้วไม่ต้องกำหนด title ได้ template จะไปดึงชื่อ menu จากระบบ UM แทน

ตัวอย่างรูปแบบการกำหนดค่าใน subMenu จะเป็นดังนี้ (บางส่วนที่ใช้งาน)

export interface TreeNode<MenuItem> {
  label?: string
  data?: MenuItem
  children?: TreeNode<MenuItem>[]
  expanded?: boolean
  type?: string
}
  • label : ชื่อของ sub menu
  • data : ข้อมูลของ sub menu ซึ่งจะเป็น MenuItem ที่เรากำหนดไว้ด้านบน
  • children : กำหนด sub menu ของ sub menu นี้ ซึ่งจะต้องกำหนดให้อยู่ในรูปแบบของ TreeNode<MenuItem>[] ของ PrimeNG
  • expanded : กำหนดว่า sub menu นี้จะเปิดอยู่หรือปิดอยู่
  • type : กำหนดประเภทของ sub menu (กำหนดเฉพาะ Node ที่ลึกสุดเท่านั้น)

ตัวอย่างการกำหนดค่าใน subMenu จะเป็นดังนี้คลิกเพื่อดูตัวอย่างโค้ด

siderItems: [
  {
    item: {
      title: 'Dashboard',
        icon: PrimeIcons.TH_LARGE,
        url: '/dashboard',
      },
      position: 'start',
    },
    {
      item: {
        title: 'Report',
        icon: PrimeIcons.FILE_PDF,
        subMenu: [
          {
            label: 'Report 1',
            expanded: true,
            children: [
              {
                label: 'Sub Report 1-1',
                data: {
                  url: '/sub-report-1-1',
                },
                type: 'link',
              },
              {
                label: 'Sub Report 1-1',
                expanded: true,
                children: [
                  {
                    label: 'Sub Report 1-2',
                    data: {
                      url: '/sub-report-1-2',
                    },
                    type: 'link',
                  },
                ],
              },
            ],
          },
          {
            label: 'Report 2',
            expanded: true,
            children: [
              {
                label: 'Sub Report 2-1',
                data: {
                  url: '/sub-report-2-1',
                },
                type: 'link',
              },
              {
                label: 'Sub Report 2-1',
                expanded: true,
                children: [
                  {
                    label: 'Sub Report 2-2',
                    data: {
                      url: '/sub-report-2-2',
                    },
                    type: 'link',
                  },
                  {
                    label: 'Sub Report 2-2',
                    data: {
                      url: '/sub-report-2-2',
                    },
                    type: 'link',
                  },
                  {
                    label: 'Sub Report 2-2',
                    data: {
                      url: '/sub-report-2-2',
                    },
                    type: 'link',
                  },
                ],
              },
            ],
          },
        ],
      },
      position: 'start',
    },
    {
      item: {
        title: 'Data List',
        icon: PrimeIcons.FOLDER,
        url: '/mis',
      },
      position: 'start',
    },
    {
      item: {
        title: 'Function List',
        icon: PrimeIcons.COG,
        subMenu: [
          {
            label: 'ระบบภูมิศาสตร์ สารสนเทศ',
            expanded: true,
            children: [
              {
                data: {
                  functionId: 'GIS-01',
                },
                expanded: true,
                children: [
                  {
                    label: 'Simple Search',
                    data: {
                      url: '/gis/simple-search'
                    },
                    type: 'link'
                  },
                  {
                    data: {
                      functionId: 'GIS-02',
                    },
                    children: [
                      {
                        data: {
                          functionId: 'GIS-04',
                          url: 'https://portal-atlasx.cdg.co.th',
                        },
                        type: 'link',
                      },
                    ],
                  },
                  {
                    data: {
                      functionId: 'GIS-03',
                      url: 'https://portal-atlasx.cdg.co.th',
                    },
                    type: 'link',
                  },
                ],
              },
              {
                data: {
                  functionId: 'GIS-05',
                  url: 'https://portal-atlasx.cdg.co.th',
                },
                type: 'link',
              },
            ],
          },
          {
            label: 'ระบบจัดการผู้ใช้งาน',
            expanded: true,
            children: [
              {
                data: {
                  functionId: 'UM-01',
                  url: 'https://portal-atlasx.cdg.co.th',
                },
                type: 'link',
              },
              {
                data: {
                  functionId: 'UM-02',
                  url: 'https://portal-atlasx.cdg.co.th',
                },
                type: 'link',
              },
              {
                data: {
                  functionId: 'UM-03',
                  url: 'https://portal-atlasx.cdg.co.th',
                },
                type: 'link',
              },
            ],
          },
        ],
      },
      position: 'start',
    },
  ],

ตัวอย่าง menu ที่ไม่มีสิทธิ์ใช้งานและ menu ที่มีสิทธิ์ใช้งาน

Sider Menu without Permission

Sider Menu without Permission

Sider Menu with Permission

Sider Menu with Permission

Mobile Navigation Bar Configuration

Mobile Sidebar Configuration