Tailwind CSS home page
DATAV
Tailwind CSS on GitHub
EN中文

Create sidemenu

The top half of the side menu bar of the Datav is customizable, so you can customize the menus of your website.

Each team can customize its own side menu bar. The team's custom menu bar is private by default, but you can make it public so everyone can use it.

And you might wonder, what's the benefit? Imagine that we're going to do a monitoring platform, and there are two categories of monitoring: application monitoring and infrastructure monitoring, where application monitoring is the focus of development,infrastructure monitoring is the focus of operations.

so you can create a side menu for the operations team. When operations use Datav, they will see the menu item related to infrastructure by default, and they can switch to application monitoring menu item to view the application monitoring content.

When your company is large, custom menus can be very convenient and you only need to deploy and manage only one Datav.

Sidemenu panel

  1. 选择Configuration -> Teams -> View global -> Sidemenu，Here you can see the menu ID, brief introduction, whether can be public, ID is convenient in the late URL address bar quick access, brief can be in the public menu, so that other users more clearly see the purpose of the menu
  2. In the menu management, has the default menu item Home, actually everybody has visited this menu item
  3. Now two panels pop up, the left side is to update the current menu item, the right side is to create a new menu item next to or below the current menu item, here we start with the update menu item

Update menu

In the left panel we can update the current menu item. The Dashboard UID is a string ID type unique to each dashboard, which can be customized to change. With the Settings here, we can associate the menu item with our dashboard one-to-one The Home dashboard is associated currently.

The Icon name is used to set the menu item Icon, find more icons in Unicons.

The menu item name is the name displayed in the side menu, which can be different from the name of the dashboard itself.

Menu url specifies that the menu item is to access the url, for example: the current setting is/home, so when the user clicks on the menu item, will jump to http://localhost:3001/home for a visit.

Note that this URL cannot be duplicated and cannot use a URL that Datav has preoccupied

。

With the background information finished, let's update the current menu item:

  1. Dashboard UID does not change, continue to relate to the previous home page dashboard
  2. Change Icon name to apps
  3. Change the menu item name to Apply Monitoring
  4. Change the menu URL to /apps
  5. Click Submit and close the panel
  6. Click Update

Now refresh the page, and you can see that the menu item in the side menu has changed, hover the mouse over it, and then visit to see the effect.

Add menu item

Continue to the menu item configuration panel, now focus to the right panel Add a new menu item next to the menu item Application Monitor, because we want to create a second level menu for Application Monitor

  1. Open the search panel with O S (press O first, then S) and hover over the dashboard we created in the previous section, you can see the Dashboard UID: XXXX prompt. Copy XXXX
  2. Press ESC to close the search panel and paste the UID you just copied into 'Dashboard UID'
  3. Enter Analytics for the Icon name
  4. Enter Application Analysis'\ for the menu item name
  5. The menu URL here is relative. If it is a child node, enter the current secondary URL without adding the parent URL. Enter /analytics here
  6. Submit & Update

Adjust the order of menu items

In menu management, you can swap positions with other menus by dragging the line.

Now that we have successfully modified the menus for the Global team, the next step is to see how users can use them

Use the menu

Select the side menu User -> Preferences to select the menu from the Advanced Settings. Remember, you can only select the following menu:

  1. Menu belongs to your teams
  2. Public menu belongs to other teams

Set menu through URL

To make the menu more flexible, Datav supports setting the menu by URL. Remember the menu ID of the Global team? If not, go back and look at it :)

Now add the following string ? Sidemenu =2, try to access it, if it is wrong, it is correct, because we have not created any other menu, i.e. the menu with id 2.

Now visit ? Sidemenu =1, everything is fine, because the global team's menu id is 1.

← Templating variablesPermissions →