31 Using Hierarchy Viewer Components
hierarchyViewer
component to display data in hierarchy viewers using simple UI-first development. The chapter defines the data requirements, tag structure, and options for customizing the look and behavior of the components.If your application uses the Fusion technology stack, then you can also use data controls to create hierarchy viewers. For more information, see the "Creating Databound Hierarchy Viewer, Treemap, and Sunburst Components" chapter of Developing Fusion Web Applications with Oracle Application Development Framework.
This chapter includes the following sections:
About Hierarchy Viewer Components
ADF DVT Hierarchy viewer components are used to display hierarchical data, i.e. data that contains master-detail relationships within itself. For example, you could create a hierarchy viewer that renders an organization chart from a data collection that contains information about the relationships between employees in an organization.
Hierarchy viewers use a shape called a node to reference the data in a hierarchy. The shape and content of the nodes is configurable, as well as the visual layout of the nodes. Nodes can display multiple views in a panel card.
Hierarchy Viewer Use Cases and Examples
A hierarchy viewer visually displays hierarchical data and the master-detail relationships. Figure 31-1 shows a segment of a hierarchy viewer component at runtime that includes a control panel, a number of nodes, and links that connect the nodes. The nodes include a panel card that uses af:showDetailItem
elements to display multiple sets of data.
Figure 31-1 Hierarchy Viewer Component with Control Panel and Nodes

End User and Presentation Features
The ADF Data Visualization hierarchy viewer component provides a range of features for end users, such as panning and zooming and changing the layout view. It also provides a range of presentation features, such as changing node shape, lines, and labels.
Layouts
You can define the initial layout of the hierarchy viewer when you insert the component on the page from either the Data Controls panel to bind a data collection to the hierarchy viewer component or from the Components window to insert the component and bind to data later.
The layout of nodes in a hierarchy viewer is configurable and includes the following types of layouts:
-
Vertical top down
Figure 31-2 shows an example of a vertical top down layout.
Figure 31-2 Hierarchy Viewer Vertical Top Down Layout
-
Vertical bottom up
-
Horizontal left-to-right
Figure 31-3 shows an example of a horizontal left-to-right layout.
Figure 31-3 Hierarchy Viewer Horizontal Left-to-Right Layout
-
Horizontal right-to-left
-
Horizontal, direction depends on the locale
-
Tree, indented tree
Figure 31-4 shows an example of a tree layout.
Figure 31-4 Hierarchy Viewer Tree Layout
-
Radial, root node in center and successive child levels radiating outward from their parent nodes
-
Circle, root node in center and all leaf nodes arranged in concentric circle, with parent nodes arranged within the circle
Figure 31-5 shows an example of a circle layout.
Figure 31-5 Hierarchy Viewer Circle Layout
Navigation
At runtime, the node contains controls that allow users to navigate between nodes and to show or hide other nodes by default. The end user uses the controls on the node to switch dynamically between the content that the panel cards reference.
At runtime, if a user double-clicks another node that has a value specified for its setAnchorListener
property, that node becomes the anchor node.
At runtime, when a user moves the mouse over a node at zoom levels less than 76%, a hover window displaying node content at zoom level 100% is automatically displayed, allowing the user to see the full information regardless of zoom level. The controls on the hover window are active.
Panning
By default, panning in a hierarchy viewer is accomplished by clicking and dragging the component to reposition the view, or by using the panning control in the Control Panel.
You can disable the panning effect by setting the panning
property to none
.
Control Panel
The hierarchy viewer Control Panel provides tools for a user to manipulate the position and appearance of a hierarchy viewer component at runtime.
By default, it appears in a hidden state in the upper left-hand corner of the hierarchy viewer, as illustrated by Figure 31-6.
Figure 31-6 Control Panel in Hidden State

Users click the Hide or Show Control Panel button shown in Figure 31-6 to hide or expand the Control Panel. Figure 31-7 shows the expanded Control Panel.
Figure 31-7 Control Panel in Show State

Table 31-1 describes the functionality that the controls in the Control Panel provide to users. The Panel Selector is automatically enabled if a node in your hierarchy viewer component contains a panel card with af:showDetailItem
elements to display additional data. The Layout Selector appears automatically if the hierarchy viewer component uses one of the following layouts:
-
Vertical top down
-
Horizontal left to right
-
Tree
-
Radial
-
Circle
Table 31-1 Elements in the Control Panel
Control | Name | Description |
---|---|---|
![]() |
Zoom to Fit |
Allows user to zoom a hierarchy viewer component so that all nodes are visible within the viewport. |
![]() |
Zoom Control |
Allows user to zoom the hierarchy viewer component. |
![]() |
Hide or Show |
Hides or shows the Control Panel. |
![]() |
Panel Selector |
If you configured a panel card, displays the list of |
![]() |
Layout Selector |
Allows a choice of layouts. Users can change the layout of the hierarchy viewer component from the layout you defined to another one of the layout options presented by the component. |
Bi-directional Support
Hierarchy viewers support bi-directional text in node content, the search panel, and the display of search results. Bi-directional text is text containing text in both text directionalities, both right-to-left (RTL) and left-to-right (LTR). It generally involves text containing different types of alphabets such as Arabic or Hebrew scripts.
Hierarchy viewers also provide bi-directional support for flipping panel cards from one node view to the next and for swapping the locations of the Control Panel and Search Panel if those elements are defined.
State Management
Hierarchy viewers support state management for user actions such as node selection, expansion, and lateral navigation. When a user selects a node, expands a node or navigates to the left or right within the same parent to view the next set of nodes, that state is maintained if the user returns to a page after navigating away, as in a tabbed panel.
State management is supported through hierarchy viewer attributes including disclosedRowKeys
, selectedRowKeys
, and layout
.
Additional Functionality for Hierarchy Viewer Components
You may find it helpful to understand other ADF Faces features before you implement your hierarchy viewer component. Additionally, once you have added a hierarchy viewer component to your page, you may find that you need to add functionality such as validation and accessibility.
Following are links to other functionality that hierarchy viewer components can use:
-
Partial page rendering: You may want a hierarchy viewer to refresh to show new data based on an action taken on another component on the page. For more information, see Rerendering Partial Page Content.
-
Personalization: Users can change the way the hierarchy viewer displays at runtime. Those values will not be retained once the user leaves the page unless you configure your application to allow user customization. For information, see Allowing User Customization on JSF Pages.
-
Accessibility: You can make your hierarchy viewer components accessible. For more information, see Developing Accessible ADF Faces Pages.
-
Content Delivery: You can configure your hierarchy viewer to fetch a certain number of rows at a time from your data source using the
contentDelivery
attribute. For more information, see Content Delivery. -
Skins and styles: You can customize the appearance of hierarchy viewers using an ADF skin that you apply to the application or by applying CSS style properties directly using a style-related property (
styleClass
orinlineStyle
). For more information, see Customizing the Appearance Using Styles and Skins. -
Touch devices: When you know that your ADF Faces application will be run on touch devices, the best practice is to create pages specific for that device. For additional information, see Creating Web Applications for Touch Devices Using ADF Faces.
-
Automatic data binding: If your application uses the Fusion technology stack, then you can create automatically bound hierarchy viewers based on how your ADF Business Components are configured. For more information, see the "Creating Databound Hierarchy Viewer, Treemap, and Sunburst Components" chapter of Developing Fusion Web Applications with Oracle Application Development Framework.
Note:
If you know the UI components on your page will eventually use ADF data binding, but you need to develop the pages before the data controls are ready, then you should consider using placeholder data controls, rather than manually binding the components. Using placeholder data controls will provide the same declarative development experience as using developed data controls. For more information, see the "Designing a Page Using Placeholder Data Controls" chapter of Developing Fusion Web Applications with Oracle Application Development Framework.
Additionally, data visualization components share much of the same functionality, such as how data is delivered, automatic partial page rendering (PPR), image formats, and how data can be displayed and edited. For more information, see Common Functionality in Data Visualization Components.
Using Hierarchy Viewer Components
To use the Hierarchy Viewer component, add the hierarchy viewer to a page using the Component Palette window. Then define the data for the hierarchy viewer and complete the additional configuration in JDeveloper using the tag attributes in the Properties window. The hierarchy viewer component uses the same data model as the ADF Faces tree
component.
A hierarchy viewer component requires data collections where a master-detail relationship exists between one or more detail collections and a master detail collection. You can test whether it is possible to bind a data collection to a hierarchy viewer component by first binding it to an ADF Faces tree
component. If you can navigate the data collection using the ADF Faces tree
component, it should be possible to bind it to a hierarchy viewer component.
When you add a hierarchy viewer component to a JSF page, JDeveloper adds a tree binding to the page definition file for the JSF page. For information about how to populate nodes in a tree binding with data, see Using Trees to Display Master-Detail Objects in Developing Fusion Web Applications with Oracle Application Development Framework.
The data collections that you bind to nodes in a hierarchy viewer component must contain a recursive accessor if you want users to be able to navigate downward from the root node of the hierarchy viewer component. For information about navigating a hierarchy viewer component, see Configuring Navigation in a Hierarchy Viewer.
Configuring Hierarchy Viewer Components
JDeveloper generates the following elements in JSF pages when you drag and drop components from the Components window onto a JSF page or when you use the Create Hierarchy Viewer dialog to create a hierarchy viewer component as described in the "Creating Databound Hierarchy Viewer, Treemap, and Sunburst Components" chapter of Developing Fusion Web Applications with Oracle Application Development Framework.
-
Hierarchy viewer (
hierarchyViewer
): Wraps the node and link elements. -
Node (
node
): A node is a shape that references the data in a hierarchy, for example, employees in an organization or computers in a network. You configure the child elements of thenode
element to reference whatever data you want to display. Thenode
element supports the use of one or moref:facet
elements that display content at different zoom levels (100%, 75%, 50%, and 25%). Thef:facet
element supports the use of many ADF Faces components, such asaf:outputText
,af:image
, andaf:panelGroupLayout
, in addition to the ADF Data VisualizationpanelCard
component.At runtime, the node contains controls that allow users to navigate between nodes and to show or hide other nodes by default. For information about specifying node content and defining zoom levels, see How to Specify Node Content.
-
Link (
link
): You set values for the attributes of thelink
element to connect one node with another node. For information about how to customize the appearance of the link and add labels, see How to Configure the Display of Links and Labels. -
Panel card (
panelCard
): Provides a method to switch dynamically between multiple sets of content referenced by a node element using animation by, for example, horizontally sliding the content or flipping a node over.The
f:facet
tag for each zoom level supports the use of advt:panelCard
element that contains one or moreaf:showDetailItem
elements defining the content to be displayed at the specified zoom level. At runtime, the end user uses the controls on the node to switch dynamically between the content that theaf:showDetailItem
elements reference. For more information, see Using Panel Cards.Note:
Unlike the other elements, the
dvt:panelCard
element is not generated if you choose the default quick layout option when using the Components window to create a hierarchy viewer.
How to Add a Hierarchy Viewer to a Page
You use the Components window to add a hierarchy viewer to a JSF page. When you drag and drop a hierarchy viewer component onto the page, the Create Hierarchy Viewer dialog displays available categories of hierarchy viewer layouts, with descriptions, to provide visual assistance when creating hierarchy viewers.
Figure 31-8 shows the Create Hierarchy Viewer dialog for hierarchy viewers with the vertical top down layout type selected.
Figure 31-8 Create Hierarchy Viewer Dialog

