Custom sidebar
Customize the sidebar in terms of menus, links and icons.
When selecting "Left navbar" as the Navigation menu style, you'll be able to choose from 2 options for it:
Default
Custom, in which case the "Navigation menu" option will be enabled.
The "Default" option will render a fixed left sidebar with Ubidots standard menu layout in the App, where all the options will appear to end-users based on their role of permissions.
Custom
When selecting the "Custom" option, you'll be able to customize the sidebar at will. For example, in the below sidebar, menus, names, icons and dropdowns have been changed:
This is possible via the "Edit menu" button, which opens an XML editor that includes a preview where you can see what the XML translates to:
This is the XML that creates the custom sidebar seen above:
XML syntax
The custom sidebar uses XML to map UI elements to code, which is the engine that allows the creation of a sidebar tailored to a specific application.
The available UI elements, and their hierarchy, are:
Using these XML elements comes with rules that are enforced by the editor, and warns you of errors in the syntax:
The XML needs to start with:
<!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V1.0//EN' "-">
The
<tree>
element is mandatory. It must have at least 1 or more<menu>
or<link>
elements.The
<menu>
element must have at least 1<toggle>
and 1<collapsable>
elements.The
<collapsable>
element must have at least 1<menulink>
element.The
<link>
element must have at least 1<icon>
and<label>
elements.
Here's a quick summary of the available elements, but you can click the links and read more details:
Sidebar element | Description | Properties |
---|---|---|
Root element. All other elements must be inside | – | |
Allows creating dropdown menus |
| |
Comprises the dropdown itself | – | |
Represents the icon the dropdown |
| |
Text in the dropdown menu | – | |
Arrow icon in the dropdown menu | – | |
Comprises a parent element for all the options in the dropdown | – | |
Actual options displayed under a dropdown menu |
| |
Creates direct access to links |
| |
Creates titles of different sizes. It helps in creating defined sections in the sidebar. |
| |
Creates horizontal lines that serve as section separation. | – |
tree
Parent element where all <menulink>
and <link>
reside:
menu, toggle, icon, label, chevron, collapsable and menulink
Elements used to create dropdown menus:
This will create a dropdown menu, with its options, as follows:
These are the properties of the <menulink>
element:
Property | Description |
---|---|
path | This is a path in Ubidots to either a direct resource, for example "/app/dashboards/663d484aaa8d92005751b2e2", or a module "/app/dashboards/", or a full URL in Ubidots or an external website. |
permissions | Comma separated list of permissions associated with the path. An end-user will only see this menulink option if its permissions matches |
tags | |
open | Available options are: - "tab": link will open in a new tab. - "redirect": link open in the same tab. |
exact |
link
Element to create shortcuts, in other words, direct access to modules or resources:
This will create a direct link, as follows:
The properties of the <link>
element are the same as the <menulink>
paragraph and divider
Titles/Labels element and separation horizontal lines
This will create the following:
Permissions
The available permissions for each possible path that's exposed to the end-users in the application are:
Module | Path | Permissions |
---|---|---|
Devices | "/app/devices/" | "ubi_datasource.view_device" |
Device groups | "/app/device-groups/" | "ubi_datasource.view_devicegroup" |
Dashboards | "/app/dashboards/" | "ubi_dashboards.view_dashboardpg" |
Events | "/app/events/" | "ubi_events.view_eventpg" |
Reports | "/app/data-analysis/" | "ubi_data_analysis.view_report" |
Organizations | "/app/organizations/" | "customuser.view_organization" |
Users | "/app/organizations/users" | "customuser.view_user" |
With permissions, the <menulink>
and <link>
elements will only appear to those end-users whose assigned permissions match that in the element configuration.
Filter elements by tags
The <menulink>
and <link>
elements receive a "tag" property that adds a visibility layer on top of the permissions assigned to an end-user. The way it works is by matching the tags of an end-user with those specified in the <menulink>
or <link>
(learn more about tag filtering). Simply put, if the user has the same tags as the elements, it means the element will be visible to the user.
This filtering by tags allows customizing the sidebar based on the user accessing the platform. For example, say you want to create a direct link that takes users to their own home dashboard, you would create an XML as follows:
Let's assume 2 end-users, with tags "tag1" and "tag2", respectively. Note that there are 2 Home links in the XML, however, because each has different tags, namely "tag1" and "tag2", each Home link will appear to the respective user.
Like so, this will preview the following sidebar. We have marked what each would see
Last updated