Menu Configuration - ReportEOrg/Bezel GitHub Wiki
As dynamically loading content into div may result in some form of client browser memory leak (e.g. javascript global variable and function defined in the content page still reside after replaced by another content page),
a hybrid approach is used where
-
features within same "group" will use single page implementation (only content page is replaced),
-
navigate to different feature "group" will lead to full page reload (clean up residual variable or function occupying the browser memory)
The menu configuration is kept in single JSON format file, and the buildMenu() function will construct the menu item(s) accordingly.
The configuration support 2 level of tree menu items.
The top level menu item attributes
| # | Attribute Name | Description |
|---|---|---|
| 1 | id | Identity of menu item |
| 2 | group | group name of top level menu item |
| 3 | name | Display name |
| 4 | iconClass | OPTIONAL class name for icon |
| 5 | href | MANDATORY ONLY if NO subitem the url to access the feature. MUST contain "template" html page with "group" and "target" query parameters |
| 6 | pageContent | MANDATORY ONLY if NO subitem the content page name to be loaded in the include div |
| 7 | subMenuItems | OPTIONAL list of submenu item(s) |
Sub Menu Item Attributes
| # | Attribute Name | Description |
|---|---|---|
| 1 | id | Identity of menu item |
| 2 | name | Display name |
| 3 | href | the url to access the feature. MUST contain "template" html page with "group" and "target" query parameters |
| 4 | pageContent | the content page name to be loaded in the include div |
Sample Configuration
{
"menuItems":[
{
"id" : "Dashboard",
"group" : "Dashboard",
"name" : "Dashboard",
"iconClass": "fa fa-dashboard fa-fw",
"href" : "../dashboard/dashboard.html?group=Dashboard&target=Dashboard",
"pageContent" : "dashboard_content.html"
},
{
"id" : "Model",
"group" : "Model",
"name" : "Model",
"iconClass": "fa fa-table fa-fw",
"subMenuItems": [
{
"id" : "ManageModel",
"name": "Manage Model",
"href": "../model/model.html?group=Model&target=ManageModel",
"pageContent" : "model_content.html"
},
{
"id" : "NewSimpleTableModel",
"name": "New Simple Table Model",
"href": "../model/model.html?group=Model&target=NewSimpleTableModel",
"pageContent" : "model_wizard_simple_table.html"
},
{
"id" : "NewJoinedQueryModel",
"name": "New Joined Query Model",
"href": "../model/model.html?group=Model&target=NewJoinedQueryModel",
"pageContent" : "model_wizard_joined_query.html"
} `
]
}
]
}