Description of "Figure 31-8 Create Hierarchy Viewer Dialog"
Once you select the hierarchy viewer layout, and the hierarchy viewer is added to your page, you can use the Properties window to specify data values and configure additional display attributes for the hierarchy viewer. Alternatively, you can choose to bind the data during creation and use the Properties window to configure additional display attributes.
In the Properties window you can click the icon that appears when you hover over the property field to display a property description or edit options. Figure 31-9 shows the dropdown menu for a hierarchy viewer component Value
attribute.
Figure 31-9 Hierarchy Viewer Value Attribute Dropdown Menu

Description of "Figure 31-9 Hierarchy Viewer Value Attribute Dropdown Menu"
Note:
If your application uses the Fusion technology stack, then you can use data controls to create a hierarchy viewer and the binding will be done for you. For more information, see the "Creating Databound Hierarchy Viewer, Treemap, and Sunburst Components" section in Developing Fusion Web Applications with Oracle Application Development Framework
Before you begin:
It may be helpful to have an understanding of how hierarchy viewer attributes and hierarchy child tags can affect functionality. For more information, see Configuring Hierarchy Viewer Components.
You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Hierarchy Viewer Components.
You must complete the following tasks:
-
Create an application workspace as described in Creating an Application Workspace.
-
Create a view page as described in Creating a View Page.
To add a hierarchy viewer to a page:
What Happens When You Add a Hierarchy Viewer to a Page
When a hierarchy viewer component is inserted into a JSF page using the Create Hierarchy Viewer dialog, a set of child tags that support customization of the hierarchy viewer is automatically inserted. The hierarchy viewer component uses elements such as af:panelGroupLayout
, af:spacer
, and af:separator
to define how content is displayed in the nodes.
The example below shows the code generated when the component is created by insertion from the Components window. Code related to the hierarchy viewer elements is highlighted in the example.
<dvt:hierarchyViewer id="hv1" layout="hier_vert_top" styleClass="AFStretchWidth"> <dvt:link linkType="orthogonalRounded" id="l1"/> <dvt:node width="233" height="330" id="n1"> <f:facet name="zoom100"> <af:panelGroupLayout layout="vertical" styleClass="AFStretchWidth AFHVNodeStretchHeight AFHVNodePadding" id="pgl1"> <af:panelGroupLayout layout="horizontal" id="pgl2"> <af:panelGroupLayout styleClass="AFHVNodeImageSize" id="pgl3"> <af:image source="#{null}" styleClass="AFHVNodeImageSize" id="i1"/> </af:panelGroupLayout> <af:spacer width="5" height="5" id="s1"/> <af:panelGroupLayout layout="vertical" id="pgl4"> <af:outputText value=" attribute value1 styleClass="AFHVNodeTitleTextStyle" id="ot1"/> <af:outputText value=" attribute value2" styleClass="AFHVNodeSubtitleTextStyle" id="ot2"/> <af:outputText value=" attribute value3" styleClass="AFHVNodeTextStyle" id="ot3"/> </af:panelGroupLayout> </af:panelGroupLayout> <af:spacer height="5" id="s2"/> <af:separator id="s3"/> <af:spacer height="5" id="s4"/> <dvt:panelCard effect="slide_horz" styleClass="AFHVNodePadding" id="pc1"> <af:showDetailItem text="first group title " id="sdi1"> <af:panelFormLayout styleClass="AFStretchWidth AFHVNodeStretchHeight AFHVNodePadding" id="pfl1"> <af:panelLabelAndMessage label="attribute label4" styleClass="AFHVPanelCardLabelStyle" id="plam1"> <af:outputText value="attribute value4" styleClass="AFHVPanelCardTextStyle" id="ot4"/> </af:panelLabelAndMessage> <af:panelLabelAndMessage label="attribute label5" styleClass="AFHVPanelCardLabelStyle" id="plam2"> <af:outputText value="attribute value5" styleClass="AFHVPanelCardTextStyle" id="ot5"/> </af:panelLabelAndMessage> <af:panelLabelAndMessage label="attribute label6" styleClass="AFHVPanelCardLabelStyle" id="plam3"> <af:outputText value="attribute value6" styleClass="AFHVPanelCardTextStyle" id="ot6"/> </af:panelLabelAndMessage> </af:panelFormLayout> </af:showDetailItem> <af:showDetailItem text="second group title " id="sdi2"> <af:panelFormLayout styleClass="AFStretchWidth AFHVNodeStretchHeight AFHVNodePadding" id="pfl2"> <af:panelLabelAndMessage label="attribute label7" styleClass="AFHVPanelCardLabelStyle" id="plam4"> <af:outputText value="attribute value7" styleClass="AFHVPanelCardTextStyle" id="ot7"/> </af:panelLabelAndMessage> <af:panelLabelAndMessage label="attribute label8" styleClass="AFHVPanelCardLabelStyle" id="plam5"> <af:outputText value="attribute value8" styleClass="AFHVPanelCardTextStyle" id="ot8"/> </af:panelLabelAndMessage> <af:panelLabelAndMessage label="attribute label9" styleClass="AFHVPanelCardLabelStyle" id="plam6"> <af:outputText value="attribute value9" styleClass="AFHVPanelCardTextStyle" id="ot9"/> </af:panelLabelAndMessage> </af:panelFormLayout> </af:showDetailItem> </dvt:panelCard> </af:panelGroupLayout> </f:facet> </dvt:node> </dvt:hierarchyViewer>
What You May Need to Know About Hierarchy Viewer Rendering and Image Formats
By default, the hierarchy viewer component renders in HTML5. When HTML5 is not supported by the browser and Flash 10 or higher is available on the client, the hierarchy viewer is rendered in a Flash Player. If HTML5 and Flash10 or higher are not available, the hierarchy viewer is rendered in HTML4. While HTML4 rendering follows HTML5 and Flash rendering as closely as possible, there are some differences.
For the most part, hierarchy viewer display and features are supported with the following exceptions:
-
Isolate and restore nodes is not available.
-
Node shapes are limited to rectangular.
-
For links, the link end connector is not supported, link type is limited to orthogonal, and link style is limited to a solid line.
-
For the control panel, all panel cards cannot be switched, panning is limited to scroll bars, and zooming and zoom to fit is limited to four zoom facets.
-
Search is not supported.
-
Emailable page is not supported.
-
Node detail hover window is not supported.
Managing Nodes in a Hierarchy Viewer
A node is a shape that represents the individual elements in an ADF DVT hierarchy viewer component at runtime. Examples of individual elements in a hierarchy viewer component include an employee in an organization chart or a computer in a network diagram.
By default, each node in a hierarchy viewer component includes controls that allow users to do the following:
-
Navigate to other nodes in a hierarchy viewer component.
The top of each node contains a single Isolate or Restore button. The Isolate button allows the user to reduce the hierarchy temporarily to the chosen node and its displayed children. Users click Restore to return the hierarchy to the original view.
-
Show or hide child nodes of the currently selected node in a hierarchy viewer component.
The single Show or Hide button appears on the bottom of every node. When a user clicks one of these icons, the page displays or hides the node's children if they exist, and the component generates a
RowDisclosureEvent
event. You can register a customrowDisclosureListener
method to handle any processing in response to the event in the same way as anaf:tree
component. For more information, see What You May Need to Know About Programmatically Expanding and Collapsing Nodes.
If you use a panel card to display different sets of information for the node that the hierarchy viewer component references, controls at the bottom of the node allow the user to change the information set in the active node. For more information, see Using Panel Cards.
Figure 31-10 shows an example of a node with controls that allow an end user to isolate the node as the anchor node, show the child nodes, and change the node to show different sets of information in the active node. For information about how to configure the controls on a node, see How to Configure the Controls on a Node.
Figure 31-10 Hierarchy Viewer Node Controls

