×
Menu
Index
Zoekopdracht
 
   
   
   
 
  (c) ABO Service bv, 2022

2.3. Menu in login response

 

Left or Top menu

 
The structure of the content with the menu items for the left and the top menu are identical. The only difference is the name of the array with data.
 
 
{
...
"menu": [
    {
     "title": "Customers.",
     "endpoint": "/customers",
     "pagetype": "tabgrid", 
     "hidefilter": "0",
     ....
     }
   ],
"topmenu": [
    {
     "title": "Form types samples",
     "icon": "+",
     "id": "",
     "submenu": [
       {
       "title": "Tab grid & Multi Form",
       "endpoint": "/customers",
       "pagetype": "tabgrid",
       ...
] } ] }
The reponse starts with configuration options, see 2.2 Login response, followed by the menu (left) and topmenu.
 
 
  • menu: the left menu system. Contains objects with items in a multi-level system. If a menu-tem has a submenu, it starts a new level.
  • topmenu: the top menu of the application. Also with multi-level.
  • submenu: if an object has a submenu array, it starts a new level.
 
 
The structure and content of the menu items in the left menu and the topmenu are identical. The following description is for both menu systems.
 

Standard menu item

 
{
 "title": "Zip codes",
 "endpoint": "/files/postnrs",
 "pagetype": "grid",
 "hidefilter": "0",
 "position": "top",
 "id": "zipcodes",
 "buttons": [
     "add",
     "delete",
     "edit",
     "exit",
     "print",
     "export"
 ],
 "onclick": {
     "endpoint": "/files/postnrs/${id}",
     "pagetype": "form",
     "buttons": [
         "add",
         "save",
         "list",
         "previous",
         "next",
         "exit"
     ]
 }
 }
 
  • title: title to be used in the menu.
  • endpoint: where to send the request to get the data.
  • pagetype: there are different pagetypes. Each type has it's own behaviour, see 2.4 page types. In this sample it's a grid that must be shown in his own tabpage.
  • pagesize: when using a modal pagetype, you also need to define the size of the modal popup. The default is medium. Possible values are sm, md, lg and xl.
  • hidefilter: 0 to show, 1 to hide. If no search is needed and all the data must be shown in the grid, the hidefilter is set to 1. To be used only with grids.
  • hidefilterrow: 0 to show, 1 to hide. To suppress the upper filter row in a grid.
  • position: top or bottom is used for grids. Default it is top to show the first rows. When using bottom it go to the last rows of the grid. This can be used to show the highest numbers, most recent entries, ...
  • groupable: 0 or 1 to activate the possibility to drag/drop a header to group in the grid.
  • draggable: if a row of the grid can be dragged to another object. If that object has an ondrop action, it will call the endpoint. This way you can drag a row to a button.
  • id: internal name used by BOA to keep the structure in the system. Must be unique.
  • buttons: all the buttons that must be available. The order isn't important, BOA will place them always in the same order.
  • icon: a letter/icon from the icon font to be placed before the menu item.
 
 

Onclick part of the item

 
You need to define what needs to happen when a user clicks on a row in the grid or want to add/edit a row. The onclick defines this and needs the following elements.
 
 

Menu item with submenu

 
To create a multi-level menu, a menu item can have an array with sub-items. This must be formed as follows:
 
{
 "title": "Files",
 "icon": "+",
 "id": "",
 "submenu": [
     {
     "title": "Zip codes",
     "endpoint": "/files/postnrs",
     "pagetype": "grid",
     "hidefilter": "0",
     "position": "top",
     "id": "zipcodes",
     "buttons": [
         "add",
         "delete",
         "edit",
         "exit",
         "print",
         "export"
     ],
     "onclick": {
         "endpoint": "/files/postnrs/${id}",
         "pagetype": "form",
         "buttons": [
             "add",
             "save",
             "list",
             "previous",
             "next",
             "exit"
         ]
         }
     },
     {
     "title": "Country codes",
     "endpoint": "/files/landcode?key=*1=1",
     "pagetype": "grid",
     "hidefilter": "1",
     "position": "top",
     "pagesize": "md",
     "id": "countrycodes",
     "buttons": [
         "add",
         "delete",
         "edit",
         "exit",
         "export"
     ],
     "onclick": {
         "endpoint": "/files/landcode/${id}",
         "pagetype": "modalform",
         "buttons": [
             "save",
             "previous",
             "next",
             "exit"
         ]
     }
     }
 
This is a sample where the title 'Files' will be shown in the menu, followed by a submenu.
 
  • title: name to show.
  • icon: BOA uses an icon font. You can use this font to display different icons. As developer it is possible to create your own font, and to replace our font. This way you can define your own icons for the buttons and menu options.
  • id: since this item is some kind of a headerline in the menu, an id is not needed.
  • submenu: defines a new level which is an array of standard menu items. Each element of the array will be shown as a new item. This submenu contains 2 items: Zip codes and Country codes.
 
Multi-level: The menu system is multi-level. A menu-item in a lower level can also have a submenu array. It will start a new level. This has no limits, but in good practice you shouldn't be use more than 4 levels.
 
The rules are the same for the menu (left menu) and the topmenu. Both has unlimited levels you can use.
 
 
When you have an option in a menu, the result when you click on the option vary according to the pagetype you use. See Pagetypes for all the possibilities.
 
See here for a complete menu sample.