Oracle Fusion Middleware Tag Reference for Oracle ADF Faces 12c (12.2.1.4.0) E81455-03

# <af:tree>

af:tree tree tree

UIComponent class: oracle.adf.view.rich.component.rich.data.RichTree
Component type: oracle.adf.RichTree

Naming container: Yes. When referring to children of this component ("partialTriggers", `findComponent()`, etc.), you must prefix the child's ID with this component's ID and a colon (':')

The Tree is used to display data that is structured in a hierarchical format. This component supports multiple root elements, and it has a simple user interface (UI) - each element in the Tree is appropriately indented to indicate its level in the hierarchy, and is connected to its parent. The features of the Tree component include mechanisms for expanding and collapsing portions of the hierarchy.

The "nodeStamp" facet of the Tree is used to display the data for each element in the tree. The "nodeStamp" is repeatedly rendered (stamped) once per element. The "nodeStamp" can contain images and text items. The selection is displayed only around the text items.

Because of this stamping behavior, some components may not work inside the tree. Most components will work without problems, for example any input and output components. If you need to use multiple components inside a cell, you can wrap them inside a panelGroupLayout component. Components that themselves support stamping are not supported, such as trees within a tree or region within a tree.

## Hierarchical Selector

The tree and treeTable components support a focusRowKey attribute that can be set (through a backing bean or EL expression) to point to a row key for a node inside the tree (at any level).

The focusRowKey attribute is also set by the tree renderer when the user right clicks on a node and selects the "Show as top" context menu item (or the "Show as top" toolbar button/menu in panelCollection).

When the focusRowKey attribute is set, the Tree renders the node pointed to by the focusRowKey attribute as the root node in the Tree and displays a "Hierarchical Selector" icon next to the root node. Clicking the Hierarchical Selector icon, displays a Hierarchical Selector popup which shows the path to the focusRowKey from the root node of the Tree.

The pathStamp facet determines how the content of the Hierarchical Selector popup is rendered, just like the nodeStamp facet determines how the content of the tree is rendered. For example, including an af:image and an af:outputText in the pathStamp facet causes the tree to render an image and an outputText component for each node level in the Hierarchical Selector popup.

## Fetch Size

See Table Fetch Size.

## Emailable and Printable Modes

See Table Emailable and Printable Modes.

## Geometry Management

- This component can be stretched by a parent layout component that stretches its children, e.g. panelStretchLayout, panelSplitter.
- When stretching this component, the only valid setting for autoHeightRows is "-1" (a value of 0 will be treated as -1 when stretched).
- When NOT stretched, autoHeightRows="0" can be used to size the height to the fetch size, which is similar to dimensionsFrom="children". Please refer to 'autoHeightRows' attribute for more information.
- This component does not stretch its children.

If the oracle.adf.view.rich.geometry.DEFAULT_DIMENSIONS context-param is set to "auto" in the project's web.xml, and the autoHeightRows value is set to 0, or is not set, the AFStretchWidth style class will be rendered for this component.

## Screen Shot(s)

Tree component.

## Code Example(s)

    <af:tree var="node" value="#{myBean.orgChart.root}" id="t1">
      <f:facet name="nodeStamp">
        <af:panelGroupLayout id="pgl1">
          <af:image source="#{node.icon}"
                    inlineStyle="margin-right:3px; vertical-align:middle; height:14px; width:16px;"
                    id="i1"/>
          <af:outputText value="#{node.firstname}" id="ot1"/>
        </af:panelGroupLayout>
      </f:facet>
    </af:tree>

## Events

