Ubidots Developer Guides
Help CenterAPI ReferenceData APICommunity
  • Welcome to our Dev Guides
  • ⚡️ Getting Started
    • What is Ubidots?
    • Devices, Variables, and Dots
    • Technical FAQs
    • Business FAQs
  • 🧩Integration Guides
    • Industrial IoT
      • Advantech
      • Amplified Engineering
      • AWS
      • Azimut
      • Balena
      • Bivocom
      • CESVA
      • Controllino
      • Digital Communications Technologies (DCT)
      • Everactive
      • Golioth
      • Kepware
      • Kunbus
      • Monnit
      • MultiTech
      • NCD.io
      • Node-RED
      • Omicron IoT
      • Red Lion
      • Robustel
      • Senquip
      • Sielco
      • Siemens
      • Strega
      • vNode
      • WAGO
      • Weintek
      • YuDash
    • Cellular
      • Blues Wireless
      • Digi International
      • Hologram
      • Monogoto
      • Particle
      • Quectel
      • Soracom
    • LoRaWAN
      • AonChip
      • Chirpstack
      • Decentlab
      • Helium
      • ioThings
      • LORIOT
      • Milesight
      • MOKOSmart
      • RAKwireless
      • Sagemcom
      • Seeed Studio
      • Senet
      • The Things Industries
        • The Things Stack
        • The Things Network
    • Sigfox
      • Digital Matter
      • McThings
      • Sigfox
      • Suntech
      • Thinxtra
      • UnaBiz
    • Satellite
      • Swarm
    • Dev Kits
      • Adafruit
      • Advantech
      • AloriumTech
      • Arduino
      • Blues Wireless
      • DFRobot
      • Dragino
      • Electric Imp
      • Espressif Systems
      • McThings
      • Microchip Technology
      • Onion
      • Particle
      • Pycom
      • RAKwireless
      • Raspberry Pi
      • Seeed Studio
      • Sodaq
      • STMicroelectronics
      • Texas Instruments
      • Thinxtra
      • Verse Technology
    • Weather
      • Weather Plugins
      • Ambient Weather
    • Tools
      • Gambit Communications
      • PubNub
  • 📊Dashboards & Widgets
    • HTML Canvas
      • 3rd party packages
      • Preload Dashboard data
      • Built-in library
        • Properties
        • Methods
        • Listening events
        • API
      • Examples
        • Basics
        • Create an LCD screen with the HTML Canvas
        • Interacting with dashboard data
        • Change header's custom style
        • Adding real time using Socket.IO
        • Delete Variable data from a Device
        • Delete Variable data from Groups or Types of Devices
        • Navigation through Dashboard
        • Using a React library
      • Code editor
        • HTML Tab
        • CSS Tab
        • JavaScript Tab
    • Custom UI
      • Paragraph
      • Input combo
        • Text
        • Numeric
        • Numeric with buttons
        • Date
        • Time
        • Toggle
        • Dropdown
        • Multiple selection dropdown
      • Button
    • Custom Style
      • Dashboards
      • Widgets
    • Line chart
    • Pages
      • Getting started
      • Development
      • API
        • Page creation
        • Publish
  • 🤖UbiFunctions
    • Getting Started
      • Creating an UbiFunction
      • Coding an UbiFunction
      • Testing an UbiFunction
      • Authentication
      • Execution Time
      • Logs
    • Runtimes
      • Python
      • NodeJS
      • Custom Runtimes
    • Invocation
      • Time-based Trigger
      • HTTPS
      • MQTT Publish
      • Ubidots Event
    • Advanced
      • Account Token
      • Execution time
      • Raw Functions
      • CORS Policy
      • Async Execution
      • DaaS (Decoder as a Service)
      • Developing and Managing UbiFunctions with Ubidots CLI
    • Examples
    • Specs and Limits
    • Storage
      • File Storage API
      • Mutiple files
  • 🧩Plugins
    • What is a plugin?
    • Public vs. Private
    • Public plugins
      • Cron
      • Webhook
    • Private Plugins
      • Cron
      • Webhook
      • Widget
      • Device
    • Plugins development
      • Getting started
      • Cron
      • Webhook
      • Widget
      • Device
      • view.xml
      • view_widget.xml
    • Plugins deployment
      • Cron and Webhook
      • Widget
      • Device
    • Using the plugins
      • Cron and Webhook
      • Widget
      • Device
  • 📈SYNTHETIC VARIABLES
    • Getting started
      • Creating synthetic variables
      • Synthetic Variables' editor
    • Expressions
      • Mathematical
      • Date range
      • Rolling
      • Special functions
    • Specs and limits
    • Examples
      • Mathematical
      • Date range
      • Rolling
      • Special functions
  • ⌨️Developer tools
    • Javascript SDK
      • Overview
      • Getting started
      • Ubidots class
        • Get methods
        • Filter methods
        • Ubidots objects
          • Entity object
          • Paginator
      • Examples
    • CLI
      • Overview
      • Installing
      • Usage
      • SDK for UbiFunctions
  • 🏗️Apps
    • App builder
      • Custom sidebar
Powered by GitBook
On this page
  • Custom
  • XML syntax
  • Permissions
  • Filter elements by tags

Was this helpful?

Export as PDF
  1. Apps
  2. App builder

Custom sidebar

Customize sidebar elements including menus, links, dropdowns and icons.

PreviousApp builder

Last updated 6 months ago

Was this helpful?

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.

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:

