Tree

Hierarchies defined in the context can be visualized using the Tree UI element. The hierarchy to be displayed is defined in the context. You can describe this context structure in two ways:

With a recursive node if the number of levels is not yet known at design time
With a non-recursive node if a certain number of levels can be specified at design time

A tree is therefore used for navigation. By clicking on an entry the associated data is displayed in another place. If you want to display a tree structure in which data can be input and you want to provide a scroll bar, use a hierarchical table instead of a tree. More information: TreeByKeyTableColumn and TreeByNestingTableColumn. A tree does not enable the user to select entries, it can only interact with the LeadSelection. Note that although this looks like a selection, it does affect performance, which means that for most scenarios it would be a hindrance.

Example of the Visual Display

TREE

The Tree UI element is bound against the top-level context node to be displayed.

You use nodes (TreeNodeType elements) or leaves (TreeItemType elements) to specify which subnodes are to be displayed and which context attributes are to be displayed on these subnodes as a text or tooltip. The dataSource property of the TreeNodeType element or TreeItemType element is bound to the corresponding context node and the properties text, tooltip, and so on, are bound to the corresponding context attributes on this context node.

TreeItemType elements cannot have children. Therefore, they are always displayed as leaves. They are used when it is decided at design time that the corresponding node does not have children. When using TreeNodeType elements, the decision of whether to use children is dynamically made at runtime.

Note

Hierarchy levels defined in the context cannot be left out when displaying the UI element. For example, a TreeNodeType element that is bound to the Orders must also exist to display the items for the hierarchy Start of the navigation path Customer Next navigation step Orders Items End of the navigation path , which is defined in a context.

All nodes that are not directly below the context root node must be non-singleton nodes, because all elements should be displayed in a tree regardless of the lead selection.

You can also bind the tree so that the dataSource of the tree binds to a structured 1:1 node and the element nodes of the tree are located below them. This is necessary to map directory structures. With recursive trees you can display the recursions for this 1:1 node. This is then skipped with rendering.

Note

To enable the development of accessible applications, the tooltip property is checked during the syntax check.

Runtime Class

CL_WD_TREE

Properties in View Designer

Name	Type	Initial Value	Bindable
id	STRING	(automatic)	No
contextMenuBehaviour	WDUI_CONTEXT_MENU_BEHAVIOUR	inherit	No
contextMenuId	WDY_MD_UI_ELEMENT_REFERENCE		No
dataSource	Context Node		Mandatory
defaultItemIconSource	STRING		Yes
defaultNodeIconSource	STRING		Yes
enabled	WDY_BOOLEAN	true	Yes
minHeight	STRING		Yes
rootText	Translatable text		Yes
rootVisible	WDY_BOOLEAN	true	Yes
selectionChangeBehaviour	WDUI_LEAD_SEL_CHNG_BEHVR	auto	No
title	Translatable text		Yes
titleVisible	WDUI_VISIBILITY	visible	Yes
tooltip	Translatable text		Yes
visible	WDUI_VISIBILITY	visible	Yes
width	STRING		Yes

Aggregations in the View Designer

Name	Cardinality	Type
DROP_TARGET_INFO	0..1	DropTargetInfo
Node Type	0..n	AbstractTreeNodeType

Events in View Designer

Name
onDrop
onExpandAll

Note

Other properties that can be inherited are defined in the related higher-level classes. The related UI elements are:

Dynamic Programming

For dynamic programming, the same properties, events, and aggregations as in the View Designer are available. But note that the spelling format and use of upper/lower case is different.

Dynamic Programming of Properties

View Designer Name	Runtime Name	Type
contextMenuBehaviour	CONTEXT_MENU_BEHAVIOUR	WDUI_CONTEXT_MENU_BEHAVIOUR
contextMenuBehaviour: inherit	CL_WD_TREE=>E_CONTEXT_MENU_BEHAVIOUR-INHERIT
contextMenuBehaviour: provide	CL_WD_TREE=>E_CONTEXT_MENU_BEHAVIOUR-PROVIDE
contextMenuBehaviour: suppress	CL_WD_TREE=>E_CONTEXT_MENU_BEHAVIOUR-SUPPRESS
contextMenuId	CONTEXT_MENU_ID	WDY_MD_UI_ELEMENT_REFERENCE
dataSource	DATA_SOURCE	OBJECT
defaultItemIconSource	DEFAULT_ITEM_ICON_SOURCE	STRING
defaultNodeIconSource	DEFAULT_NODE_ICON_SOURCE	STRING
enabled	ENABLED	WDY_BOOLEAN
minHeight	MIN_HEIGHT	STRING
rootText	ROOT_TEXT	WDY_MD_TRANSLATABLE_TEXT
rootVisible	ROOT_VISIBLE	WDY_BOOLEAN
selectionChangeBehaviour	SELECTION_CHANGE_BEHAVIOUR	WDUI_LEAD_SEL_CHNG_BEHVR
selectionChangeBehaviour: auto	CL_WD_TREE=>E_SELECTION_CHANGE_BEHAVIOUR-AUTO
selectionChangeBehaviour: manual	CL_WD_TREE=>E_SELECTION_CHANGE_BEHAVIOUR-MANUAL
title	TITLE	WDY_MD_TRANSLATABLE_TEXT
titleVisible	TITLE_VISIBLE	WDUI_VISIBILITY
titleVisible: none	CL_WD_TREE=>E_TITLE_VISIBLE-NONE
titleVisible: visible	CL_WD_TREE=>E_TITLE_VISIBLE-VISIBLE
tooltip	TOOLTIP	WDY_MD_TRANSLATABLE_TEXT
visible	VISIBLE	WDUI_VISIBILITY
visible: none	CL_WD_TREE=>E_VISIBLE-NONE
visible: visible	CL_WD_TREE=>E_VISIBLE-VISIBLE
width	WIDTH	STRING

Dynamic Programming of Events

View Designer Name	Runtime Name
onDrop	ON_DROP
onExpandAll	ON_EXPAND_ALL

Dynamic Programming of Aggregations

View Designer Name	Runtime Name	Cardinality
DROP_TARGET_INFO	DROP_TARGET_INFO	0..1
Node Type	NODE_TYPES	0..n

Example

You can find examples of this interface element in the system in the Web Dynpro application WDR_TEST_UI_ELEMENTS, and in the component WDR_TEST_EVENTS in the views TREE_*.