(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Tree View

Link to Figma: tba

Overview

• The Dynamic Tree View component displays data in a collapsible hierarchical tree structure.
• It allows users to explore nested information through parent-child relationships.
• The component supports navigation and selection of nodes within the hierarchy.
• It is useful for representing structures such as organizations, file systems, and categories.

[IMAGE PLACEHOLDER: Tree View showing collapsed and expanded parent-child nodes] Image Added

Specs

Tokens

...

• dataSourceId – Specifies the data source ID for retrieving tree data. For example, "api/categories" connects the tree view to a categories API endpoint.
• getEntityCollectionHttpRequestParametersMap – Configures HTTP parameters for data fetching. This object maps additional parameters needed for the data request, such as filters or sorting options. For example, {"headers": {"Content-Type": "application/json"}, "pathParams": {"tenantId": "{{tenantId}}"}} allows you to pass dynamic path parameters to the API.

[IMAGE PLACEHOLDER: Tree View structure with parent-child nodes, display conditions, event handling, and mapped fields]

Styling

(Configured in General Properties)

...

• showCheckBoxesMode – Controls how checkboxes are displayed in the tree view. Options include "none" (no checkboxes), "normal" (checkboxes shown for all nodes), or "selectAll" (includes a select all checkbox). For example, using "selectAll" is helpful when users need to select multiple items in a permissions tree.
• paddingClass – Configures the padding around the component using CSS classes. For example, "p-4" adds medium padding on all sides of the tree view, while "px-3 py-2" adds different horizontal and vertical padding. Proper padding ensures the tree view has adequate spacing within its container.

[IMAGE PLACEHOLDER: Tree View with display name, checkboxes, and padding highlighted] Image Added

Actions & Variants

...

(Configured in Visual Properties)

• selectionMode — Determines how users can select nodes in the tree. Options include "single" (only one node can be selected at a time), "multiple" (multiple nodes can be selected simultaneously), or null (no selection allowed). For example, setting to "multiple" allows users to select several categories in a product catalog

  tree. selectNodesRecursive — Determines if selecting a parent node automatically selects all its child nodes. When set to true, clicking a parent node selects all its children recursively, which is useful for operations that apply to entire branches of the

  tree.

• selectByClick — Enables or disables node selection when clicking on a node. When set to true, users can select a node by clicking anywhere on it; when false, they must use checkboxes (if enabled) to select nodes. This provides flexibility in how users interact with the tree.
  

...

• Image Added

• selectNodesRecursive — Determines if selecting a parent node automatically selects all its child nodes. When set to true, clicking a parent node selects all its children recursively, which is useful for operations that apply to entire branches of the tree.
  Image Added

Tests

(Configured in Testing Hooks)

...

• visibilityPolicySetId — Determines the visibility of the component based on specified policy sets. For example, setting to "categoryAdminPolicy" restricts the tree view to users with category management privileges. This enables role-based access control for the component, ensuring only authorized users can see and interact with certain hierarchical data.

Links

• Link to Figma: tba
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id2/9-tree

Guidelines

Data Format

The tree view component expects a hierarchical data structure or a flat structure that can be converted to a hierarchy.

...

Accessibility

• Programmatic names for nodes: Ensure meaningful labels by mapping displayExpression to human-readable text.
• Explicit selection affordance for multi-select: Show checkboxes to convey state non-visually using showCheckBoxesMode with selectionMode: "multiple".
• Accidental-selection prevention: When precision is needed, disable row-click with selectByClick: false.
• Localized helper text for guided flows: If tours are used, provide localized titles/descriptions via enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription.
• Deterministic test/a11y hooks: Expose stable handles for audit tooling with dataTestId and id.
• Avoid color-only meaning: Convey selection and hierarchy via labels and checkbox presence using displayExpression and showCheckBoxesMode.Predictable interactions: Establish selection behavior on init (e.g., set selectionMode and selectByClick in ON_INIT) and keep it stable during a session.
• Stable relationships: Use persistent identifiers so assistive tech can track nodes; configure keyExpression and hierarchical relations via childrenExpression.