Custom Menu

ThingsBoard PE Feature

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

• Introduction
• Hide existing menu items
• Add new menu items
• Next steps

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": []
}

Available ThingsBoard menu items names that can be disabled:

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:

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

• Getting started guides - These guides provide quick overview of main ThingsBoard features. Designed to be completed in 15-30 minutes.

• Connect your device - Learn how to connect devices based on your connectivity technology or solution.

• Data visualization - These guides contain instructions on how to configure complex ThingsBoard dashboards.

• Data processing & actions - Learn how to use ThingsBoard Rule Engine.

• IoT Data analytics - Learn how to use rule engine to perform basic analytics tasks.

• Hardware samples - Learn how to connect various hardware platforms to ThingsBoard.