Stop the war

Support Ukraine

Try it now Pricing
Professional Edition
Community Edition Professional Edition Cloud Edge PE Edge IoT Gateway License Server Trendz Analytics Mobile Application PE Mobile Application MQTT Broker
Documentation > White Labeling > Custom Menu
Getting Started
Devices Library Guides Installation Architecture API FAQ

On this page

Custom Menu

ThingsBoard PE Feature

Only Professional Edition supports Custom Menu feature.
Use ThingsBoard Cloud or install your own platform instance.

Introduction

The ThingsBoard Custom Menu feature allows you to extend ThingsBoard UI. You can add new and show/hide existing menu items.

Hide existing menu items

To hide menu items in the ThingsBoard user interface, specify the menu items you want to hide in JSON data format in the “Custom Menu” window.

Example of JSON data format to hide “Home” and “Alarms” menu items:

1
2
3
4
5
6
7
{
  "disabledMenuItems": [
    "home",
    "alarms"
  ],
  "menuItems": []
}

Let’s see how this works:

  • Go to the “White Labeling” page -> “Custom Menu” tab. Menu items names that can be hidden are displayed in the empty “Custom Menu” window;

  • Please provide the menu items you want to hide in JSON data format in the “Custom Menu” window. Then click “Save”;

  • Selected menu items are now hidden.

Add new menu items

You can add a new menu item that will link to a specific dashboard, documentation page, or an external webpage. To do this, specify the parameters of the new menu item in JSON data format in the “Custom Menu” window.

JSON configuration for adding new menu item should contain the following parameters:

Parameter Description
name Menu item name.
iconUrl Link to icon.
materialIcon Icon name which is selected from the default material icons.
iframeUrl Link to the page you want to open.
dashboardId Specify the dashboard ID you want to open.
hideDashboardToolbar Show/hide the dashboard toolbar.
childMenuItems Сreate sub-menu items grouped under one section.

Let’s create three new menu items: two items will link to dashboards and will be grouped under one section. The third item will link to the documentation.

  • Go to the “White Labeling” page -> “Custom Menu” tab;

  • Specify data in JSON format in the “Custom Menu” window. Use the JSON below as an example. Click “Save”;

  • New menu items are created. Click on the “My Dashboards” section -> “Waste Management Administration” page. The dashboard specified in JSON will open;

  • Go to the “Smart farming and smart agriculture solutions” page. The page will open with documentation specified in JSON.


For this example, use the following JSON to add new menu items.

Don’t forget to replace $DASHBOARD_ID value with your dashboard id.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
  "disabledMenuItems": [],
  "menuItems": [
    {
      "name": "My Dashboards",
      "iconUrl": null,
      "materialIcon": "grid_view",
      "iframeUrl": null,
      "dashboardId": null,
      "hideDashboardToolbar": null,
      "setAccessToken": false,
      "childMenuItems": [
        {
          "name": "Waste Management Administration",
          "iconUrl": null,
          "materialIcon": "dashboard",
          "iframeUrl": null,
          "dashboardId": "$DASHBOARD_ID",
          "hideDashboardToolbar": false,
          "setAccessToken": false,
          "childMenuItems": []
        },
        {
          "name": "Assisted Living Administration",
          "iconUrl": null,
          "materialIcon": "tablet_dashboard",
          "iframeUrl": null,
          "dashboardId": "$DASHBOARD_ID",
          "hideDashboardToolbar": null,
          "setAccessToken": false,
          "childMenuItems": []
        }
      ]
    },
    {
      "name": "Smart farming solutions",
      "iconUrl": "https://cdn-icons-png.flaticon.com/512/3214/3214679.png",
      "materialIcon": null,
      "iframeUrl": "https://thingsboard.io/smart-farming/",
      "dashboardId": null,
      "hideDashboardToolbar": null,
      "setAccessToken": false,
      "childMenuItems": []
    }
  ]
}

Next steps