Versions Compared

Old Version 1

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • keyExpression: "id"
  • displayExpression: "name"
  • childrenExpression: "children"

Usage

  • Present hierarchical data with expand/collapse by mapping displayExpression, keyExpression, and childrenExpression; connect data via dataSourceId.
  • Choose selection semantics per task:
  • Single choice (navigation): selectionMode: "single"; optionally hide checkboxes with showCheckBoxesMode: "none".
  • Multi-select (bulk actions): selectionMode: "multiple" with showCheckBoxesMode: "normal" or "selectAll".
  • Enable branch-level actions with selectNodesRecursive: true to select descendants with a parent.
  • Control precision of selection: set selectByClick: false to require checkbox-only selection; set selectByClick: true to allow row click selection.

Sizing & Layout

  • Apply spacing around the control using paddingClass.
  • Keep labels concise and readable by pointing displayExpression at a short, human-facing field.
  • Name the instance for authors/editors using displayName (editor-only, not user-facing).

Visibility & Authorization

  • Restrict visibility by role or policy using visibilityPolicySetId.

Content & Localization

  • Localize node labels by pointing displayExpression at the locale-appropriate field in your dataset.

Dos & Don’ts

DoDon’tArticle setting(s)
Use stable unique keys for nodes.Use labels or array indices as identifiers.keyExpression
Map human-readable text to nodes.Surface internal IDs or verbose blobs as labels.displayExpression
Set selectionMode: "single" for navigation trees.Allow multi-select when only one target makes sense.selectionMode
Show checkboxes for multi-select tasks.Force multi-select without visible affordances.showCheckBoxesMode, selectionMode
Enable selectNodesRecursive for branch actions.Make users select every child manually.selectNodesRecursive
Require checkbox-only selection when precision matters.Allow row-click selection that causes accidental picks.selectByClick: false, showCheckBoxesMode
Filter at the source to limit payload.Fetch unbounded datasets without parameters.getEntityCollectionHttpRequestParametersMap, dataSourceId
Hide the Tree View when not applicable.Leave an empty/irrelevant tree visible.displayConditions
Restrict sensitive trees by policy.Show structure and rely on downstream errors.visibilityPolicySetId
Provide stable test hooks.Target nodes by transient text in tests.dataTestId, id

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.