Tree

Usage

When to use

Use a tree in the following cases:

• To display hierarchical data, e.g. organization charts, file directories, nested categories, or any data with parent-child relationships.
• To navigate through deeply nested information which cannot be displayed easily in a simple list navigation.
• To maintain a consistent and familiar structure for displaying data across Insights Hub or your app.

Avoid using a tree in the following cases:

• When the data has only 1 or 2 levels of hierarchy use more simple components like a list navigation, a list or a table.
• When your app is built mobile-first, due to potential scrolling and nesting challenges.

Types

Use a compact tree for very limited space and when a huge number of nodes within a level is expected.

General construction

A tree container consists of the following elements:

1. Title
2. Filter
   • Search/filter (textual) or create a quick/predefined filter, custom/categorized filters
3. Tree list
   • Root node
   • Favorite
   • All nodes
4. Additional content
   • Can contain meta information like parameters, links and further information
5. Toggle view mode
   • Possible view modes are tree, list, card, map etc.
6. Manipulated list
   • Collapse/expand all
   • Show/hide icons
   • Order/sort tree nodes
   • Other manipulation actions

A tree item consists of the following elements:

1. Status (optional)
   • Sets the status for an item.
2. Expanded or collapsed indicator
   • Indicates if a tree is expanded or collapsed.
3. Supporting visual (optional)
   • A supporting visual may be an icon, a pictogram (for example an avatar) or an image.
   • Use only one type of visualisation.
4. Checkbox (see details here)
   • A checkbox provides the possibility to select a tree item to perform an action on it.
5. Node name
   • A label is mandatory.
6. Description (optional)
   • Contains additional information. Can be a description, type name, creator name etc.
7. Additional meta data (optional)
   • Contains additional content-relevant information; e.g. a text or icon.
8. Badge (optional)
   • Number of dashboards, child assets etc. (see details here)
   • Can have an icon
9. Favorite (optional)
   • To toggle an item as favorite or not favorite.
   • If an item is only marked as favorite without toggle action, use the star icon in position 7 instead.
10. Additional actions (optional)
    • Ghost button (for a ‘more’ menu containing an arbitrary number of actions)

Options

The following tree item options are available:

Text only

Use this option when a tree consists of the same content type and no other item elements than a label, a drill down indicator and an additional description if needed.

Supporting visual

Use this visual to distinguish different content types.

Item status

Checkbox

Use for a multi-selection to perform e.g. batch actions like deleting multiple items at once (see behavior).

Badge

Use a badge to provide additional secondary information that should be scannable:

1. Counter: e.g. number of children or number of objects attached to the node.
2. Type: e.g. device or asset type.
3. Status: if a status indicator on the left is not enough, and it is important to show the cause (keep short, 1-2 words!).

Behavior

1. Expanded or collapsed indicator
   • Clicking the drill down button expands or collapses an item that contains child items.
2. Checkbox
   • Checkbox input has a selected and unselected state.
   • An indeterminate state shows partially checked states.
   • The parent checkbox will be indeterminate until all its child objects are checked.
   • By clicking on the parent checkbox all its child objects will be checked.
3. Node name and description
   • Clicking on the node name and description shows the detailed information on the object in the main or item region.
   • In case the tree parent item is just a container element without specific detailed information
   • the node name and description are either not clickable.
   • or the node name and description expand or collapse the item on click.
4. Favorite
   • It is possible to toggle between favorite and not favorite.
5. Additional actions
   • An arbitrary number of app-specific actions can be made available.

Multi-selection

By default, a selection or deselection of a parent or its child has some dependency:

• Selecting or deselecting a parent will select or deselect all children (also known as “select all/none”)
• Selecting one or more children will set their parent to intermediate state

Note that this is a general recommendation and might not be applicable for some use cases.

Text overflow

Following options for text overflow are available:

• Truncation with tooltip
• Horizontal scroll
• Resizable leading region

Tooltip

Horizontal scrolling

Resizable leading region

Additional content

Do’s & Don’ts

Do not use a tree in both a leading and main region at the same time, as this can be confusing for the user.