Within SAP Fiori, we distinguish between tree tables and trees. Both usually allow the user to display and work with a hierarchical set of items. While tree tables are usually used for more complex data, trees are generally used for rather basic data. Trees are mostly used in the master list section of the split-screen layout and in popovers or dialogs. In certain use cases, they can also be used in full screen layouts.

In the case of tree tables and trees, items that contain additional items are called nodes, while items that do not contain any other items are called leaves. If available, a single topmost node is called a root node. Apart from the hierarchical structure of its nodes and leaves, a tree is quite similar to a list.

Usage

Use the tree if:

• You need to display the key identifier of hierarchically structured items, for example in the master list of split-screen layouts.
• Selecting one or more items out of a set of hierarchically structured items is a main use case.
• The hierarchy has a restricted number of levels (up to about 12, depending on the content) and items (around 200).
• You want to have only one implementation for all devices.

Do not use the tree if:

• The main use case is to select one item from a very small number of non-hierarchical items, without viewing additional details. In this case, a select or combo box might be more appropriate.
• Items are not structured hierarchically. Use a list instead.
• The hierarchy turns out to have only two levels. In this case, use a grouped list.
• The hierarchy turns out to be just a categorization based on several details of the item. In this case, an analytical table provides multi-level grouping. Note that the analytical table is not fully responsive. It is only available for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.
• You need to display very deep hierarchies with additional data per item. In this case, use a tree table. Note that the tree table is not fully responsive. It is only available for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.
• The structure contains more than 200 items. In this case, use the tree table. It is optimized for large item sets and provides better performance. Note that the tree table is not fully responsive. It is only available for desktops and tablets, so you will need to take an adaptive approach by offering an additional UI for smartphones.
• You need an overview of a large amount of data. In this case, use a chart.

Check out the table overview to decide which SAP Fiori table is most suitable for your needs.

Responsiveness

Layout

Components

Item Level

Expandable and Collapsible Nodes

Navigating

Editing Items

Clicking an Item

Guidelines

Tree vs. List

Broad vs. Deep Hierarchies

Design Concepts

The tree can be used to display hierarchical data. Unfortunately, trees convey an immediate feeling of complexity. Ideally, show trees only if there is no other option. You should instead try the following:

• Flatten the data. A list is still complex, but less so than a tree. A combo box might also fit in some use cases.
• When only two levels are needed, a grouped list control can be used. This works well, where group nodes are used for categorizing their children and where the group nodes themselves do not need to be selectable.
• Break down the data into manageable chunks. Allow the user to navigate or drill down between them.
• Use charts with drilldown functionality until the amount of data is more manageable.

Title

Loading Data

Initial Display

Think of the initial expandable/collapsible state of a tree. If your structure contains many items on the root level, it might make sense to collapse the whole tree in its initial state.

In contrast, if the most important items are displayed on a deeper level (if, for example, the parent nodes are simply a kind of categorization), the tree should be expanded up to the first level where the most important items immediately appear.

Content

Content Formatting

Highlighting Items

Item States

Show only one state at any one time.

Actions

To trigger actions on items, show the actions on a toolbar above the tree. Do not offer action triggering on multiple items if the tree is expected to have fewer than 10 items in most cases.
The following actions on single items must always be in-line:

From these three actions (delete, navigation, and edit), you can combine delete and edit, or delete and navigation. Edit and navigation cannot be combined.

To trigger actions that are independent of the selection, show the actions on a toolbar above the tree. For example: Add, Collapse All, Expand All, …

To trigger a default action on the entire item, use the “Active” or “DetailAndActive” item type (sap.m.TreeItem / sap.m.ListItemBase, property: type, value: sap.m.ListType.Active). Active items trigger an event when clicked, which can be handled by apps, for example, to open a dialog. Selection and expanding/collapsing a node does not trigger the event, but are handled by the tree. Do not use this for navigation, to switch the line item to an edit state, or to delete the item.
Active can be combined with edit and delete, but not with navigation. Do not combine active with single selection master.

When you add an item, add the new item as the first item of the corresponding node.

Editing Items

To edit items, add an Edit button either in-line on the toolbar above the tree. Triggering the button either opens a dialog or navigates to an editable details page.

For mass editing:

• Provide multiselection (sap.m.Tree/ sap.m.ListBase, property: mode, value: sap.m.ListMode.MultiSelect).
• Provide an Edit button on the toolbar above the tree.
• If several items are selected, triggering the Edit button opens a dialog in which the user edits the corresponding fields for all selected items.

For more details, see mass editing.

Properties

sap.m.Tree

The following additional properties are available for the tree:

• The property: insert adds a margin on all sides of the tree.
• The property: footerText adds a small additional row below the last item of the tree. This row can contain text only. Do not use this property.
• The property: width defines the width of the whole tree.
• The property: includeItemInSelection uses a click on the entire line item to select the corresponding item if the tree is in a selection mode. This competes with other settings such as “Navigation” or “Active” and should therefore not be used.
• The property: enableBusyIndicator automatically shows a busy indicator while data is being loaded.
• The property: modeAnimationOn plays a short animation it the selection mode is changed. Do not use it.
• The property: showSeparators allows you to show all, none, or some separators. The default setting, which shows all separators, works well in most cases.
• The property: swipeDirection allows you to define the direction in which to swipe if additional actions are hidden behind a tree item. This works only on touch devices. Do not use this property for functionality which is not available somewhere else.
• The property: rememberSelections leaves items selected even if they are not currently visible, for example, through filtering. If this behavior is not wanted, set the flag to “false”, but you should do so only in exceptional cases.
• The property: busy sets the tree to a busy state. While in busy state, the entire tree cannot be used and items cannot be read due to an overlay.
• The property: busyIndicatorDelay defines the time after which a busy state is shown after the tree has been set to this state. Use the default value.
• The property: visible shows the tree (“true”) or hides it (“false”).
• The property: tooltip adds a tooltip to the entire tree. The tooltip is only shown on mouse interaction. It will not work on tablets, smartphones, or other touch devices. Do not use it.

sap.m.StandardTreeItem / sap.m.CustomTreeItem

The following additional properties are available for sap.m.StandardTreeItem:

• The property: selected allows an item to be selected programmatically.
• The property: busy sets the item to a busy state. While in busy state, the whole item cannot be used and cannot be read due to an overlay. In most cases, this should not be needed. Do not use it.
• The property: busyIndicatorDelay defines the time after which a busy state is shown after the item has been set to this state. Do not use it.
• The property: visible shows or hides the item.
• The property: tooltip adds a tooltip to a whole item. The tooltip is only shown on mouse interaction. It will not work on tablets, smartphones, or other touch devices. Do not use it.

Resources