Documentation

Docs / Admin UI / Drawer customization in general

Drawer (aka. left side menu)

The Drawer component is the left side navigation menu. It lets you access the personal settings, setup, version-info and more other menupoints.

Customization

You can customize the drawer within the personal settings. You can set drawer options for multiple devices. For example mobile, tablet, desktop and in general for default. There are 3 main options:

  1. enabled - boolean value (it can be true or false)
  2. type - string value ("mini-variant", "permanent", "temporary")
  3. items - array of DrawerItem (this is a complex type, look for examples below)

Enabled

This it the simplest setting that can enable or disable the drawer itself.

Don’t worry if you disabled the drawer and can’t find personal settings. You can access it from the Command palette with typing in personal settings and pressing enter.

Example setting:

{
  "default": {
    "drawer": {
      "enabled": false
    }
  }
}

Type

There are 3 possible values for choosing the type of the drawer:

mini-variant - This can be opened and closed as it is shown below. This is currently the default setting for desktop mode

drawer mini-variant

permanent - In this mode the drawer is always open.

drawer permanent

temporary - In this mode there is no sidebar only a hamburger menu in the top left corner. This is currently the default setting for mobile mode

drawer temporary

Items

Every drawer item has 3 properties, settings, itemType, permissions.

The settings property changes for item types, there are items that don’t have settings at all.

The itemType is a predefined string you can see the possible values with pressing CTRL+SPACE in the editor.

The permissions property is an array of objects that has a path and action property. The name of the action that will be checked against the path.

{
  "default": {
    "drawer": {
      "items": [
        {
          "itemType": "Localization",
          "permissions": [
            {
              "path": "/Root/Localization",
              "action": "Add"
            }
          ]
        }
      ]
    }
  }
}

Item types without settings:

Item types with settings:

{
  "itemType": "Dashboard",
  "settings": {
    "dashboardName": "main",
    "description": "This is the main dashboard",
    "icon": "SystemFolder",
    "title": "Dashboard"
  }
}
{
  "itemType": "Query",
  "settings": {
    "description": "5 Files that modified recently",
    "icon": "LinkList",
    "title": "Recent files",
    "term": "+Type:File .REVERSESORT:ModificationDate .TOP:5",
    "columns": ["DisplayName", "ModifiedBy", "ModificationDate"]
  }
}
{
  "itemType": "Content",
  "settings": {
    "description": "Explore your content",
    "icon": "Workspace",
    "title": "Content",
    "columns": ["DisplayName", "ModifiedBy", "ModificationDate"],
    "browseType": "explorer",
    "root": "/Root"
  }
}

Is something missing? See something that needs fixing? Propose a change here.