/
Tree (old)
The following macros are not currently supported in the header:
  • style

Tree (old)

Jun 28, 2020
 Table of Content

Description

ONGOING 

Hierarchically arranged collection of objects

 More info

 Write here more info about the component, only if and when needed:

Tree view is

With a tree view, users can view and interact with a hierarchically arranged collection of objects, using either single or multiple selection.

In a tree, objects that contain data are called leaf nodes and objects that contain other objects are called container nodes. A single, top-most container node is called the root node


Use Tree view when

  • You need to displays a hierarchy of nodes

Related items:

Current appearances in our products

Tree view is widely used in most of our products

 More info

   


New LUX design:

 

Structure

Structure ElementDescription
Header

Content header

  1. Double clicking - collapse all
  2. wide lists/long tables - sticky areas
  3. Filter/search 
Node

Context menu

Right-click for context menu


Empty state 

Empty container presentation will be grayed out


Collapse-Expand

  1. Only in case the node has descendants
  2. Saving state when collapse-expanding for persistency
  3. The hit area for expanding will be the entire line
  4. Up to 10 hierarchy levels


icon (optional)

should be used only if the tree can contain several types of nodes. If all nodes are of the same type, an icon should not be used


Label

node name + tooltip in case the entire name does not fit.


Counter (optional): 

The number of elements the node contains


States: Focus, Hover, Selected, Disabled.


Behaviour

Structure ElementDescription
Hierarchey
  1. Parent for the entire tree is optional.
  2. A tree should have a parent if the parent has meaning or to allow the user to select the entire tree in case there is a use case the will require that.
  3. When you do use a parent node for the entire tree, expand this node by default.
Scrolling
  1. wide lists/long tables - sticky areas

  2. Mouse wheel should work on scroll

Localization
  1. Support i18L - localization width
Multi/mixed selection 
Resizing
Loading


Structure

Structure ElementDescription
Hierarchy

Parent for the entire tree is optional. A tree should have a parent if the parent has meaning or to allow the user to select the entire tree in case there is a use case the will require that.

When you do use a parent node for the entire tree, expand this node by default.

Node

Collapse/expand button: in case the node has descendants.

Icon (optional): should be used only if the tree can contain several types of nodes. If all nodes are of the same type, an icon should not be used.

Label (node name) + tooltip in case the entire name does not fit.

Counter (optional): the number of elements the node contains

States: Focus, Hover, Selected, Disabled.

Default SortingAlphabetically (between and within the hierarchy level/group)
LoadingWhen a user expands a node, if the nodes are not shown immediately, provide "loading" indication at the place below the expanded node.
Interaction

Click on the expand/collapse button will do the respective action.

Click on the node label (+counter) will select the node.

Keyboard functionality

Features 

Multiple vs. Single Selection Modes


Description
WhatThe ability to select a node or multiple nodes.
When

A tree must support single selection mode.

Multiple selection mode is optional according to the use cases.

Single Selection

Single selection is activated by selecting the node label.

Selecting the node label will select the node and un-select previously selected node.

Multiple Selection Mode

On mouse hover a node, a check box is displayed. If the user checks it he is placed in a multi selection mode. Multi selection mode can also be activated by using Ctrl/Shift while selecting the node label.

The apply button becomes active and the counter starts counting.

On this mode, clicking the label/check box will perform multi select. Only once the apply is pressed the action is executed (whatever the corresponding action is).

Selecting a parent node through the check box will select its descendants as well.

Unselecting some of the descendants will place the parent node in mixed state.

While at the multi selection mode, single selection cannot be done. The user needs to clear previous selections to exit the mode. Therefore, a “clear all” action is placed next to the Apply button


Resources

http://commadot.com/the-ux-of-trees-design-pattern/

http://docs.sencha.com/extjs/6.2.0/guides/components/trees.html

http://examples.sencha.com/extjs/6.2.0/examples/kitchensink/#trees

https://jonmiles.github.io/bootstrap-treeview/

https://experience.sap.com/fiori-design-web/ui-components/tree-table/

Needs to be designed:

Top

  1. Search tree

  2. Filter tree

Content

  1. info-tip on hover (some display total)

  2. Drag n drop in a tree to change location

  3. Actions on node (icons?) - Cut, Copy, Paste, Remove or Delete, Rename, Properties (?)
  4. Adding a child to tree

TBD - Open issues

  1. Keyboard shortcuts

  2. Expand all  

  3. Placing an item in multiple containers?

  4. Filtering vs Finding - At the moment both are used


Next Steps/Tasks

  1. Trees accessibility - see Asaff's
  2. Hint of how many items are in container
  3. Select all, Clear all, show how many are selected
  4. sort

  6. Tree table