How to Specify Node Content
Although a node contains controls by default that allow you to navigate to a node and show or hide nodes, nodes do not by default include content unless you used a quick start layout when creating the hierarchy viewer component. You must define what content a node renders at runtime.
You can specify node content when you associate data bindings with the hierarchy viewer component as described in the "Creating Databound Hierarchy Viewer, Treemap, and Sunburst Components" chapter of Developing Fusion Web Applications with Oracle Application Development Framework. You can also specify content that is stored in a managed bean.
By default, a hierarchy viewer component that you create contains one node with one facet element that has a zoom level of 100%:
<f:facet name="zoom100"/>
You can insert three more instances of the facet element into the hierarchy viewer component with the following zoom levels:
-
25%:
zoom25
-
50%:
zoom50
-
75%:
zoom75
Use these zoom level definitions to improve readability of node content when the hierarchy viewer is zoomed out to display more nodes and less display room is available in each node. You can define a subset of the available data collection within one or more of the facet elements. For example, if you have a data collection with node attributes that reference data about a company department such as its name, location, and number, you can specify a facet element with a zoom level of 50% that references the node attribute for just the department's name and number.
At runtime, when a user moves the mouse over a node at any zoom level less than 76%, a hover window displaying node content at zoom level 100% is automatically displayed, allowing the user to see the full information regardless of zoom level. The controls on the hover window are active.
Each of the facet elements that you insert can be used to reference other components. You can use one or more of the following ADF Faces components when you define content for a node in a hierarchy viewer component. The node component's facet support the following components:
-
Layout components including:
af:panelFormLayout
,af:panelGroupLayout
,af:separator
,af:showDetailItem
, andaf:spacer
. For more information about using these components, see Organizing Content on Web Pages. -
Menu components including:
af:menu
andaf:menuItem
. For more information about these components, see Using Menus, Toolbars, and Toolboxes. -
Output components including:
af:outputFormatted
andaf:outputText
. For more information about these components, see Using Output Components. -
Message component
af:panelLabelAndMessage
. For more information about this component, see Displaying Tips, Messages, and Help. -
Navigation components including:
af:button
,af:link
, andaf:commandMenuItem
. For more information about these components, see Working with Navigation Components. -
Image component
af:image
. For information about how to use theaf:image
component, see Including Images in a Hierarchy Viewer. -
af:showPopupBehavior:
For information about how to use theaf:showPopupBehavior
component, see Configuring a Hierarchy Viewer to Invoke a Popup Window. -
Hierarchy viewer child component
dvt:panelCard
: For information about how to use thedvt:panelCard
component, see Using Panel Cards.
Note:
Unsupported components are flagged at design time.
By default, the hierarchy viewer component renders in HTML5. When HTML5 is not available, the hierarchy viewer will render in Flash or HTML4, and certain properties that you specify as node content may not be supported. For more information, see What You May Need to Know About Hierarchy Viewer Rendering and Image Formats.
Before you begin:
It may be helpful to have an understanding of how hierarchy viewer attributes and hierarchy viewer child tags can affect functionality. For more information, see Configuring Hierarchy Viewer Components.
You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Hierarchy Viewer Components.
You should already have a hierarchy viewer on your page. If you do not, follow the instructions in this chapter to create a hierarchy viewer. For more information, see How to Add a Hierarchy Viewer to a Page.
To add a node to a hierarchy viewer component:
How to Configure the Controls on a Node
The node component (node
) exposes a number of properties that allow you to determine if controls such as Restore, Isolate, Show, or Hide appear at runtime. It also exposes properties that determine the size and shape of the node at runtime.
Before you begin:
It may be helpful to have an understanding of how hierarchy viewer attributes and hierarchy child tags can affect functionality. For more information, see Configuring Hierarchy Viewer Components.
You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Hierarchy Viewer Components.
You should already have a hierarchy viewer node on your page. If you do not, follow the instructions in this chapter to add a node to a hierarchy viewer. For more information, see How to Specify Node Content.
To configure the controls on a node:
The hover detail window is automatically displayed when the user moves the mouse over the node at zoom levels less than 76%, reflecting the shape
attribute set for the node. A node with the shape
attribute roundedRect
, for example, will have a hover window with the same attribute, as shown in Figure 31-11.
You can disable the display of the detail window when hovering a node that is not at the 76-100% zoom level. For more information, see How to Disable the Hover Detail Window.
Figure 31-11 Hover Window in Hierarchy Viewer Node

