Customize the menu

The Drawer component is the left side navigation menu. It lets you access the personal settings, setup 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, that can be chosen by built-in menu types, like 'Content' or 'Setup', 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. With this param you can set, that existence of which actions are required to see and use the menuitem. For example the to see the Localization menu item the user should have permission allowed to add a new localization file into this container, in other words 'Add' action should be available for him on the Localization folder.

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

Item types without settings:

  • Content Types - shows list of content type definitions
  • Localization - shows list of localization resources
  • Search - shows list of saved queries
  • Setup - shows a sensenet related settings
  • Trash - shows list of items that are not deleted permanently
  • Version info - shows information about admin-ui and sensenet versions
  • Users and groups - shows list of users and groups

Item types with settings:

{
"itemType": "Dashboard",
"settings": {
"dashboardName": "main",
"description": "This is the main dashboard",
"icon": "SystemFolder",
"title": "Dashboard"
}
}
  • Query - this works like a smart folder, shows a list of query result
    • term - is a content query
    • columns - array of columns to display. These are the name of the fields on the content
{
"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"]
}
}
  • Content - lets you explore and manage your content
    • browseType - can take 3 values
      • simple - shows the content in a simple list
      • explore - shows a tree on the left side and a simple list on the right
      • commander - two lists side by side
    • root - content will be displayed below this level
{
"itemType": "Content",
"settings": {
"description": "Explore your content",
"icon": "Workspace",
"title": "Content",
"columns": ["DisplayName", "ModifiedBy", "ModificationDate"],
"browseType": "explorer",
"root": "/Root"
}
}