How to Configure Node Selection Action How to Configure a Hierarchy Viewer to Invoke a Popup Window

Using ADF Hierarchy Viewer Components 29-21 Figure 29–13 Runtime View of a Node with a Panel Card

29.7 Customizing the Appearance of a Hierarchy Viewer

You can customize the hierarchy viewer component size and appearance including adding images, configuring the display of the control panel, 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 Chapter 20, Customizing the Appearance Using Styles and Skins.

29.7.1 How to Adjust the Size of a Hierarchy Viewer

You can adjust the size of the hierarchy viewer component by setting values for a number of the hierarchy viewer component’s attributes using the Property Inspector. To adjust the size of a hierarchy viewer: 1. In the Structure window for the JSF page that contains the hierarchy viewer component, select the dvt:hierarchyViewer node. 2. In the Property Inspector, write the following values for the InlineStyle property: ■ width Write a value in percent or pixels px. The default value for width is 100. ■ height Write a value in percent or pixels px. The default value for height is 600px. The final value that you enter for the InlineStyle property must use this syntax: width:100;height:600px; 3. Save changes to the JSF page.

29.7.2 How to Include 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 29-22 Web User Interface Developers Guide for Oracle Application Development Framework 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} inlineStyle=width:64px;height:90px; af:panelGroupLayout For more information about the af:panelGroupLayout component, see Section 8.12.1, How to Use the panelGroupLayout Component.

29.7.3 How to Configure the Display of the Control Panel

You can configure the hierarchy viewer component so that the Control Panel described in Section 29.1.2, Hierarchy Viewer Elements and Terminology, acts 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 To configure the display of the Control Panel: 1. In the Structure window, right-click the dvt:hierarchyViewer node and choose Go to Properties .

2. Expand the Appearance section and select one of the following values from the

ControlPanelBehavior dropdown list: ■ hidden Select this value if you do not want the Control Panel to appear at runtime. ■ initCollapsed This is the default value. The Control Panel appears in a collapsed or hidden state at runtime. ■ initExpanded Select this value if you want the Control Panel to appear in an expanded or show state at runtime. 3. Save changes to the JSF page.

29.7.4 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 29–14 illustrates links and labels in a hierarchy viewer. Using ADF Hierarchy Viewer Components 29-23 Figure 29–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 29–15 illustrates links with a dashDot value set for the linkStype attribute. Figure 29–15 Links with dashDot Link Style To customize the display of links and labels: 1. In the Structure window, right-click the dvt:link node and choose Go to Properties . 2. In the Property Inspector, set the following attributes to customize the appearance of links between nodes in a hierarchy viewer as desired: ■ linkStyle - Sets the style of the link, for example, dotted or dashed line. ■ linkColor - Sets the color of the link. ■ linkWidth - Sets the width of the link, in pixels. ■ linkType - Sets the type of link, for example, direct line or smooth curved line fitted to what would have been a single right angle. ■ endConnectorType - Sets the style of the link connection end to none default or arrowOpen. 3. Also in the Property Inspector, enter text for the label associated with the link in the label property. Alternatively, specify an EL expression to stamp out the link label based on the child node. For example, write an EL expression similar to the following where the node var attribute refers to the child node associated with the link. label={node.relationship} 4. Optionally, also in the Property Inspector, use the rendered property to stamp the link for a particular relationship between nodes. The property accepts a boolean value so you can write an EL expression that evaluates to true or false to determine if the link represents the relationship. For example, assume that you want a link to display based on reporting relationship. You write an EL expression for the link component’s rendered property similar to the following EL