5
New Styleguide page for "Loading"
Introduce CDN links to all images
Add Section with index-tiles to branding page
New Styleguide page for "Branding"
FC
Extend ".wui-bs-alert" with all fruit-color-variantes
Font-Awesome has been updated to version 5.12.0
Ut
"Utils" has been extended with opacity, heights and colors
1

Do you have any design-related questions or suggestions? We'd love to hear from you.

Please contact Wuiman to discuss your ideas.

John Doe

Tree Views

Tree-views in general

  • Expand/Collapse. You can expand/collapse nodes by clicking either the arrow or the title.
  • Selection a node. Click on checkbox (there will only be checkboxes for single- and multiselect-trees).
  • Alphabetical order. Nodes are sorted alphabetically by each level in ascending order.
  • Search. To preserve the tree structure as a whole, inaccurate results are hidden - but can be displayed again by the user. This is a significant difference to other components where only hits are displayed.

There are three different types of trees, which differ significantly in how many nodes can be selected.

  • Tree-view (readonly). In the tree view, single nodes cannot be selected. But the nodes can be edited or changed inline.
  • Singleselect-tree. According to the principle of a radio button, exactly one node can be selected at a time.
  • Multiselect-tree. Children and parents are selectable. Depending on the case of use, children are selected directly or indirectly together with their parent.

In Review

This component was thoroughly tested. However, it has not yet been applied in many cases in production. Maybe there will be changes due to case-related issues. If you want to use this component in production please let me know, so that we can talk about possible future changes and be sure that none of the changes will disrupt your work. Feel free to contact me via slack, email ( tjaeger@wescale.com) or personally.

Definitions

The four different tree types contain one of the following higher-level modifier each ( .wui-tree-select--readonly, .wui-tree-select--singleselect, .wui-tree-select--multiselect, .wui-tree-select--subtree-select).
While the trees differ in their select behavior, they are the same in their basic structure and in their general behavior. Since the tree component is a very complex component, the most important definitions that apply to all trees are summarized here.

Contains labels (2)
1. Root node | node | parent
1.1 Node | child | parent | sibling in 1.
Contains label (1)
1.2 Node | child | parent | sibling in 1.
1.2.1 Node | child | sibling in 1.2 | leaf
Label
1.2.2 Node | child | sibling in 1.2 | leaf
Label
1.3 Node | child | sibling in 1. | leaf
1.4 Node | child | sibling in 1. | leaf
1.5 Node | child | parent | sibling in 1.
1.5.1 Node | child | sibling in 1.5 | leaf
1.5.2 Node | child | sibling in 1.5 | leaf
  • Node is any basic unit like a value or condition in a tree. Each node in a tree has zero or more child nodes. A node could be a tree of its own.
  • Root node is the topmost node in a tree and has no parent. In most cases the root node will not be visible and the users will only see the nodes from the second level on.
  • Child is a node that is directly connected to another node when moving away from the root node.
  • Parent is the converse notion of a child.
  • Siblings are nodes which are on the same hierarchical level and have the same parent.
  • Leaf is a node with no children.

If you want to use one or more labels within a node, wrap them in a inline-list.

Search

Searching tree-views follows the same guidelines as other searches on the platform. A special aspect of tree views is that not only the search result is important, but also the relation of the search result to other elements – such as " in which tree/subtree is the search result located?" or "which siblings does the search result have?".
Therefore the user has the possibility to display further elements, that are not search hits of the current search by clicking . This behavior and the complexity of the tree component itself are a significant difference to the general search and imply some rules that apply specifically to the tree view.

Deutschland (de)
NRW
Paderborn
Paderborn / Schloss Neuhaus
Einkauf u Logistik (Paderborn)
United States (us)
Illinois
Paderborn (US13)
Paderborn (US|US10|US1003)
Load more
  • General behaviour. A hit is always displayed in connection with all its parents. The Button is an indicator that there are further children in the respective node that do not match the search. Similar to an indirectly selected node, the indirect matches have a light gray background.

    In case of a fairly general search/filter with a large number of hits, you should be aware that the list of search results can become very long because the respective parents are also displayed for each hit.

  • Number of nodes. If there are more than 50 (configurable) search hits, a loadmore-button is displayed.
  • Editing search results. Actions on the tree view have no influence on the filter or search. So it is possible that a user searches for "Paderborn" - clicks on the button to display more - and sees search results that have nothing to do with "Paderborn".
  • Number of results. Search hits can be influenced by filters, searches and the user. Due to the various influences, the display of "Number of results" can lead to confusion or misjudgement, which is why we do not display the "Number of results" here.

The issues listed in this section only concern the differences to the standard behavior of the search. All general guidelines for searches in wescale can be found on the search page.

Tree-Select

There are already tree selects in wescale. But most of them are not part of the wui standard and should therefore not be reused for new features.
The current tree-component can only display the hierarchical representation of items (no select-option). However, it is already designed to be extended to a single- or multiselect-tree. Further tree-selects should therefore build on the basis of .wui-tree-select.

Singleselect

1 indirect checked
1.1
1.1.1
1.2 direct checked

Behavior

  • Select node. Click on checkbox. Only leafs are selectable and will show a check-icon on hover. You can only select one node at a time.
  • Dependencies. If a leaf is selected all ancestors are checked indirectly as well. This allows a user to see directly where the selected node is, without having to search every collapsed tree.

Multiselect

1 indirect checked
1.1
1.2
1.3 indirect checked
1.3.1
1.3.2 direct checked
1.3.3 direct checked
1.3.4
1.4
1.5 direct checked
1.5.1 direct checked by parent
1.5.2 direct checked by parent
1.6

Behavior

  • Select node. Click on checkbox. In principle, each node can be selected.
  • Upstream dependencies. If one / more / all sibling nodes are selected the respective parent is checked indirectly as well. This allows a user to see where all the selected nodes are whitout expanding any subtree.
  • Downstream dependencies. There are two options for downstream dependencies. By clicking a parent, the parent itself is selected directly and ...
    • ... children are selected directly as well.
    • ... children are checked indirectly.

Parents that select their children indirectly have only influence on indirectly selected children. This means that if a child is selected directly, the status is not influenced when clicking on its parent.

Subtree select

1 indirect checked
1.1
1.2
1.3 direct checked
1.3.1 direct checked
1.3.2 direct checked
1.3.3 direct checked
1.4
1.5 indirect checked
1.5.1 direct checked
1.5.2 direct checked
1.6 indirect checked
1.6.1 not selectable
1.6.2 direct checked

Behavior

  • Select node. Click on checkbox. In principle, each node can be selected.
  • Upstream dependencies. If one / more / all sibling nodes are selected the respective parent is checked indirectly as well. This allows a user to see where all the selected nodes are whitout expanding any subtree.
  • Downstream dependencies. By clicking a parent, the parent itself is selected directly and all selectble children are selected directly as well. This also applies if the children are not visible due to filters or because the tree is collapsed.
  • Bulk selection. The bulk selection triggered by clicking on a parent is inherited by all children.

A parent can only be selected directly if all its children are selected directly as well. If one of the children has been deselected or is not selectable, the respective parent is only selected indirectly.

As can be seen in the example for node 1.5, parents are not automatically selected directly, just because all children were selected directly.