The tree is like a list containing hierarchical data. It acts as a container for items, with the possibility to expand and collapse nodes. When reducing the width, item texts wrap to ensure that the tree adapts to the new size.

In addition, the tree changes the indentation per level dynamically when the user expands a node, based on number of levels currently showing.

The title bar (optional) contains the title of the tree. In addition, an item counter and toolbar items can be placed on the title bar.
The collection of hierarchical items occupies the main part of the tree.

The title bar consists of a toolbar. The toolbar can contain a title, an item count, and other toolbar items such as actions or view settings, for example.

The standard tree item consists of:

• A highlight indicator (optional)
• An expand/collapse button for nodes
• A selector in form of a checkbox or a radio button (optional)
• An icon (optional)
• A text
• A counter (optional)
• Additional buttons with actions such as Edit, Navigate, or Delete (optional)

If additional controls are needed, use a custom tree item. The custom tree item allows you to use any combination of controls inside the tree.

An Expand/Collapse button is provided automatically for each node.

Highlight an Item

To highlight an item, use the “highlight” indicator (sap.m.TreeItemBase, properties: highlight).

To allow navigation from an item, set type to “navigation” within the corresponding item (sap.m.StandardTreeItem / sap.m.ListItemBase, property: type, value: sap.m.ListType.Navigation). This will create an indicator at the end of the line (“>”) and the entire item will become selectable. Clicking the line triggers the navigation event. However, clicking a selectable area or an expandable/collapse node does not. Use the navigation event to navigate to a new page containing item details.
If no navigation is possible, set type to “inactive”.
Navigation is an item type and therefore cannot be used together with “edit” or in combination with click events for the entire item (“active”).

Indicate Navigated Item

When multi-selection is used in a list-detail scenario, it is not clear which item was last opened (for example, which item is currently shown in the second column of a flexible column layout). In this case only (multi-selection tree with navigable items), you can display a “navigated” indicator to mark the item that is currently open (sap.m.TreeItemBase, property: navigated).

To allow the user to edit an item, set type to “detail” within the corresponding item (sap.m.StandardTreeItem / sap.m.ListItemBase, property: type, value: sap.m.ListType.Detail or sap.m.ListType.DetailAndActive). This will create an edit  button at the end of the line. Clicking the button triggers the edit event. Use this event to either open a dialog or a details page where the item can be edited.
Edit is an item type and therefore cannot be used together with “navigation” or in combination with click events for the entire item (“active”).

Items as a whole can be clickable. An event is fired by clicking on the item (anywhere except when triggering a selection or when expanding/collapsing a node). Apps can react to the event, such as by opening a dialog (sap.m.StandardTreeItem / sap.m.ListItemBase, property: type, value: sap.m.ListType.Active or sap.m.ListType.DetailAndActive).
Active elements do not have a visual indication and therefore cannot be differentiated from non-active elements.
“Active” is an item type and  therefore cannot be used together with “navigation” or “edit”. In addition, “active” uses the entire item as a clickable area and thus cannot be used together with the “single select master” mode.

You can attach a context menu (sap.m.Menu) to a tree. The context menu gives users an alternative way to modify the focused elements by giving them access to context-specific functions.

The context menu can be triggered for the tree or per item.

Context menus are opened by right-clicking (desktop), long press (mobile), the context menu key, or Shift+F10.

Be aware that using the context menu overrides the browser context menu, which can no longer be opened.

If a control inside a tree is the “click target”, and the control also provides a context menu, the control context menu “wins”.

One or several items can be repositioned within a tree or moved to other UI elements using drag and drop operations (sap.m.ListBase, aggregation: dragDropConfig). While being dragged, the items are shown as ghost elements on the mouse cursor.

Drop targets can be on items, between items, or both (sap.ui.core.dnd.DropPosition). On a drop target, the mouse cursor changes to either a “copy”, “link”, “move”, or “none” cursor. “None” indicates that the dragged item cannot be dropped in the current position (sap.ui.core.dnd.DropEffect).

Drag and drop is only available on supporting browsers.

Trees are more complex than lists due to their hierarchical view. Users tend to have more problems finding items in hierarchical views than in flat lists, except where the hierarchical view is natural. By natural we mean that every child node should be part of only one parent, and this relationship between the child and parent is clear and well known.

