While the Tree class (see Tree Class) manages the relationship of the tree nodes, the TreeviewField object displays a visual representation of the hierarchical structure of a tree view. The TreeviewField class has a data type of TreeNode. The value of the field is the selected TreeNode. Initially, the tree is empty. You can use the AddNode method of the Tree class to insert nodes into the tree. If a user clicks on a new node, the value will change to the TreeNode clicked on. If 4GL code changes the value, that node will become the selected node.

Each TreeNode is displayed with its text label and optionally a bitmap label. The TreeviewField can also display outlines to emphasize the structure of the nodes. Additionally, a parent node can have expansion buttons with the [+] and [-] symbols to indicate its expanded and collapsed states. Nodes can also display check boxes.

The TreeviewField scrolls during a drag-and-drop operation if the mouse pointer is on the first or last visible node. Drag-and-drop cursors can be customized using DragMoveCursor, DragCopyCursor, and DropCursor attributes. A scroll event is generated for a TreeviewField if it is scrolled using the scroll bar or the mouse wheel.

Each TreeNode can have a pair of bitmap labels to indicate its selected or unselected states, or alternatively its expanded or collapsed states. The ImageList attribute of the TreeviewField object is an array of BitmapObject objects. You use the BitmapLabelIndex attribute and SelectedBitmapLabelIndex attribute of the TreeNode class to specify which images in the array are to be displayed for the node based on whether it is selected. Alternatively the bitmap can be determined by whether the node is expanded: BitmapLabelIndex is used for display of a collapsed node, and ExpandedBitmapLabelIndex is used for an expanded node. By default, the first image is used for all states if it is the only one specified. The bitmaps are resized if necessary and displayed in a 16-pixel by 16-pixel dimension.

The keyboard can be used to navigate the tree. The up arrow and down arrow keys move through expanded nodes. The left arrow key and the minus key on the numeric keypad collapse parent nodes, while the right arrow key and the plus key on the numeric keypad expand them. The Home key moves to the root node. The End key moves to the last node. The PageUp and PageDn keys scroll through the tree.