popupMenu - Pop-up Menu

Contains nodes that organize content as a pop-up menu.

Category

Extension Library

Syntax

<xe:popupMenu attributes>content</xe:popupMenu>
Table 1. Essential properties
Property Description
id Defaults to popupMenu1, popupMenu2, and so on.
treeNodes Specifies nodes for the pop-up menu.
onItemClick Use this event to get the value that the user selects with context.getSubmittedValue().
Table 2. All properties
Category Properties
basics binding, id, loaded, rendered, rendererType, treeNodes
events onItemClick
styling disableTheme, style, styleClass, themeId

Usage

You can use the following code in a client-side event to open a pop-up menu:
XSP.openMenu(thisEvent,#{javascript:getComponent('popupMenu1').getMenuCtor()})

This control is not tested against the latest accessibility standards. The recommended accessible path is the Combo Box control.

Examples

This pop-up menu control has three container nodes, each of which has three leaf nodes. Clicking a button opens the pop-up menu. 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>
<br></br>
<xp:button value="Pop me up" id="button1">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<![CDATA[XSP.openMenu(thisEvent,#{javascript:getComponent('popupMenu1').getMenuCtor()})]]>
			</xp:this.script>
	</xp:eventHandler>
</xp:button>
<xe:popupMenu id="popupMenu1">
	<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:popupMenu>