Page History
...
| Do | Don’t | Article 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
displayExpressionto human-readable text. - Explicit selection affordance for multi-select: Show checkboxes to convey state non-visually using
showCheckBoxesModewithselectionMode: "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
dataTestIdandid. - Avoid color-only meaning: Convey selection and hierarchy via labels and checkbox presence using
displayExpressionandshowCheckBoxesMode. - Predictable interactions: Establish selection behavior on init (e.g., set
selectionModeandselectByClickinON_INIT) and keep it stable during a session. - Stable relationships: Use persistent identifiers so assistive tech can track nodes; configure
keyExpressionand hierarchical relations viachildrenExpression.