Looking to be as flexible as possible, Ubidots offers the option of changing the position of the navigation menu to either the top of screen (its default position) or to the left side — thus turning it into a collapsible navigation bar. Additionally, the lateral version of the menu can be customized to look and work as you see fit by changing colors, texts, buttons, icons, and more.
The changes of position, appearance, and functionality can separately affect the app’s end users on one hand, and the admin users and account owner on the other. This means that your end users can have a customized navigation menu that looks completely different to the one that you customize for yourself as the account owner.
Requirements
An active Ubidots account for position changes of the navigation menu.
An Enterprise license for the customization of the navigation menu.
1. Switching the navigation menu’s position
1.1. Changing the menu’s position for owners and admin users
Click on your profile picture’s drop down menu and then on “my account”.
Scroll down to the “preferences” section and use the drop down menu next to
“navigation menu style” to change the position of your navigation menu.
Lastly, click on the “save” button to consolidate the change.
1.2. Changing the menu’s position for end users
Click on “apps”.
Go to the settings of the app you want to edit.
On the left-hand menu, click on “app builder”.
Use the drop down menu next to “navigation menu style” to change the position of your navigation menu to “left navbar”.
Click on the “save” button.
2. Customizing the navigation menu
The navigation bar can be currently customized when you change its position to the left side of the screen. There are two customization options, for owners and admins on one hand, and for end users on the other.
Note: These two customization options are not synchronized. Changing the “owner” navigation menu will have no impact on the one your end users see and vice versa.
2.1. Customizing the navigation menu for owners and admin users
Click on your profile picture’s drop down menu and then on “my account”.
Scroll down to the “preferences” section and use the drop down menu next to “navigation menu style” to change the position of your navigation menu to “left navbar”.
Use the drop down menu next to the “menu” option from “default” to “custom”.
Click on the “save” button.
Now that the menu has changed its position, click on the pencil icon located in the lower left corner of the menu.
Edit the XML code so that your menu ends up looking like you wish.
Click on the "save" button to consolidate the changes.
Note: Read our Dev Center documentation to learn about the XML syntax in detail. |
2.2. Customizing the navigation menu for end users
Click on “apps”.
Go to the settings of the app you want to edit.
On the left-hand menu, click on “app builder”.
Use the drop down menu next to “navigation menu style” to change the position of your navigation menu to “left navbar”.
Click on the “menu items” drop down menu and select the “custom” option.
Click on the “edit menu” button and change the XML so that your menu ends up looking like you wish.
Once you finish editing, click on the “save” button of the XML editor and then, again, on the “save” button in the “app builder” page to save the changes.
Important notes:
|
2.3. What can be changed in the lateral menu?
Buttons’ text.
Add/remove buttons.
Buttons’ icons. Use Fontawesome’s icon names for this.
Buttons’ path/link. Currently, external links open a different browser window. In the future, external pages will be embedded within Ubidots so that you remain in the same tab upon clicking any button.
2.4. Creating different end-user menus using tags
By combining the malleability of the navigation menu and the power of tags, you can effectively create multiple versions of the side menu that will be displayed only to the right set of end users based on their assigned tags.
This is achieved by editing the XML of the end-user app's menu and adding a "tags" property to the "link" and/or "menulink" elements that you want to create multiple versions of. Let's look at this with an example:
The following XML code has two different sets of buttons that are distinguishable by the use of a "tag1" and "tag2" values respectively.
<!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V1.0//EN' "-">
<tree>
<menu defaultShow="true">
<toggle>
<icon name="gear"/>
<label>Settings</label>
<chevron/>
</toggle>
<collapsable>
<menulink
open="tab"
exact="false"
path="/app/devices"
tags="tag1"
permissions="ubi_datasource.view_device"
>Data sources
</menulink>
<menulink
open="tab"
exact="false"
path="/app/devices"
tags="tag2"
permissions="ubi_datasource.view_device"
>Process
</menulink>
<menulink path="/app/dashboards/" tags="tag1" permissions="ubi_dashboards.view_dashboardpg">Custom dashboards</menulink>
<menulink path="/app/dashboards/" tags="tag2" permissions="ubi_dashboards.view_dashboardpg">Alerts</menulink>
</collapsable>
</menu>
</tree>
End users who have been assigned the "tag1" will therefore see this version of the menu when the log in to the app:
On the other hand, users with the "tag2" will see this other version:
For a more detailed explanation of the "tags" property, head to our Dev Center documentation.
Notes:
The colors and logo of the navigation menu (regardless of its position) are defined in the "branding" section of your app's settings.
Any changes made to the menu, whether it’s for owners/admins or for end users, affects only the lateral version; the “top navbar” menu can’t be changed.
The navigation menu's appearance and functionality can be brought back to its default version by going into the XML editor and clicking on the "restore default" button.