<!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V1.0//EN' "-">
<tree>
  <link exact="true" path="/app/dashboards/663d484aaa8d92005751b2bb" permissions="ubi_dashboards.view_dashboardpg">
    <icon name="home"/>
    <label>Home</label>
  </link>
  <link exact="true" path="/app/dashboards/668f020f8ccb68127b14e64d" permissions="ubi_dashboards.view_dashboardpg">
    <icon name="industry-windows"/>
    <label>Production</label>
  </link>
  <link exact="true" path="/app/dashboards/668f080e16b68912f0d2eb10" permissions="ubi_dashboards.view_dashboardpg">
    <icon name="fa-solid fa-chart-line-down"/>
    <label>Losses</label>
  </link>
  <menu>
    <toggle>
      <icon name="gear"/>
      <label>Settings</label>
      <chevron/>
    </toggle>
    <collapsable>
      <menulink path="/app/devices" permissions="ubi_datasource.view_device">Datasources</menulink>
      <menulink path="/app/dashboards/" permissions="ubi_dashboards.view_dashboardpg">Custom dashboards</menulink>
    </collapsable>
  </menu>
</tree>

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:

├── tree
│   ├── menu
│   │   ├── toggle
│   │   │   ├── icon
│   │   │   ├── label
│   │   │   ├── chevron
│   │   ├── collapsable
│   │   │   ├── menulink
│   ├── link
│   │   ├── icon
│   │   ├── label
│   ├── paragraph
│   ├── divider

Using these XML elements comes with rules that are enforced by the editor and warns you of errors in the syntax:

  1. The XML needs to start with: <!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V1.0//EN' "-">

  2. The <tree> element is mandatory. It must have at least 1 or more <menu> or <link> elements.

  3. The <menu> element must have at least 1 <toggle> and 1 <collapsable> elements.

  4. The <collapsable> element must have at least 1 <menulink> element.

  5. 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.

  • defaultShow: determines whether the dropdown is open or closed when loading the app.

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.

  • path: where the menulink redirects to upon clicking.

  • permissions: list of end-user permissions under which the menulink will be visible.

  • tags: list of end-user tags under which the menulink will be visible.

  • open: open link in same tab or redirect.

  • exact: highlights the menulink when in the exact path defined by path.

Creates direct access to links.

  • path: where the menulink redirects to upon clicking.

  • permissions: list of end-user permissions under which the menulink will be visible.

  • tags: list of end-user tags under which the menulink will be visible.

  • open: open links in same tab or redirect.

  • exact: highlights the menulink when in the exact path defined by path.

Creates titles of different sizes. It helps in creating defined sections in the sidebar.

  • type: determines the size. It can be "h1", "h2", "h3", "h4", "normal" or "bold".

Creates horizontal lines that serve as section separation.

–

tree

Parent element where all <menulink> and <link> reside:

<!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V1.0//EN' "-">
<tree>
    <!--Your menulink and link components go here-->
</tree>

menu, toggle, icon, label, chevron, collapsable and menulink

Elements used to create dropdown menus:

<!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"
        >Datasources
      </menulink>
      <menulink path="/app/dashboards/" tags="tag1" permissions="ubi_dashboards.view_dashboardpg">Custom dashboards</menulink>
    </collapsable>
  </menu>
</tree>

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

tags

open

Available options are: - "tab": link opens in a new tab. - "redirect": link opens in the same tab.

exact

link

Element to create shortcuts, in other words, direct access to modules or resources:

<!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V1.0//EN' "-">
<tree>
  <link
    open="tab"
    exact="true" 
    path="/app/dashboards/663d484aaa8d92005751b2e2" 
    tags="tag1" 
    permissions="ubi_dashboards.view_dashboardpg">
      <icon name="home"/>
      <label>Home</label>
  </link>
</tree>

This will create a direct link, as follows:

The properties of the <link> element are the same as the <menulink>

paragraph and divider

Title/label element and horizontal separation line.

<!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V1.0//EN' "-">
<tree>
    <paragraph type="bold">SECTION 1</paragraph>
    <divider/>
    <paragraph type="bold">SECTION 2</paragraph>
</tree>

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

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:

<!DOCTYPE tree PUBLIC '-//UBIDOTS//DTD Menu App XML V1.0//EN' "-">
<tree>
  <!--This link creates Home for User 1-->
  <link
    open="tab"
    exact="true" 
    path="/app/dashboards/663d484aaa8d92005751b2e2" 
    tags="tag1" 
    permissions="ubi_dashboards.view_dashboardpg">
      <icon name="home"/>
      <label>Home</label>
  </link>

  <!--This link create Home for User 2-->
  <link
    open="tab"
    exact="true" 
    path="/app/dashboards/663d484aaa8d92007364jnhd" 
    tags="tag2" 
    permissions="ubi_dashboards.view_dashboardpg">
      <icon name="home"/>
      <label>Home</label>
  </link>
</tree>

Let's assume 2 end users, with tags "tag1" and "tag2", respectively. Note that there are 2 home links in the XML, however, since they have different tags ("tag1" and "tag2"), each home link will appear to the respective user.

Likewise, this will preview the following sidebar. We have marked what each user would see:

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 .

name: name of icon from .

Comma separated list of associated with the path. An end user will only see this menulink option if its permissions match.

Comma separated list of . This adds a visibility layer to the sidebar. An end user will only see this menulink option if its tags match. See also .

"true" or "false". Highlights the menulink when in the exact path defined by path.

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 ). Simply put, if the user has the same tags as the element, it means the element will be visible to the user.

🏗️
role of permissions
more about tag filtering
Fontawesone
tree
menu
toggle
icon
label
chevron
collapsable
menulink
link
paragraph
divider
permissions
here
tags