When you use trees, you should choose broad hierarchies over deep hierarchies. Deep hierarchies make finding items more complicated. So try to reduce hierarchical levels where possible, especially if the hierarchy is not natural. Ideally, a tree should have a maximum of four levels, the first two of which should contain the most important items.

You can use the following methods to reduce hierarchy levels:

• Avoid a single root node. It is usually not needed.
• Container nodes at the top level can usually be replaced by tabs or value pickers.
• Eliminate unnecessary mid-level containers, for example, by combining redundant ones.
• Exercise care when using a tree due to its overall complexity. The hierarchical structure of the data does not necessarily mean that a tree control is required.

Use a title only if the title of the tree is not indicated in the surrounding area. If needed, implement the title text by adding a title to a toolbar. Place the toolbar above the tree.

Do not use a title if it simply repeats text that is already above the tree. For example:

• A Beverages tree is the only control on a tab labeled Beverages.
• A section or subsection on an object page contains only one tree.

Use a title if you need the item count, toolbar, or variant management. To avoid repeating text, feel free to use generic text as a title, such as Items.
Exception: If the surrounding area contains the title, and both the item count and toolbar can be added to the surrounding area, no additional title is needed.
Example: An object page (sub-)section contains only one tree. In this case, add the item count and the table toolbar to the (sub-)section header.

If you use a title, be sure to include the following:

• A title text for the tree.
• An (optional) item count using the following format: Title (Number of Items). For example, Items (17). Depending on the use case, either count all items or only leaves (for example, if nodes are mainly used for categorization).

Remove the item count in the title if there are zero items.

If possible, keep the toolbar sticky (sap.m.Tree, property: sticky).

To indicate that the tree is currently loading items, use the busy state (sap.m.Tree, property: busy). Do not show any items or text. As soon as the data is loaded, remove the busy state and show all items.

To display object names with an ID, show the ID in parentheses after the corresponding object name.

Try not to display an empty tree. If there is no way around this, provide instructions on how to fill the tree with data (sap.m.Tree / sap.m.ListBase, properties: showNoData, noDataText).

Examples:

• If a tree is initially empty, provide at least a basic text:
  No items available.
  Overwrite this whenever a hint can be provided on how to fill the tree with data.
• If a tree is used together with a filter bar (as in the list report), and is initially empty, use the following text:
  No filters set. To start, enter your search and filter settings and run the search.
• If a tree is used together with a filter bar and the filter does not return results, use the following text:
  No items found. Check the search and filter settings.

Adapt the texts above if:

• The text is not precise enough for your use case (for example, no search is offered, only the search is offered).
• You are using the live search (no Go button in the filter bar). In this case, leave out “run the search”.
• The standard text is misleading (for example, if the data is filled based on a list-detail pattern instead of search and filter settings).

To show that an item needs attention, you can display a highlight indicator in front of the item. The highlight indicator can be used to indicate:

• A semantic state, such as red or orange for an error or warning. In this case, use semantic colors.
• Additional information, such as blue to highlight newly added items. In this case, use semantic colors.
• Industry-specific or process-specific states, such as “out of stock” or “excess of inventory”. In this case, use indication colors.

Be aware that the highlight is just an indication. It does not tell users exactly what is wrong. Make sure that you provide this information within the table row, ideally in the same color.

For details on the use of highlight colors, see How To Use Semantic Colors.

(sap.m.ListItemBase, property: highlight)

To show that an item has been modified, for example within the global edit flow, add the string (Modified) to the text of the item.

To show that a modified item contains an error, for example within the global edit flow, add the string (Contains errors) to the text of the item and highlight the row accordingly. A row with errors should be highlighted in all use cases – for example when the field is visible in the row in edit mode.

To show that an item is locked, add the string (Locked by [name]) to the text of the item.

To show that an item is in a draft state, add the string (Draft) to the text of the item.

Delete: Use “Delete” mode (sap.m.Tree / sap.m.ListBase, property: mode, value: sap.m.ListMode.Delete). This places a Delete  button at the end of each item.

Navigation: Use the “Navigation” item type (sap.m.StandardTreeItem / sap.m.ListItemBase, property: type, value: sap.m.ListType.Navigation). This places a navigation indicator at the end of the corresponding items. Use this to navigate to a new page containing item details.

Edit: Use the “Detail” item type (sap.m.TreeItem / sap.m.ListItemBase, property: type, value: sap.m.ListType.Detail). This places an Edit   icon at the end of the corresponding items.