Specifying a Node Definition for an Accessor
By default, you associate a node component with an accessor when you use the Create Hierarchy Viewer dialog to create a hierarchy viewer component, as described in the "Creating Databound Hierarchy Viewer, Treemap, and Sunburst Components" chapter of Developing Fusion Web Applications with Oracle Application Development Framework. The Create Hierarchy Viewer dialog sets the node component's type
property to a specific accessor.
You can configure a node component's type
property to use one or more specified accessors. Alternatively, you can configure a node component's rendered
property to use a node definition across accessors, as described in Associating a Node Definition with a Particular Set of Data Rows. When the hierarchy viewer component determines which node definition to use for a particular data row, it first checks for a match on the type
property:
-
If the
type
property matches and therendered
property value istrue
(default), the hierarchy viewer component uses the node definition. -
If  the
type
property does not match, the hierarchy viewer component uses the first node definition whoserendered
property evaluates totrue
. The result of evaluating therendered
property does not affect thetype
property.
Associating a Node Definition with a Particular Set of Data Rows
You can use a node component's rendered
property to associate the node with a particular set of data rows or with a single data row. The rendered
property accepts a boolean value so you can write an EL expression that evaluates to true
or false
to determine what data rows you associate with a node definition.
For example, assume that you want a node to display data based on job title. You write an EL expression for the node component's rendered
property similar to the following pseudo EL expression that evaluates to true
when a job title matches the value you specify (in this example, CEO
):
rendered="#{node.title == 'CEO'}"
When you use the node component's rendered
property in this way, you do not define a value for the node component's type
property.
Note:
The hierarchy viewer will use the first node definition whose rendered property evaluates to true. The order of the hierarchy viewer's node definitions is important.
How to Specify Ancestor Levels for an Anchor Node
The anchor node of a hierarchy viewer component is the root of the hierarchy returned by the tree binding. Depending on the use case, there can be multiple root nodes, for example, a hierarchy viewer component that renders an organization chart with one or more managers. When a hierarchy viewer component renders at runtime, the node that has focus is the anchor node. If a user double-clicks another node at runtime that has a value specified for its setAnchorListener
property, that node becomes the anchor node.
You can configure the hierarchy viewer to display one or more levels above the anchor node, the ancestor levels. For example, if you search for an employee in a company, you may wish to display the chain of management above the employee. Specify ancestor levels using the displayLevelsAncestor
property.
Before you begin:
It may be helpful to have an understanding of how hierarchy viewer attributes and hierarchy child tags can affect functionality. For more information, see Configuring Hierarchy Viewer Components.
You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Hierarchy Viewer Components.
You should already have a hierarchy viewer on your page. If you do not, follow the instructions in this chapter to add a hierarchy viewer to your page. For more information, see How to Add a Hierarchy Viewer to a Page.
To specify the number of ancestor levels for an anchor node:
Using Panel Cards
You can use the ADF panel card component in conjunction with the ADF DVT hierarchy viewer component to hold different sets of information for the nodes that the hierarchy viewer component references. The panel card component is an area inside the node element that can include one or more af:showDetailItem
elements.
Each of the af:showDetailItem
elements references a set of content. For example, a hierarchy viewer component that renders an organization chart would include a node for employees in the organization. This node could include a panel card component that references contact information using an af:showDetailItem
element and another af:showDetailItem
element that references salary information.
A panel card component displays the content referenced by one af:showDetailItem
element at runtime. The panel card component renders navigation buttons and other controls that allow the user to switch between the sets of data referenced by af:showDetailItem
elements. The controls that allow users to switch between different sets of data can be configured with optional transitional effects. For example, you can configure a panel card to horizontally slide between one set of data referenced by an af:showDetailItem
element to another set of data referenced by another af:showDetailItem
element.
How to Create a Panel Card
You can insert a panel card component into the JSF page that renders the hierarchy viewer component by using the context menu that appears when you select the Facet zoom element in the Structure window for the JSF page.
Before you begin:
It may be helpful to have an understanding of how hierarchy viewer attributes and hierarchy child tags can affect functionality. For more information, see Configuring Hierarchy Viewer Components.
You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Hierarchy Viewer Components.
You should already have a hierarchy viewer on your page. If you do not, follow the instructions in this chapter to create a hierarchy viewer. For more information, see How to Add a Hierarchy Viewer to a Page.
To create a panel card:
What Happens at Runtime: How the Panel Card Component Is Rendered
At runtime, a node appears and displays one panel card component. Users can click the navigation buttons at the bottom of the panel card to navigate to the next set of content referenced by one of the panel card's af:showDetailItem
child elements.
Figure 31-12 shows a node with a panel card component where two different af:showDetailItem
child elements reference different sets of information (Contact and Address). The controls in the example include arrows to slide through the panel cards as well as buttons to directly select the panel card to display. Tooltips display for both control options.
Figure 31-12 Runtime View of a Node with a Panel Card

Configuring Navigation in a Hierarchy Viewer
By default, an ADF DVT hierarchy viewer component has downward navigation configured for root and inner nodes. You can configure the hierarchy viewer component to enable upward navigation and to determine the number of nodes to appear when a user navigates between nodes on the same level.
For more information about node types, see Managing Nodes in a Hierarchy Viewer.
How to Configure Upward Navigation in a Hierarchy Viewer
If you want to configure upward navigation for a hierarchy view component, you configure a value for the hierarchy viewer component's navigateUpListener
property.
Before you begin:
It may be helpful to have an understanding of how hierarchy viewer attributes and hierarchy viewer child tags can affect functionality. For more information, see Configuring Hierarchy Viewer Components.
You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Hierarchy Viewer Components.
You should already have a hierarchy viewer on your page. If you do not, follow the instructions in this chapter to create a hierarchy viewer. For more information, see How to Add a Hierarchy Viewer to a Page.
To configure upward navigation for a hierarchy viewer component:
How to Configure Same-Level Navigation in a Hierarchy Viewer
Same-level navigation between the nodes in a hierarchy viewer component is enabled by default. You can configure the hierarchy viewer component to determine how many nodes to display at a time.
When you do this, controls appear that enable users to navigate to the following:
-
Left or right to view the next set of nodes
-
First or last set of nodes in the collection of available nodes
Before you begin:
It may be helpful to have an understanding of how hierarchy viewer attributes and hierarchy viewer child tags can affect functionality. For more information, see Configuring Hierarchy Viewer Components.
You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Hierarchy Viewer Components.
You should already have a hierarchy viewer on your page. If you do not, follow the instructions in this chapter to create a hierarchy viewer. For more information, see How to Add a Hierarchy Viewer to a Page.
To configure same-level navigation in a hierarchy viewer component:
What Happens When You Configure Same-Level Navigation in a Hierarchy Viewer
At runtime, the hierarchy viewer component renders the number of nodes that you specified as a value for the hierarchy viewer component's levelFetchSize
property. It also renders controls that allow users to do the following:
-
Navigate to the left or right to view the next set of nodes
-
Navigate to the first or last set of nodes in the collection of available nodes
Figure 31-13 shows a runtime example where levelFetchSize="3"
. When a user moves the mouse over the control, as shown in the circled area in Figure 31-13, the control that allows users to navigate to the last set of nodes appears.
Figure 31-13 Hierarchy Viewer Component with Same-Level Navigation