Type | Phases | Description
--- | --- | ---
org.apache.myfaces.trinidad.event.RowDisclosureEvent | Apply, Request, Values, Invoke, Application | The expansion event is generated for a table when the detail facet of a row is expanded or collapsed. For tree or a treeTable, the expansion event is generated when tree nodes are expanded or collapsed.
org.apache.myfaces.trinidad.event.SelectionEvent | Apply, Request, Values, Invoke, Application | The selection event is delivered when the table selection changes.
org.apache.myfaces.trinidad.event.FocusEvent | Apply, Request, Values, Invoke, Application | Event delivered when user clicks to focus on (or zoom into) a particular element's subtree of children. The TreeTable responds to this event by modifying the "focusPath" property appropriately. Subsequently, any registered FocusListener instances are called.
org.apache.myfaces.trinidad.event.AttributeChangeEvent | Invoke, Application, Apply, Request, Values | Event delivered to describe an attribute change. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change event might include the width of a column that supported client-side resizing.

## Supported Facets

Name | Description
--- | ---
contextMenu | popup component containing the context menu that will be shown on right click of any tree node. The af:popup must contain an af:menu to display the context menu
nodeStamp | the component to use to stamp each element in the tree. Only certain types of components are supported, including all components with no behavior and most components that implement the EditableValueHolder or ActionSource interfaces. In a treeTable, this must be a column.
pathStamp | the component used to stamp each step of the focus path when the Hierachical Selector popup is displayed. This component can be a a combination of simple outputText, image, or outputFormatted tags and must not be an "input" component (EditableValueHolder) since no user input is allowed in the Hierarchical Selector popup. If this facet is not provided, then the Hierarchical Selector icon is not rendered.

## Attributes

