navigator - Navigator

Contains nodes that organize content in a hierarchy.

Category

Extension Library

Syntax

<xe:navigator attributes>content</xe:navigator>
Table 1. Essential properties
Property Description
id Defaults to navigator1, navigator2, and so on.
treeNodes Specifies nodes for the navigator.
expandable Specifies whether the item hierarchy can be collapsed and expanded. Defaults to true.
expandEffect Specifies the wipe effect for collapsing and expanding if desired.
expandLevel Specifies the level of expansion where 0 is the top node.
keepState Specifies whether to maintain the expansion state between requests.
onItemClick Use this event to get the value that the user selects with context.getSubmittedValue().
Table 2. All properties
Category Properties
accessibility ariaLabel
basics binding, expandable, expandEffect, expandLevel, id, keepState, loaded, rendered, rendererType, treeNodes
events onItemClick
styling disableTheme, style, styleClass, themeId

Examples

This navigator control has three 0-level nodes, each of which has three 1-level nodes. Clicking a leaf node displays its submitted value in a computed field.
<xp:label value="Submitted value: " id="label1"></xp:label>
<xp:text escape="true" id="computedField1"
	value="#{requestScope.svalue}" style="font-weight:bold">
</xp:text>
<xe:navigator id="navigator1">
	<xe:this.treeNodes>
		<xe:basicContainerNode label="Container one">
			<xe:this.children>
				<xe:basicLeafNode
					submitValue="Container one, choice one" label="Choice one">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container one, choice two" label="Choice two">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container one, choice three" label="Choice three">
				</xe:basicLeafNode>
			</xe:this.children>
		</xe:basicContainerNode>
		<xe:basicContainerNode label="Container two">
			<xe:this.children>
				<xe:basicLeafNode
					submitValue="Container two, choice one" label="Choice one">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container two, choice two" label="Choice two">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container two, choice three" label="Choice three">
				</xe:basicLeafNode>
			</xe:this.children>
		</xe:basicContainerNode>
		<xe:basicContainerNode label="Container three">
			<xe:this.children>
				<xe:basicLeafNode
					submitValue="Container three, choice one" label="Choice one">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container three, choice two" label="Choice two">
				</xe:basicLeafNode>
				<xe:basicLeafNode
					submitValue="Container three, choice three" label="Choice three">
				</xe:basicLeafNode>
			</xe:this.children>
		</xe:basicContainerNode>
	</xe:this.treeNodes>
	<xp:eventHandler event="onItemClick" submit="true"
		refreshMode="partial" refreshId="computedField1">
		<xe:this.action>
			<![CDATA[#{javascript:requestScope.svalue = context.getSubmittedValue()}]]>
		</xe:this.action>
	</xp:eventHandler>
</xe:navigator>