Customizing the Appearance of a Hierarchy Viewer
You can customize the ADF DVT hierarchy viewer component size and appearance including adding images, configuring the display of the control panel and hover detail window, and customizing links and labels.
You can change the appearance of your hierarchy viewer component by changing skins and component style attributes, as described in Customizing the Appearance Using Styles and Skins.
How to Adjust the Display Size and Styles of a Hierarchy Viewer
You can configure the hierarchy viewer's size and style using the inlineStyl
e and styleClass
attributes. Both attributes are available in the Style section in the Properties window for the dvt:hierarchyViewer
or dvt:node
component. Using these attributes, you can customize stylistic features such as fonts, borders, and background elements.
The styleClass
attribute is a CSS style class selector used to group a set of inline styles. The style classes can be defined using an EL Expression that evaluates to a style class at runtime. You can also specify an ADF public style class. For example, you can use AFHVNodeImageSize
to set the size of an image to fit inside a hierarchy viewer.
The inlineStyle
attribute is a list of CSS styles, separated by semicolons, that can set individual style attributes. For example, you can specify color:blue;font-style:italic
to change the color and font style of an af:outputText
component.
For additional information about using the styleClass
and inlineStyle
attributes, see Changing the Style Properties of a Component .
The page containing the hierarchy viewer may also impose limitations on the ability to change the size or style. For more information about page layouts, see Organizing Content on Web Pages.
Before you begin:
It may be helpful to have an understanding of how hierarchy viewer attributes and hierarchy viewer child tags can affect functionality. For more information, see Configuring Hierarchy Viewer Components.
You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Hierarchy Viewer Components.
You should already have a hierarchy viewer on your page. If you do not, follow the instructions in this chapter to create a hierarchy viewer. For more information, see How to Add a Hierarchy Viewer to a Page.
To adjust the size or style of a hierarchy viewer:
Including Images in a Hierarchy Viewer
You can configure a hierarchy viewer component to display images in the nodes of a hierarchy viewer component at runtime. This can be useful where, for example, you want pictures to appear in an organization chart.
Insert an af:image
component with the source attribute bound to the URL of the desired image. The following code example renders an image.
<af:panelGroupLayout>
<af:image source="/person_id=#{node.PersonId}"
shortDesc="Employee Image"
styleClass=AFHVNodeImageSize"/>
</af:panelGroupLayout>
For more information about the af:panelGroupLayout
component, see How to Use the panelGroupLayout Component.
How to Configure the Display of the Control Panel
Although you cannot configure the Control Panel to appear in another location, you can configure the hierarchy viewer component to act as follows when the hierarchy viewer component renders at runtime:
-
Appears in an expanded or show state
-
Appears in a collapsed or hidden state
-
Does not appear to users
Before you begin:
It may be helpful to have an understanding of how hierarchy viewer attributes and hierarchy viewer child tags can affect functionality. For more information, see Configuring Hierarchy Viewer Components.
You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Hierarchy Viewer Components.
You should already have a hierarchy viewer on your page. If you do not, follow the instructions in this chapter to create a hierarchy viewer. For more information, see How to Add a Hierarchy Viewer to a Page.
To configure the display of the Control Panel:
How to Configure the Display of Links and Labels
In a hierarchy viewer the relationships between nodes are represented by lines that link the nodes. The links can be configured to include labels.
Figure 31-14 illustrates links and labels in a hierarchy viewer.
Figure 31-14 Hierarchy Viewer Links and Labels

You can customize the appearance of links and labels by setting properties of the dvt:link
element in a hierarchy viewer. Figure 31-15 illustrates links with a dashDot
value set for the linkStyle
attribute.
Figure 31-15 Links with dashDot Link Style

