Menu in 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: is the left menu
topmenu: is the top menu

{
...
"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.

endpoint: where to send the request. If a datarow must be selected, you can add the /${id} to it. It means that the unique ID of the selected row will be send to the endpoint. This way the API can check which data is needed.
pagetype: different pagetypes are possible. In this sample it will open a form in the same tabpage as the parent, which is the grid.
pagesize: if the pagetype is a modal, the pagesize has to be defined: sm, md, lg and xl. By default md is used.
buttons: array with all the buttons that must be available.

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 lev

Login & Menu

Left or Top menu

Standard menu item

Onclick part of the item

Menu item with submenu

How can we help?