Last Updated 11.04.02

General Description

The purpose of the tree control is to allow users to quickly browse through complex sets of hierarchical objects. The tree also shows the relationship between different sets of objects in the hierarchy.

The tree can be used either as a method for selecting objects from a hierarchy, or to display Master/Detail information for a hierarchy of objects. The contents of this guideline are as follows: NOTE: The Master/Details page template with a tree is the ONLY page template that can use frames in BLAF applications. Frames can only be used when a tree is present, and it is this specific master/detail templates.

Guideline Attributes

Spec Version # - 3.1
Spec Contributors - Betsy Beier, Mervyn Dennehy
UI Models - All Models
Example Products - CRM applications, Data warehouse, HR applications
Related Guidelines - Tab/Navigation Guideline, HGrid Guideline, Master/Detail Templates

Interaction and Usage Specifications

General Interaction Principles

Objects within a Tree: Parent Object (Container and Object), Container Only, or Child Object

Tree Example with Folder/Object Icons
The following cropped image shows an example tree of objects within containers. Note that the containers do not have object details.

Expandable/Collapsable Nodes within Tree

Node Selection/Highlighting

Levels of Object Hierarchy

It is recommended to limit the number of levels that are displayed in the tree by providing filtered views of the information (via a poplist above the tree.) Nevertheless, the tree will allow any number of levels to be displayed.

Iconic Representation of Tree Nodes

Each node may have an icon that appears to the left of the node text. The icon must have "ALT" text as described in the Icon Repository. There are a base set of generic icons to represent a parent or container (folder), and common object nodes. Specific icon representation of all different node types is not supported. Icons should be recognizable and generic. They should be applicable in different contexts.

Tree Examples with Generic Object Types
The following cropped image shows an example tree with multiple generic object types, and containers.

Filtering Tree Data

Filters can be applied to the tree to view subsets of data. Seeded filters can be implemented by product teams and made available to the user through the "View" drop list.

Searching Tree Data

A search label/field and "Go" button may appear on the page with a tree (layout may vary depending on search mechanism and page template used.) When a user enters search criteria, and selects "Go", the page is redrawn as a flat list (tabular format) of results.

Editing and Updating the Tree Hierarchy

If users need to editing or update a hierarchy, it is recommended not to clutter the task at hand with hierarchy editing functions, but to provide a button that switch to "Update" or editing mode. This mode displays the tree in an HGrid. The HGrid provides a proven selection and manipulation model (Select and Act with the control bar) for updating data, as well as a proven method of retaining the hierarchical relationships between objects.

Display of Large Record Sets in a Tree

When a Tree node contains many children at the same level, it is not practical to display the entire list within the Tree at the same time. In this case the BLAF standard is to display sets of records and to provide record navigation controls within the node to move forward and back through the child record sets. The same approach is used for HGrid controls.

Navigation within a Tree Record Set

For record navigation usage principles and syntax details, see HGrid and Tree Record Navigation with Large Data Sets in the Locator Element: Record and Page Navigation guideline.

General Usage Principles

The tree components has two primary usages:

Tree Used for Selection of An Object in Hierarchical View

This no frame page template with a tree allows a user to expand a node or set of nodes in the tree to view a set of records and their relationship to one another. It is ideal for picking an object where the relationship of one object to others helps the user identify the object clearly. Once the object is selected, the user moves on to the next task.

Example of Tree Used as a Selection Method
NO Frames are used in this example.

Tree Used for Display of Hierarchical Master/Detail Content

This approach allows a user to expand a node or set of nodes in the tree to view a set of records and their relationship to one another. There are two implementation methods: No-Frame Example of Master/Detail Tree

3-Frame Example of Master/Detail Tree
NOTE: This is the ONLY frame usage allowed in BLAF applications.

Note: In general, there should be no need to use the 3-frame master/detail approach when Partial Page Rendering (PPR) is implemented, as the no-frame approach provides equivalent functionality and response time.

The Master/Detail behavior is the same for both n-frame and 3-frame implementations:
For more information on use of the Tree component in Master/Detail format, see Hierarchy of Objects/List of Objects (Tree/Table) in the Master/Detail Templates guideline.

Tree and PPR

PPR can be used to refresh the tree control when users: Principles for use of PPR with tree controls are as follows: PPR Used to Expand a Tree Node

PPR Used with No-Frame Master/Detail View

Visual Specifications

Tree Style and Layout Details

Measurement and Layout Details
Detailed measurements for the layout of the tree component are provided in the following image:

Components and/or Elements Used in Conjunction with the Tree

A Tree may appear in: Note: For UI behavior consistency amoung all BLAF applications, the Master/Detail tree is the ONLY template in BLAF where frames appear. A tree must be on the page to warrant frame usage.

Example of 3 Frames Configuration for Tree with Master/Detail Content
NOTE: This is the ONLY frame usage allowed in BLAF applications.

Open/Closed Issues