Before you begin:
It may be helpful to have an understanding of how hierarchy viewer attributes and hierarchy viewer child tags can affect functionality. For more information, see Configuring Hierarchy Viewer Components.
You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Hierarchy Viewer Components.
You should already have a hierarchy viewer on your page. If you do not, follow the instructions in this chapter to create one. For more information, see How to Add a Hierarchy Viewer to a Page.
To customize the display of links and labels:
How to Disable the Hover Detail Window
By default, the hover window automatically displays when the zoom level is below 76%. If your hierarchy viewer uses popups, the hover window can interfere with the popup display. You can use the hierarchy viewer detailWindow
attribute to turn off the display of the hover window.
Before you begin:
It may be helpful to have an understanding of how hierarchy viewer attributes and hierarchy viewer child tags can affect functionality. For more information, see Configuring Hierarchy Viewer Components.
You may also find it helpful to understand functionality that can be added using other ADF faces features. For more information, see Additional Functionality for Hierarchy Viewer Components.
You should already have a hierarchy viewer on your page. If you do not, follow the instructions in this chapter to create a hierarchy viewer. For information, see How to Add a Hierarchy Viewer to a Page.
To disable the hierarchy viewer hover window:
What You May Need to Know About Skinning and Customizing the Appearance of a Hierarchy Viewer
Hierarchy viewers also support skinning to customize the color and font styles for the top level components as well as the nodes, buttons, and links. In addition, you can use skinning to define the styles for a hierarchy viewer when the user hovers the mouse over or selects a navigation button.
The example below shows the skinning key for a hierarchy viewer configured to show the border color of the panel card's navigation button in black when the user selects it.
af|dvt-panelCard::navigation-button:active { -tr-border-color:#000000; }
For the complete list of hierarchy viewer skinning keys, see the Oracle Fusion Middleware Data Visualization Tools Tag Reference for Oracle ADF Faces Skin Selectors. For additional information about customizing your application using skins, see Customizing the Appearance Using Styles and Skins.
Adding Interactivity to a Hierarchy Viewer Component
You can configure an ADF DVT hierarchy viewer component to invoke popup windows, display menus with functionality and data from other pages in your Oracle Fusion web application, or support drag and drop functionality.
How to Configure Node Selection Action
By default, clicking a hierarchy viewer node at runtime selects the node. You can customize this interaction by setting the clickBehavior
attribute on the dvt:node
component.
Valid values for this property include:
-
focus
: The node receives focus and is selected when clicked (default). -
expandCollapse
: Child node elements are either expanded or collapsed, depending on their current expansion state. -
isolateRestore
: The node is either isolated or restored, depending on its current state. -
none
: Clicking the node does nothing.
Before you begin:
It may be helpful to have an understanding of how hierarchy viewer attributes and hierarchy viewer child tags can affect functionality. For more information, see Configuring Hierarchy Viewer Components.
You may also find it helpful to understand functionality that can be added using other ADF faces features. For more information, see Additional Functionality for Hierarchy Viewer Components.
You should already have a hierarchy viewer on your page. If you do not, follow the instructions in this chapter to create a hierarchy viewer. For information, see How to Add a Hierarchy Viewer to a Page.
To configure node selection action:
- In the structure window, right-click the dvt:node node and choose Go to Properties.
- In the Properties window, expand the Behavior section and choose the value for ClickBehavior from the attribute's dropdown list.
- Save changes to the JSF page.
Configuring a Hierarchy Viewer to Invoke a Popup Window
You can invoke a popup window from a hierarchy viewer node by specifying values for the af:showPopupBehavior
tag and invoking it from a command component, for example, af:button
. You must nest the command component that invokes the popup inside an f:facet
element in a node of the hierarchy viewer component.
The triggerType
property of an af:showPopupBehavior
tag used in this scenario supports only the following values:
-
action
-
mouseHover
For example, Figure 31-16 shows a modal popup invoked from an HR Detail link in the node. The example below shows sample code for creating the popup.
Figure 31-16 Modal Popup in Hierarchy Viewer Node

<af:popup id="popupDialog" contentDelivery="lazyUncached" eventContext="launcher"
launcherVar="source">
<af:setPropertyListener from="#{source.currentRowData}"
to="#{myBean.selectedEmployee}" type="popupFetch"/>
<af:dialog title="Employee HR Detail">
<af:panelFormLayout>
<af:panelLabelAndMessage label="Name" >
<af:outputText value="#{myBean.selectedEmployee.firstName} #{myBean.selectedEmployee.lastName}"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="Offical Title" >
<af:outputText value="#{myBean.selectedEmployee.officalTitle}"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="HR Manager Id" >
<af:outputText value="#{myBean.selectedEmployee.hrMgrPersonId}"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="HR Rep Id" >
<af:outputText value="#{myBean.selectedEmployee.hrRepPersonId}"/>
</af:panelLabelAndMessage>
</af:panelFormLayout>
</af:dialog>
</af:popup>
The example below shows sample code for the invoking the popup from a hierarchy viewer component. For brevity, elements such as <af:panelGroupLayout>
, <af:spacer>
, and <af:separator>
are not included in the sample code.
<f:facet name="zoom100">
...
<dvt:panelCard effect="slideHorz"
...
<af:showDetailItem text="Contact "
...
<af:button text="Show HR Detail"
inlineStyle="font-size:14px;color:#383A47"
id = bu1>
<af:showPopupBehavior popupId="::popupDialog" triggerType="action"
align="endAfter" alignId="bu1" />
</af:button>
</showDetailItem>
</dvt:panelCard>
</f:facet>
For more information about using the af:showPopupBehavior
tag, see Declaratively Invoking a Popup.
Configuring Hierarchy Viewer Drag and Drop
Hierarchy Viewers support a variety of drag and drop scenarios between components.
Hierarchy viewers support the following drag and drop scenarios:
-
Drag and drop one or more nodes within a hierarchy viewer
-
Drag one or more nodes from a hierarchy viewer to another component
-
Drag one or more items from another component to a hierarchy viewer
Figure 31-17 shows a hierarchy viewer configured to allow drags and drops within itself. In this example, if you click a node, you can drag it to the background to make it another root in the hierarchy or drag it to another node to add it as a child of that node.
Figure 31-17 Hierarchy Viewer Showing a Node Drag

Figure 31-18 shows the result of a drag to the hierarchy viewer background. Nancy Green and her subordinates are now shown as a new tree in the hierarchy.
Figure 31-18 Hierarchy Viewer After Node Drag to Background

If you drag the node to another node, the dragged node and its children become the child of the targeted node. Figure 31-19 shows the result of the drag to the node containing the data for Nina Evans. Nancy Green and her subordinates are now shown as subordinates to Nina Evans.
Figure 31-19 Hierarchy Viewer After Node Drag to Another Node

Figure 31-20 shows an example of the same hierarchy viewer configured to allow drops to or drags from an af:outputFormatted
component. In this example, the user can drag one or more nodes to the drop text, and the text will change to indicate which node(s) the user dragged and which operation was performed. If the user drags from the drag text to a hierarchy viewer node or background, the text will change to indicate where the text was dragged and which operation was performed.
Figure 31-20 Hierarchy Viewer Configured for Drag and Drop to Another Component

Figure 31-21 shows a portion of the same hierarchy viewer after the user dragged the nodes containing the data for Nina Evans and James Marlow to the drop text.
Figure 31-21 Hierarchy Viewer After Multiple Node Drag

If the user drags from the drag text to a hierarchy viewer node or background, the text will change to indicate where the text was dragged and which operation was performed. Figure 31-22 shows a portion of the same hierarchy viewer after a user drags the text to the hierarchy viewer background.
Figure 31-22 Hierarchy Viewer After Text Drag to Hierarchy Viewer Background

How to Configure Hierarchy Viewer Drag and Drop
To add drag support to a hierarchy viewer, which will allow components or other hierarchy viewers to drag nodes from it, add the af:dragSource
tag to the hierarchy viewer and add the af:dropTarget
tag to the component receiving the drag. The component receiving the drag must include the org.apache.myfaces.trinidad.model.RowKeySet
data flavor as a child of the af:dropTarget
and also define a dropListener
method to respond to the drop event.
To add drop support to a hierarchy viewer, which will allow components or other hierarchy viewers to drag items to it, add the af:dropTarget
tag to the hierarchy viewer and include the data flavors that the hierarchy viewer will support. Add a dropListener
method to a managed bean that will respond to the drop event.
The following procedure shows how to set up a hierarchy as a simple drag source or drop target for the af:outputFormatted
component shown in Figure 31-20. For more detailed information about configuring drag and drop on ADF Faces or ADF Data Visualization components, see Adding Drag and Drop Functionality.
Before you begin:
It may be helpful to have an understanding of how hierarchy viewer attributes and hierarchy viewer child tags can affect functionality. For more information, see Configuring Hierarchy Viewer Components.
You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Hierarchy Viewer Components.
You will need to complete these tasks:
-
Add a hierarchy viewer to your page. For more information, see How to Add a Hierarchy Viewer to a Page.
-
Create any additional components needed to support the drag and drop.
For example, the page in Figure 31-20 uses an
af:panelGroupLayout
component containingaf:outputFormatted
andaf:panelList
components to provide instructions to the user. The page also uses anaf:panelSplitter
component to separate the drag and dropaf:outputFormatted
component text from the hierarchy viewer.The code example below shows the completed page for the additional components. The hierarchy viewer details are omitted.
<af:panelStretchLayout id="psl1" topHeight="auto" endWidth="auto"> <f:facet name="top"> <af:panelGroupLayout id="pgl2" layout="horizontal"> <af:spacer width="10px" id="s8"/> <af:panelGroupLayout id="pgl14"> <af:outputFormatted value="Hierarchy Viewer Drag and Drop Example" id="of4" inlineStyle="font-size:small; font-weight:bold;"/> <af:panelList id="pl1" inlineStyle="font-size:x-small;"> <af:outputFormatted value="Click and hold on a node for more than one-half second to initiate the drag. Use Ctrl+Click to select multiple nodes." id="of1" inlineStyle="font-size:x-small;"/> <af:outputFormatted value="Drag one or more nodes from the hierarchy viewer to the drop text. The text will change to show which node(s) you dragged and the operation performed." id="of2" inlineStyle="font-size:x-small;"/> <af:outputFormatted value="Drag the drag text to one of the hierarchy viewer nodes or background. The text will change to show where you dropped it and the operation performed." id="of3" inlineStyle="font-size:x-small;"/> </af:panelList> </af:panelGroupLayout> </af:panelGroupLayout> </f:facet> <f:facet name="center"> <af:panelSplitter id="ps1" orientation="horizontal" splitterPosition="125" positionedFromEnd="false" styleClass="AFStretchWidth"> <f:facet name="first"> <af:panelSplitter id="ps2" orientation="vertical"> <f:facet name="first"> <af:panelGroupLayout id="pgl3" layout="vertical"> <af:separator id="s1"/> <af:outputFormatted value="#{hvBean.dropText}" clientComponent="true" inlineStyle="font-size:small; font-weight:bold;" id="of5">
<af:dropTarget actions="COPY MOVE LINK"
dropListener="#{hvBean.fromDropListener}">
<af:dataFlavor
flavorClass="org.apache.myfaces.trinidad.model.RowKeySet"/>
</af:dropTarget>
</af:outputFormatted> <af:spacer width="200" id="s11"/> <af:separator id="s3"/> </af:panelGroupLayout> </f:facet> <f:facet name="second"> <af:panelGroupLayout id="pgl1"> <af:separator id="s12"/> <af:outputFormatted value="#{hvBean.dragText}" clientComponent="true" inlineStyle="font-size:small; font-weight:bold;" id="of6"><af:componentDragSource/>
</af:outputFormatted> <af:separator id="s10"/> </af:panelGroupLayout> </f:facet> </af:panelSplitter> </f:facet> <f:facet name="second"> <dvt:hierarchyViewer id="shv" styleClass="AFStretchWidth" controlPanelBehavior="initExpanded" var="node" detailWindow="none" value="#{XMLParser.employees}" contentDelivery="immediate" summary="HV Drag and Drop Sample" navigateUpListener="#{XMLParser.doNavigateUp}"><af:dragSource actions="COPY MOVE LINK" defaultAction="MOVE"/>
<af:dropTarget actions="COPY MOVE LINK"
dropListener="#{hvBean.toDropListener}"
><af:dataFlavor flavorClass="java.lang.Object"/>
</af:dropTarget>
<dvt:link linkType="orthogonalRounded" id="l1"/> <dvt:node width="233" height="330" setAnchorListener="#{XMLParser.doSetAnchor}" id="n1" showNavigateUp="#{node.topNode == false}" showExpandChildren="#{node.hasChildren}"> <f:facet name="zoom100">< remaining hierarchy viewer contents omitted >
</dvt:hierarchyViewer> </f:facet> </af:panelSplitter> </f:facet> </af:panelStretchLayout>For additional information about
af:outputFormatted
components, see Using Output Components. For help with theaf:panelGroupLayout
component or other page layout components, see Organizing Content on Web Pages.
To configure hierarchy viewer drag and drop:
-
To configure a hierarchy viewer as a drop target, in the Components window, from the Operations panel, drag a Drop Target and drop it as a child to the hierarchy viewer.
-
In the Insert Drop Target dialog, enter the name of the drop listener or use the dropdown menu to choose Edit to add a drop listener method to the hierarchy viewer's managed bean. Alternatively, use the dropdown menu to choose Expression Builder and enter an EL Expression for the drop listener.
For example, to add a method named
toDropListener()
on a managed bean namedhvBean
, choose Edit, select hvBean from the dropdown menu, and click New on the right of the Method field to create thetoDropListener()
method.The example below shows the sample drop listener and supporting methods for the hierarchy viewer displayed in Figure 31-20.
// imports needed by methods import java.util.Map; import oracle.adf.view.rich.dnd.DnDAction; import oracle.adf.view.rich.event.DropEvent; import oracle.adf.view.rich.datatransfer.DataFlavor; import oracle.adf.view.rich.datatransfer.Transferable; import org.apache.myfaces.trinidad.context.RequestContext; import org.apache.myfaces.trinidad.render.ClientRowKeyManager; import javax.faces.context.FacesContext; import oracle.adf.view.faces.bi.component.hierarchyViewer.UIHierarchyViewer; import javax.faces.component.UIComponent; // variables need by methods private String dragText = "Drag this text onto a node or the hierarchy viewer background"; // drop listener public DnDAction toDropListener(DropEvent event) { Transferable transferable = event.getTransferable(); DataFlavor<Object> dataFlavor = DataFlavor.getDataFlavor(Object.class); Object transferableObj = transferable.getData(dataFlavor); if(transferableObj == null) return DnDAction.NONE; // Build up the string that reports the drop information StringBuilder sb = new StringBuilder(); // Start with the proposed action sb.append("Drag Operation: "); DnDAction proposedAction = event.getProposedAction(); if(proposedAction == DnDAction.COPY) { sb.append("Copy<br>"); } else if(proposedAction == DnDAction.LINK) { sb.append("Link<br>"); } else if(proposedAction == DnDAction.MOVE) { sb.append("Move<br>"); } // Then add the rowKeys of the nodes that were dragged UIComponent dropComponent = event.getDropComponent(); Object dropSite = event.getDropSite(); if(dropSite instanceof Map) { String clientRowKey = (String) ((Map) dropSite).get("clientRowKey"); Object rowKey = getRowKey(dropComponent, clientRowKey); sb.append("Drop Site: "); if(rowKey != null) { sb.append("Node: "); sb.append(getLabel(dropComponent, rowKey)); } else { sb.append("Background"); } } // Update the output text this._dragText = sb.toString(); RequestContext.getCurrentInstance().addPartialTarget(event.getDragComponent()); return event.getProposedAction(); } private String getLabel(UIComponent component, Object rowKey) { if(component instanceof UIHierarchyViewer) { UIHierarchyViewer hv = (UIHierarchyViewer) component; Employee rowData = (Employee) hv.getRowData(rowKey); return rowData.getFirstName() + " " + rowData.getLastName(); } return null; } private Object getRowKey(UIComponent component, String clientRowKey) { if(component instanceof UIHierarchyViewer) { UIHierarchyViewer hv = (UIHierarchyViewer) component; ClientRowKeyManager crkm = hv.getClientRowKeyManager(); return crkm.getRowKey(FacesContext.getCurrentInstance(), component, clientRowKey); } return null; } public String getDragText() { return _dragText; }
Note:
This method references an
Employee
class that defines the attributes for the hierarchy viewer. If your hierarchy viewer uses a different class, substitute the name of that class instead.If you want to look at the source code for the
Employee
class used in this example, you can find the source code for it and other supporting classes in the ADF Faces Components Demo application. For more information about the demo application, see ADF Faces Components Demo Application . -
Click OK to enter the Insert Data Flavor dialog.
-
In the Insert Data Flavor dialog, enter the object that the drop target will accept. Alternatively, use the dropdown menu to navigate through the object hierarchies and choose the desired object.
For example, to allow the
af:outputFormatted
component to drag text to the hierarchy viewer, enterjava.lang.Object
in the Insert Data Flavor dialog. -
In the Structure window, right-click the af:dropTarget node and choose Go to Properties.
-
In the Properties window, in the Actions field, enter a list of the operations that the drop target will accept, separated by spaces. Allowable values are:
COPY
,MOVE
, orLINK
. If you do not specify a value, the drop target will useCOPY
.For example, enter the following in the Actions field to allow all operations:
COPY MOVE LINK
-
To use the hierarchy viewer as the drop target, do the following:
-
In the Components window, from the Operations panel, drag and drop a Drag Source as a child to the component that will be the source of the drag.
For example, drag and drop a Drag Source as a child to an
af:outputFormatted
component. -
In the Structure window, right-click the af:dragSource node and choose Go to Properties.
-
In the component's Value field, reference the public variable that you created in the drop listener for the hierarchy viewer in Step 2.
For example, for a drop listener named
toDropListener()
and a variable nameddropText
, enter the following in the component's Value field:#{hvBean.dropText}
-
-
To configure the hierarchy viewer as a drag source, in the Components window, from the Operations panel, drag and drop a Drag Source as a child to the hierarchy viewer.
-
In the Properties window, in the Actions field, enter a list of the operations that the drop target will accept, separated by spaces. Allowable values are:
COPY
,MOVE
, orLINK
.For example, enter the following in the Actions field to allow all operations:
COPY MOVE LINK
-
To specify the default action that the drag source will support, use the DefaultAction attribute's dropdown menu to choose
COPY
,MOVE
, orLINK
.The hierarchy viewer in the drag and drop example in Figure 31-20 uses
MOVE
as the default action. -
To make another component the drop target for drags from the hierarchy viewer, do the following:
-
In the Components window, from the Operations panel, drag and drop a Drop Target onto the component that will receive the drop.
For example, the page in the drag and drop example in Figure 31-20 contains an
af:outputFormatted
component that displays the results of the drop. -
In the Insert Drop Target dialog, enter the name of the drop listener or use the dropdown menu to choose Edit to add a drop listener method to the appropriate managed bean. Alternatively, use the dropdown menu to choose Expression Builder and enter an EL Expression for the drop listener.
For example, to add a method named
fromDropListener()
on a managed bean namedhvBean
, choose Edit, select hvBean from the dropdown menu, and click New on the right of the Method field to create thefromDropListener()
method.The example below shows the sample drop listener for the hierarchy viewer displayed in Figure 31-20. This example uses the same imports and helper methods used in, and they are not included here.
// Additional import needed for listener import org.apache.myfaces.trinidad.model.RowKeySet; // Variables needed by method private String dropText = "Drop a node here"; // Drop listener public DnDAction fromDropListener(DropEvent event) { Transferable transferable = event.getTransferable(); DataFlavor<RowKeySet> dataFlavor = DataFlavor.getDataFlavor(RowKeySet.class); RowKeySet rowKeySet = transferable.getData(dataFlavor); if(rowKeySet == null || rowKeySet.getSize() <= 0) return DnDAction.NONE; // Build up the string that reports the drop information StringBuilder sb = new StringBuilder(); // Start with the proposed action sb.append("Drag Operation: "); DnDAction proposedAction = event.getProposedAction(); if(proposedAction == DnDAction.COPY) { sb.append("Copy<br>"); } else if(proposedAction == DnDAction.LINK) { sb.append("Link<br>"); } else if(proposedAction == DnDAction.MOVE) { sb.append("Move<br>"); } // Then add the rowKeys of the nodes that were dragged sb.append("Nodes: "); UIComponent dragComponent = event.getDragComponent(); for(Object rowKey : rowKeySet) { sb.append(getLabel(dragComponent, rowKey)); sb.append(", "); } // Remove the trailing , sb.setLength(sb.length()-2); // Update the output text this.dropText = sb.toString(); RequestContext.getCurrentInstance().addPartialTarget(event.getDropComponent()); return event.getProposedAction(); }
-
Click OK to enter the Insert Data Flavor dialog.
-
In the Insert Data Flavor dialog, enter
org.apache.myfaces.trinidad.model.RowKeySet
.For example, to allow the
af:outputFormatted
component to drag text to the hierarchy viewer, enterorg.apache.myfaces.trinidad.model.RowKeySet
in the Insert Data Flavor dialog. -
In the Structure window, right-click the af:dropTarget node and choose Go to Properties.
-
In the Properties window, in the Actions field, enter a list of the operations that the drop target will accept, separated by spaces. Allowable values are:
COPY
,MOVE
, orLINK
. If you do not specify a value, the drop target will useCOPY
.For example, enter the following in the Actions field to allow all operations:
COPY MOVE LINK
-
In the component's value field, reference the public variable that you created in the drop listener for the treemap or sunburst in Step 2.
For example, for a drop listener named
fromDropListener()
and a variable nameddragText
, enter the following in the component's Value field:#{hvBean.dragText}
-
Adding Search to a Hierarchy Viewer
The ADF DVT hierarchy viewer component search functionality looks through the data structure of the hierarchy viewer and presents matches in a scrollable list. Users can double-click a search result to display the matching node as the anchor node in the hierarchy viewer. When enabled, a search panel is displayed in the upper right-hand corner of the hierarchy viewer, and results are displayed below the search panel.
Figure 31-23 shows a sample search panel.
Figure 31-23 Hierarchy Viewer Search Panel

Figure 31-24 shows sample search results.
Figure 31-24 Hierarchy Viewer Sample Search Results

How to Configure Searching in a Hierarchy Viewer
Add the dvt:search
tag as a child of the dvt:hierarchyViewer
tag to enable searching, and dvt:searchResults
as a child of dvt:search
to specify how to handle the results.
Search in a hierarchy viewer is based on the searchable attributes or columns of the data collection that is the basis of the hierarchy viewer data model. Using a query results collection defined in data controls in Oracle ADF, JDeveloper makes this a declarative task. For more information, see the "How to Create a Databound Search in a Hierarchy Viewer" section in Developing Fusion Web Applications with Oracle Application Development Framework.
Before you begin:
It may be helpful to have an understanding of how hierarchy viewer attributes and hierarchy viewer child tags can affect functionality. For more information, see Configuring Hierarchy Viewer Components.
You may also find it helpful to understand functionality that can be added using other ADF Faces features. For more information, see Additional Functionality for Hierarchy Viewer Components.
You should already have a hierarchy viewer on your page. If you do not, follow the instructions in this chapter to create a hierarchy viewer. For more information, see How to Add a Hierarchy Viewer to a Page.
To configure search in a hierarchy viewer:
-
In the Structure window, right-click the dvt:hierarchyViewer node and choose Insert Inside Hierarchy Viewer > Search.
-
In the Properties window, set the following attributes to configure the search functionality:
-
Value: Specify the variable to hold the search text.
-
ActionListener: Enter the listener called to perform the search.
-
InitialBehavior: Specify how the search panel is initially displayed. Valid values are
initCollapsed
for initially collapsed,initExpanded
for initially expanded, orhidden
for completely hidden from view.
-
-
Optionally, to configure a component that will use the
af:query
component to launch an advanced search outside of the hierarchy viewer component:-
In the Structure window, expand the dvt:search node.
-
Right-click the af:link node and choose Go to Properties.
-
In the Properties window, configure any desired properties for the af:link node.
For example, to change the text that displays
Advanced
for the advanced search, enter a value for the Text attribute. -
To add a popup that will display the advanced search options to the user, in the Structure window, right-click the af:link node and choose Insert Inside Link > ADF Faces > Show Popup Behavior.
-
To complete the popup configuration, add the
af:popup
component to your page and configure theaf:query
component to perform the search.For help with configuring popups, see Declaratively Invoking a Popup. For more information about the
query
component, see Using the query Component.
-
-
In the Structure window, right-click the dvt:search node and choose Insert Inside Search > Search Result.
-
In the Properties window, set the following attributes to configure the display of the search results:
-
Value: Specify the search results data model. This must be an instance of
oracle.adf.view.faces.bi.model.DataModel
. -
Var: Enter the name of the EL variable used to reference each element of the hierarchy viewer collection. Once this component has completed rendering, this variable is removed, or reverted back, to its previous value.
-
VarStatus: Enter the 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. -
ResultListener: Specify a reference to an action listener that will be called after a row in the search results is selected.
-
EmptyText: Specify the text to display when no results are returned.
-
FetchSize: Specify the number of result rows to fetch at a time.
-
-
In the Structure window, right-click the dvt:searchResults node and choose Inside Search Result > Set Property Listener.
-
In the Properties window, set the following attributes to map the search results node from the results model to the corresponding hierarchy viewer model:
-
From: Specify the source of the value, a constant or an EL expression.
-
To: Specify the target of the value.
-
Type: Choose
action
as the value.
-
-
In the Structure window, do the following to specify the components to stamp out the search results:
-
To wrap the output of the search results, right-click the f:facet-content node and choose Insert Inside Facet > ADF Faces > Panel Group Layout.
-
To display the search results, insert the ADF Faces output components inside the af:panelGroupLayout node to display the search results.
For example, to display output text, right-click the af:panelGroupLayout node and choose Insert Inside Panel Group Layout > Output Text.
The following output appears in the code after inserting and configuring two af:outputText elements:
<af:outputText value="#{resultRow.Lastname} " id="ot1" inlineStyle="color:blue;"/> <af:outputText value="#{resultRow.Firstname}" id="ot2"/>
Each stamped row references the current row using the
var
attribute of thedvt:searchResults
tag.
-
The example below shows sample code for configuring search in a hierarchy viewer.
<dvt:hierarchyViewer>
... hierarchy viewer details omitted
<dvt:search id="searchId" value="#{bindings.lastNameParam.inputValue}"
actionListener="#{bindings.ExecuteWithParams1.execute}">
<f:facet name="end">
<af:link text="Advanced" styleClass="AFHVAdvancedSearchLinkStyle" id="l2">
<af:showPopupBehavior popupId="::mypop" triggerType="action"/>
</af:link>
</f:facet>
<dvt:searchResults id="searchResultId"
emptyText="#{bindings.searchResult1.viewable ? 'No match.' : 'Access Denied.'}"
fetchSize="25"
value="#{bindings.searchResult1.collectionModel}"
resultListener="#{bindings.ExecuteWithParams.execute}"
var="resultRow">
<af:setPropertyListener from="#{resultRow.Id}"
to="#{bindings.employeeId.inputValue}"
type="action"/>
<f:facet name="content">
<af:panelGroupLayout layout="horizontal">
<af:outputText value="#{resultRow.Lastname} " id="ot1"
inlineStyle="color:blue;"/>
<af:outputText value="#{resultRow.Firstname}" id="ot2"/>
</af:panelGroupLayout>
</f:facet>
</dvt:searchResults>
</dvt:search>
</dvt:hierarchyViewer>
What You May Need to Know About Configuring Search in a Hierarchy Viewer
The search results stamp display in the size specified in its outermost container, the af:panelGroupLayout
. By default, this size is 100 x 30 pixels. If you need to adjust the size of the search results display, configure the InlineStyle
attribute of the af:panelGroupLayout
.
For more information, see How to Use the panelGroupLayout Component.