Custom sidebar

Customize the sidebar elements to create user-aware navigations.

When selecting "Left navbar" as the navigation menu style, you'll be able to choose from 2 options:

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:

The sidebar also supports opening a secondary panel, called "asidepanel", from either a direct link or a menu item in the sidebar. This asidepanel can be either static or load dynamic, user-aware content from an HTTP request.

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 V2.0//EN' "-">
<tree>
  <asidepanel 
    id="jsonpath-all-objects"
    source="/api/v2.0/dashboards"
    query="$.results[*]"
    label="$.name"
    path="/app/dashboards/{$.id}"
    permissions="ubi_dashboards.view_dashboardpg"/>
  <body>
    <section text="">
      <link 
        path="/app/dashboards/" 
        permissions="ubi_datasource.view_devicegroup" 
        icon="home" 
        label="Home" 
        iconFaType="duotone" 
        exact="true"/>
      <link 
        path="/app/dashboards/68c056ffe40f2600103af3ec/layers/68c056ffe40f2600103af3ed" 
        permissions="ubi_datasource.view_devicegroup" 
        icon="industry-windows" 
        label="Production" 
        iconFaType="duotone" 
        exact="true"/>
      <link
        path="/app/dashboards/"
        permissions="ubi_datasource.view_devicegroup" 
        icon="chart-line-down" 
        label="Losses" 
        iconFaType="duotone" 
        exact="true"/>
      <menu defaultShow="true" icon="gear" label="Settings" iconFaType="duotone">
        <item 
          path="/app/devices" 
          permissions="ubi_datasource.view_device" 
          label="Datasources"/>
        <item 
          panelTarget="jsonpath-all-objects" 
          permissions="ubi_datasource.view_devicegroup" 
          label="Custom dashboards"/>
      </menu>
    </section>
  </body>
</tree>

PreviousApp builder NextXML v2.0

Last updated 6 days ago

Was this helpful?