Name | Type | Supports EL? | Description
activeRowKey | Object | Yes | this is the row that is currently active on the client. In click-to-edit mode, the active row will be made editable and is brought into view (if not already visible). Upon initial display, the click-to-edit component defaults the active row to the first visible row.
attributeChangeListener | javax.el.MethodExpression | Only EL | a method reference to an attribute change listener. Attribute change events are not delivered for any programmatic change to a property. They are only delivered when a renderer changes a property without the application's specific request. An example of an attribute change events might include the width of a column that supported client-side resizing.
autoHeightRows | int | Yes | Default Value: -1 The number of rows used to size the tree height. If the oracle.adf.view.rich.geometry.DEFAULT_DIMENSIONS context-param is set to "auto" in the project's web.xml, the default value for this attribute will be 0. Otherwise, the default value will be -1 (no auto-sizing for any number of rows). In a flow layout, specifying the 'autoHeightRows' attribute causes the height of the tree to shrink/grow as nodes are expanded/collapsed in the UI. The height will grow to a maximum of 'autoHeightRows' after which a scrollbar is shown. This attribute is also supported when the component is inside PanelCollection. A value of 0 can be used to default the autoHeightRows to the current fetchSize. 'autoHeightRows' value cannot be larger than "fetchSize" attribute. If a value larger than fetchSize is specified, the value is capped at the fetchSize. If a value larger than the number of rows is specified, the number of rows in the component is used to size the component height. 'autoHeightRows' works with contentDelivery=immediate/lazy/whenAvailable. Note that specifying a CSS "height" in the "inlineStyle" attribute will have no effect and will get overridden by the auto-sized height. Specifying CSS "min-height" and "max-height" values in the "inlineStyle" attribute is not recommended and is incompatible with the autoHeightRows attribute. When the component is placed in a layout-managing container, such as panelSplitter, it will be sized by the container (no auto-sizing will occur). Not supported on the following renderkits: org.apache.myfaces.trinidad.core
binding | oracle.adf.view.rich.component.rich.data.RichTree | Only EL | an EL reference that will store the component instance on a bean. This can be used to give programmatic access to a component from a backing bean, or to move creation of the component to a backing bean.
blockRowNavigationOnError | String | Yes | Valid Values: always, never, auto Default Value: auto Whether we want to block row navigation in case of validation failure. This is when you select a row and do some editing inside the table or in a related form, and this editing causes some validation failures. At this time, if you click on a different row in table, we want to block you from moving to the new row. possible values are: always, never and auto. default value is auto. always means we block the row navigation never means we don't block and let the row navigation happen auto means the framework will make the decision
clientComponent | boolean | Yes | Default Value: false whether a client-side component will be generated. A component may be generated whether or not this flag is set, but if client Javascript requires the component object, this must be set to true to guarantee the component's presence. Client component objects that are generated today by default may not be present in the future; setting this flag is the only way to guarantee a component's presence, and clients cannot rely on implicit behavior. However, there is a performance cost to setting this flag, so clients should avoid turning on client components unless absolutely necessary. For the components outputText and outputFormatted, setting the clientComponent to true will render id attribute for the html DOM. This ID attribute can alternatively be generated by setting oracle.adf.view.rich.SUPPRESS_IDS to "auto" in web.xml.
contentDelivery | String | Yes | Valid Values: immediate, lazy, whenAvailable Default Value: whenAvailable whether data should be fetched when the component is rendered initially. When contentDelivery is "immediate", data is fetched and inlined into the component chrome. If contentDelivery is "lazy", data will be fetched and delivered to the client during a subsequent request. If contentDelivery is set to "whenAvailable", upon initial rendering, the renderer queries the model for available data. Data is fetched and rendered immediately if model indicates that data is available. So contentDelivery="whenAvailable" behaves like "immediate" if data is available upon initial rendering.
contextMenuId | String | Yes | A search expression to identify the popup component containing the context menu that will be shown within the tree body. Expressions are relative to this tree component and must account for NamingContainers (for example, tree and panelCollection are NamingContainer components). You can prepend a single colon to start the search from the root, or multiple colons to move up through the NamingContainers. For example, a leading "::" will pop out of one NamingContainer (including component itself if it is a NamingContainer) and begin search from there, ":::" will pop out of two NamingContainers, etc. Not supported on the following renderkits: org.apache.myfaces.trinidad.core
contextMenuSelect | boolean | Yes | Default Value: true Indicates if we should actually select the node clicked when right clicking to show a context menu. By default the node is selected before the context menu is displayed. However if contextMenuSelect="false", and if user right clicks a node, the new node is highlighted and the highlighting for the currently selected node(s) is cleared when the context menus is displayed. The highlighting of the currently selected nodes(s) is restored after the context menu is dismissed. It should be noted that when the context menu is displayed, the attribute selectedRowKeys still contains the selected node(s). The highlighted row key is established as a currency in the tree when the action for context menu item is executed. The currency in the tree can be retrieved by calling "tree.getRowKey()".
customizationId | String | Yes | This attribute is deprecated. The 'id' attribute should be used when applying persistent customizations. This attribute will be removed in the next release.
disclosedRowKeys | org.apache.myfaces.trinidad.model.RowKeySet | Yes | the set of disclosed rows for this component. Each entry in the set is a rowKey.
displayRow | String | Yes | Valid Values: first, last, selected the row to display in the tree during initial display. The possible values are "first" to display the first row, "last" to display the last row and "selected" to display the first selected row in the tree. The default value for this is null which means that the first row is displayed.
displayRowKey | Object | Yes | the rowkey to display in the tree during initial display. Specifying this attribute will override the displayRow attribute.
editingMode | String | Yes | Valid Values: clickToEdit, editAll Default Value: editAll Indicates the mode used to edit the tree when it contains editable components. When a tree is rendered as readOnly, the editingMode attribute is ignored. The possible values are "clickToEdit" and "editAll". In "editAll" mode all the editable components are displayed at a time in the table view area. In "clickToEdit" mode a single node is editable at a time. In "clickToEdit" mode a single row editable at a time. The following is the behavior: Stay in edit mode: If in edit mode, stay in edit mode when a read/only cell is reached via keyboard navigation. Enter key navigation: When in edit mode, ensure that pressing Enter or Shift+Enter navigates to the adjacent node when possible. Esc key reverts cell edits: When in edit mode, pressing the Esc key reverts all edits made to cells in a node and disables edit mode. Input Field Text Selection: When a cell contains an input text field widget, the text is selected automatically when the widget has focus.
emptyText | String | Yes | the text of an empty tree. If the text is enclosed in an open and closing html tag, it will be formatted. The formatting behavior is similar to outputFormatted component. If it is not enclosed in an open and closing html tag, it will not be formatted.
expandAllEnabled | boolean | Yes | Default Value: true Indicates whether the "Expand/Collapse All", and "Expand/Collapse All Below" menu items are rendered. These menu items are rendered by default.
fetchSize | int | Yes | Default Value: 25 the number of rows in the data fetch block Not supported on the following renderkits: org.apache.myfaces.trinidad.core
focusListener | javax.el.MethodExpression | Only EL | a method reference to a focus listener
focusRowKey | Object | Yes
id | String | No | the identifier for the component. Every component may be named by a component identifier that must conform to the following rules: They must start with a letter (as defined by the Character.isLetter() method) or underscore ( _ ). Subsequent characters must be letters (as defined by the Character.isLetter() method), digits as defined by the Character.isDigit() method, dashes ( - ), or underscores ( _ ). To minimize the size of responses generated by JavaServer Faces, it is recommended that component identifiers be as short as possible. If a component has been given an identifier, it must be unique in the namespace of the closest ancestor to that component that is a NamingContainer (if any).
immediate | boolean | Yes | Default Value: false whether or not data validation - client-side or server-side - should take place when events are generated by this component. When immediate is true, the default ActionListener provided by the JavaServer Faces implementation should be executed during Apply Request Values phase of the request processing lifecycle, rather than waiting until the Invoke Application phase.
initiallyExpanded | boolean | Yes | Default Value: false If upon initial rendering, the current subtree under the focused row path should be expanded. A RowDisclosureEvent is broadcast from the encode begin of the component so that listeners are properly notified of the disclosure.
inlineStyle | String | Yes | the CSS styles to use for this component. This is intended for basic style changes. The inlineStyle is a set of CSS styles that are applied to the root DOM element of the component. Be aware that because of browser CSS precedence rules, CSS rendered on a DOM element takes precedence over external stylesheets like the skin file. Therefore skins will not be able to override what you set on this attribute. If the inlineStyle's CSS properties do not affect the DOM element you want affected, then you will have to create a skin and use the skinning keys which are meant to target particular DOM elements, like ::label or ::icon-style.
maxClientRows | int | Yes
nonScrollableRows | int | Yes | Default Value: 50 The nonScrollableRows property determines the number of rows to show in email mode, print mode, or other circumstances where table scrolling is unavailable. This property will not have an affect outside of these circumstances.
partialTriggers | String[] | Yes | the IDs of the components that should trigger a partial update. This component will listen on the trigger components. If one of the trigger components receives an event that will cause it to update in some way, this component will request to be updated too. Identifiers are relative to the source component (this component), and must account for NamingContainers. If your component is already inside of a naming container, you can use a single colon to start the search from the root of the page, or multiple colons to move up through the NamingContainers - "::" will pop out of the component's naming container (or itself if the component is a naming container) and begin the search from there, ":::" will pop out of two naming containers (including itself if the component is a naming container) and begin the search from there, etc.
rendered | boolean | Yes | Default Value: true whether the component is rendered. When set to false, no output will be delivered for this component (the component will not in any way be rendered, and cannot be made visible on the client). If you want to change a component's rendered attribute from false to true using PPR, set the partialTrigger attribute of its parent component so the parent refreshes and in turn will render this component.
rowDisclosureListener | javax.el.MethodExpression | Only EL | a method reference to an ExpansionListener
rowSelection | String | Yes | Valid Values: none, single, multiple Default Value: none whether rows in this table are selectable. Use the value "single" to enable single selection and "multiple" to enable multiple selection. Not supported on the following renderkits: org.apache.myfaces.trinidad.core
selectedRowKeys | org.apache.myfaces.trinidad.model.RowKeySet | Yes | the selection state for this component.
selectionEventDelay | String | Yes | Valid Values: disabled, enabled Default Value: disabled whether or not it is enabled to delay row selection event for 300ms when a user navigates rows with arrow up/down key. When it is enabled, it can improve the performance by avoiding sending many events to server while a user keeps arrow up/down key down to navigate. It can have a value of enabled/disabled. The default value is disabled. Not supported on the following renderkits: org.apache.myfaces.trinidad.core
selectionListener | javax.el.MethodExpression | Only EL | a method reference to a selection listener
shortDesc | String | Yes | the short description of the component. The shortDesc text may be used in two different ways, depending on the component. For components with images, the shortDesc is often used to render an HTML alt attribute for the image. Please see the accessibility guidelines section for correct alt text usage of the shortDesc attribute. shortDesc is also commonly used to render an HTML title attribute, which is used by user agents to display tooltip help text. In this case the behavior for the tooltip is controlled by the user agent, e.g. Firefox 2 truncates long tooltips. For form components, the shortDesc is displayed in a note window. For components that support the helpTopicId attribute and are not using the shortDesc as image alt text, it is recommended that helpTopicId is used instead of shortDesc as it is more flexible and provides more accessible descriptive text than the use of the title attribute.
styleClass | String | Yes | a CSS style class to use for this component. The style class can be defined in your jspx page or in a skinning CSS file, for example, or you can use one of our public style classes, like 'AFInstructionText'.
summary | String | Yes | the summary of this tree's purpose and structure for user agents rendering to non-visual media.
unsecure | java.util.Set | Yes | A whitespace separated list of attributes whose values ordinarily can be set only on the server, but need to be settable on the client. Currently, this is supported only for the "disabled" attribute. Note that when you are able to set a property on the client, you will be allowed to by using the the .setProperty('attribute', newValue) method, but not the .setXXXAttribute(newValue) method. For example, if you have unsecure="disabled", then on the client you can use the method .setProperty('disabled', false), while the method .setDisabled(false) will not work and will provide a javascript error that setDisabled is not a function.
value | Object | Yes | the hierarchy of tree data - must be of type org.apache.myfaces.trinidad.model.TreeModel
var | String | No | Name of the EL variable used to reference each element of this collection. Once this component has completed rendering, this variable is removed (or reverted back to its previous value).
varStatus | String | No | Name of the EL variable used to reference the varStatus information. Once this component has completed rendering, this variable is removed (or reverted back to its previous value). The VarStatus provides contextual information about the state of the component to EL expressions. For components that iterate, varStatus also provides loop counter information. Please see the this component's documentation for the specific properties on the varStatus. The common properties on varStatus include: "model" - returns the CollectionModel for this component "index" - returns the zero based row index "hierarchicalIndex" - returns an array containing the row indices of heirarchy of the currrent row, for e.g. [0,1,2] Please use this attribute with caution since it requires moving currency to calculate the row index for each parent collection in the tree hierarchy. "hierarchicalLabel" - returns a string label representing the hierarchy of that row, for e.g. 1.1, 1.1.1. It should be noted that the labels are 1 based vs 0 based for rowIndex. Please use this attribute with caution since it requires moving currency to calculate the row index for each parent collection in the tree hierarchy.
visible | boolean | Yes | Default Value: true the visibility of the component. If it is "false", the component will be hidden on the client. Unlike "rendered", this does not affect the lifecycle on the server - the component may have its bindings executed, etc. - and the visibility of the component can be toggled on and off on the client, or toggled with PPR. When "rendered" is false, the component will not in any way be rendered, and cannot be made visible on the client. In most cases, use the "rendered" property instead of the "visible" property. Not supported on the following renderkits: org.apache.myfaces.trinidad.core