Niagara 4 - Side Bar Menu
- Side Bar Animation Menu
- JSON Configuration
- Add icons to links
- Navigates to Station Assets Via Ords
- Dynamic Profile Image Loading
- Works in Web Browser & Workbench*
The Side Bar Menu is sophisticated, alluring side menu created with the slide effect on the
sub menu items.
When you hover over the side menu icons, menu items appears on the side in a block. It uses
Boxicons and you can set the
icon in the config file. Icon names can be found Here (Icons). The menu uses
json style config file so you can tailor it to your requirements. Fonts, logos, text,
colours can all be modified.
The position of the menu will always be in the top right corner of the px page and stretch
to 100% width. The menu will retain which sub menu item you have opened and navigated to.
The profile image and title is dynamic and comes from the user in the user service. See below for setup.
Before you start, copy the .jar file to your modules directory. Restart the station and
Workbench.
Are you looking for a cost effective way to manage and visualize data for all your customers? Why not have a look at View Builder?
Before you start. Download the modules from our portal (see your order confirmation, which also explains licensing). Copy the modules file to your modules directory. Restart BOTH station and Workbench.
1. Copy the sideBarMenu-ux.jar file to your modules directory.
2. Open the module from your palette file.
3. Drag and drop the widget from the palette onto your px view.
The menu has a few properties. You can copy and paste JSON string into the config property. OR you can reference a file which contains your menu config.
The config is in JSON format. You can customise as needed. Below is the default config with examples. However you can override values as needed.
{
"title": "Dashboard",
"showProfile": true,
"logoutUrl": "/logout",
"showLogoutButton": false,
"backgroundColor": "#11101d",
"iconColor": "",
"menuLinkTextColor": "white",
"menuLinkHoverColor": "#1d1b31",
"menuFontFamily": "",
"menuFontWeight": "400",
"menuFontSize": "18px",
"menuDropdownTextColor": "",
"menuDropdownFontSize": "15px",
"dividerColor": "",
"menu": [
{
"li": "",
"link": [
"Home",
"station:|slot:/Drivers/NiagaraNetwork/AHU1"
],
"icon": "bx-home",
"iconPadding": ""
},
{
"li": "MLU1",
"link": "station:|slot:/Drivers/NiagaraNetwork/AHU2",
"dropDownLink": [
{
"li": "",
"link": [
"AHU-01",
"/ord/station:%7Cslot:/Drivers/Graphics/Widgets/Side$20Bar$20Menu/Side$20Bar$202%7Cview:SideBarMenu1"
]
},
{
"li": "",
"link": [
"Heating System",
"station:|slot:/Drivers/NiagaraNetwork/AHU2"
]
},
{
"li": "",
"link": [
"Cooling System",
"station:|slot:/Drivers/NiagaraNetwork/AHU1"
]
},
{
"li": "divider"
},
{
"li": "",
"link": [
"Floor Plan",
"station:|slot:/Drivers/NiagaraNetwork/AHU1"
]
},
{
"li": "divider"
},
{
"li": "",
"link": [
"Alarms",
"station:|slot:/Drivers/NiagaraNetwork/AHU1"
]
}
],
"icon": "bx-grid-alt",
"iconPadding": ""
},
{
"li": "MLU2",
"dropDownLink": [
{
"li": "",
"link": [
"AHU-02",
"station:|slot:/Drivers/NiagaraNetwork/AHU1"
]
},
{
"li": "",
"link": [
"Heating System",
"station:|slot:/Drivers/NiagaraNetwork/AHU2"
]
},
{
"li": "",
"link": [
"Cooling System",
"station:|slot:/Drivers/NiagaraNetwork/AHU1"
]
},
{
"li": "divider"
},
{
"li": "",
"link": [
"Floor Plan",
"station:|slot:/Drivers/NiagaraNetwork/AHU1"
]
},
{
"li": "divider"
},
{
"li": "",
"link": [
"Alarms",
"station:|slot:/Drivers/NiagaraNetwork/AHU1"
]
}
],
"icon": "bx-grid",
"iconPadding": ""
},
{
"li": "",
"link": [
"Analytics",
"station:|slot:/Drivers/NiagaraNetwork/AHU1"
],
"icon": "bx-pie-chart-alt",
"iconPadding": ""
},
{
"li": "",
"link": [
"Histories",
"station:|slot:/Drivers/NiagaraNetwork/AHU1"
],
"icon": "bx-line-chart",
"iconPadding": ""
},
{
"li": "Alarms",
"dropDownLink": [
{
"li": "",
"link": [
"AHU-02",
"station:|slot:/Drivers/NiagaraNetwork/AHU1"
]
},
{
"li": "",
"link": [
"System",
"station:|slot:/Drivers/NiagaraNetwork/AHU2"
]
},
{
"li": "",
"link": [
"Main",
"station:|slot:/Drivers/NiagaraNetwork/AHU1"
]
}
],
"icon": "bx-bell",
"iconPadding": ""
},
{
"li": "",
"link": [
"Settings",
"station:|slot:/Drivers/NiagaraNetwork/AHU1"
],
"icon": "bx-cog",
"iconPadding": ""
}
]
}
1. To help build your menu configuration use an online JSON editor like:
https://jsoneditoronline.org/
Copy and paste the above JSON and modify.
2. After you have made changes to the JSON, set the config property value of the menu:
IMPORTANT. You should remove all carriage returns and line breaks from the generated
configuration before pasting.
You can do this by using a text editor like Notepad++.
In Notepad++ do CTRL+H (make sure extended Search mode is selected) to find and replace \r
and \n with blank. This will remove all carriage returns and line breaks.
3. For the hyperlinks, valid ords must be used.
e.g. station:|slot:/Drivers/NiagaraNetwork/AHU1 or when linking from px page to another px page with the menu
/ord/station:%7Cslot:/Drivers/Page2/
Side$20Bar$202%7Cview:SideBarMenu1
4. Please contact us if you're having trouble setting up the menu configuration.
File Config
You can point the menu to a file that exists on the station. Valid values are ords e.g.:
file:^dropdownMenu/config.txt
If you do not specify a file reference the config property will be used instead.
If you're having issues loading the menu, copy and paste the json as a string as
noted in step 1.
* Workbench Viewing Workaround
Niagara Px View doesn't allow the menu items to appear over other items, however, there is a
workaround:
If you're running 4.3 or above, there should be a "toggle preview" button at the end of the
toolbar when looking at a Px graphic.
This will show you your Px page rendered in a browser.
Image, Full Name, and Title:
On the user create 2 slots. profileImage. Type is ord and should point to a file in the
station shared files. e.g. file:^avatar-1.png
title. baja:String. Set the title to show on the menu.
Enter the full name on the user property sheet.
Build Your Own dashboards and win Projects by showing data that increase value and reduces expenditure.