Enabling/Disabling Actions

To indicate if an action can be applied to the current selection:

• Enable the action if it always works, regardless of whether or not items are selected.
• Enable the action if it can be applied to all selected items.
• Enable the action if it can be applied to some of the selected items. If the action is triggered, show a message that tells the user how many items will be affected. Let users choose whether to apply the action anyway or cancel the action.
• Only disable the action if:
  • The action can’t be applied to any of the selected items.
  • The number of selected items doesn’t match the action. For example, disable Compare if only one item is selected.

For more details, see UI Element – States.

If the action was applied and the items are still available, keep them selected.

Drag and drop is “invisible” on the UI: users can’t see where dragging is available and where it isn’t. In addition, there is no generic keyboard interaction. Drag and drop is also not available on all browsers. For these reasons, provide it only in addition to existing (and visible) UI elements that fulfill the same purpose. For example, offer (toolbar) buttons for moving or for copying and pasting items. These are keyboard operable and available on all browsers.

If you offer drag and drop for rearranging items within a tree, use the following options:

• For dropping items as a child, use whole nodes as drop targets (sap.ui.core.dnd.DropPosition.On).
• For dropping items on the same level, use the space between items as drop targets (sap.ui.core.dnd.DropPosition.Between).
• If you want to allow users to drop items as a child or sibling, offer both drop targets (sap.ui.core.dnd.DropPosition.OnOrBetween).

This provides better feedback on where the item will be inserted. Show the “move” mouse cursor (sap.ui.core.dnd.DropEffect.Move).

Do not combine rearranging items within one level and sorting. If you really need to do so, make sure there is a dedicated sort criterion for the user-defined sort order, and only offer options for rearranging items if this sort order is set.

Moving items from one node to another can be combined with sorting without any issues.

Visible Alternatives to Drag and Drop

Depending on the functionality you need, use one or more of the following alternatives:

• To move items up or down within a node:
  Use the  Move Up and  Move Down buttons on the toolbar. These buttons move the selected items until the first selected item can’t be moved up or the last selected item can’t be moved down any further.
  Depending on your tree, this can make sense for both leaves and nodes, only for leaves, or only for nodes. When moving a node, move the whole node and (if applicable) all its children up or down to the next position within the parent node.
  Always make sure that when the user moves an item in one direction and then moves it back, the order is the same as it was before.
  Do not combine the option to move items up and down with sorting.
• To move items to another node:
  Use Copy and Paste buttons on the toolbar.
  Alternatively, offer a Move To button. Clicking Move To opens a dialog that shows all the nodes of the tree, but no leaves. Selecting an item in this dialog closes the dialog and moves the corresponding items to the selected node.
• To change the level of an item:
  In some trees, such as document structures, users can change the level of an item without affecting the level of parent or child items. In this case, use left and right arrow buttons (   ).

Filtering

What exactly needs to stay or be removed is highly dependent on the kind of structure and data your tree displays. For many trees, the following approach works well if you want to apply filters only to the leaves of a tree:

• Remove all leaves that don’t fit the filter criteria
• Remove empty nodes

If you also apply filters to nodes, keep the following in mind:

• A node may or may not fit the filter criteria.
• A node can contain items (nodes and/or leaves) that fit the filter criteria.

Because of this, the results might contain more nodes than those that are relevant for the filter criteria.

Before you start, ask yourself if sorting is meaningful in your tree. If so, decide on a meaningful default sort order.

If sorting is meaningful, is it meaningful on all levels? Or does the tree structure need to be stable? In the latter case, sort only leaves, but not nodes.

Always sort the tree in a meaningful way when it first loads.

The descending sort order must always be the exact reverse of the ascending sort order. Use a meaningful sort order. For example:

• Sort text alphabetically
• Sort numbers by their value
• Sort status information by the severity of the status:
  • Ascending: Sort status information from positive to negative, with neutral last.
  • Descending: Sort status information from negative to positive, with neutral first.

• • Ascending with different values per severity level: Sort status information from positive to negative, with neutral last. Sort different values within a severity level (semantic color) alphabetically.
  • Descending with different values per severity level: Sort status information from negative to positive, with neutral first. Sort different values within a severity level (semantic color) alphabetically.

Export to Spreadsheet

On the table toolbar, apps can provide a menu button for exporting the tree data to a spreadsheet. For the export, use the export to spreadsheet function.