dialog - Dialog

Defines a modal dialog.

Category

Extension Library

Syntax

<xe:dialog attributes>content</xe:dialog>
Table 1. Essential properties
Property Description
id Defaults to dialog1, dialog2, and so on.
title Specifies the content of the title bar. (Also used for accessibility.)
Table 2. All properties
Category Properties
accessibility title, waiRole, waiState
basics binding, dir, errorMessage, extractContent, href, id, keepComponents, lang, loaded, loadingMessage, partialRefresh, preload, preventCache, refreshOnShow, rendered, rendererType
dojo dojoAttributes, dojoType, dragRestriction, parseOnLoad, tooltip
events afterContentLoad, beforeContentLoad, onBlur, onClick, onClose, onContentError, onDblClick, onDownloadEnd, onDownloadError, onDownloadStart, onFocus, onHide, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onShow, onUnload
styling disableTheme, style, styleClass, themeId

Usage

This control defines a dialog. To activate the dialog in a server-side script, execute the following code where dialog1 is the control identifier:
getComponent("dialog1").show()
To activate the dialog in a client-side script, execute the following code:
XSP.openDialog("#{id:dialog1}")
The control is modal meaning the user must dismiss it before proceeding.
By default, the control contains a cancel icon. However you may wish to include in the dialog "OK," "Cancel," "Submit," or other mechanisms that the user can click. To close the dialog from a client-side event, use the following code:
XSP.closeDialog('#{id:dialog1}')

See Modal dialogs for additional information.

Examples

Here are two buttons, one client-side and the other server-side, that activate a dialog. The dialog contains a computed field that displays the current time, and a dialog button bar. The button bar contains two buttons labeled "OK" and "Cancel" that simply close the dialog.
<xp:button value="Display time client-side" id="button4">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script><![CDATA[XSP.openDialog("#{id:dialog1}")]]></xp:this.script>
	</xp:eventHandler>
</xp:button>
<xp:button value="Display time server-side" id="button5">
	<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
		<xp:this.action><![CDATA[#{javascript:getComponent("dialog1").show()}]]></xp:this.action>
	</xp:eventHandler>
</xp:button>
<xe:dialog id="dialog1" title="Current Time">
	<xe:dialogContent id="dialogContent1">
		<xp:text escape="true" id="computedField1">
			<xp:this.value><![CDATA[#{javascript:var dt:NotesDateTime = session.createDateTime("Today");
			dt.setNow();
			return dt.getLocalTime();}]]></xp:this.value>
		</xp:text>
	</xe:dialogContent>
	<xe:dialogButtonBar id="dialogButtonBar1">
		<xp:button value="OK" id="button6">
			<xp:eventHandler event="onclick" submit="false">
				<xp:this.script><![CDATA[XSP.closeDialog('#{id:dialog1}')]]></xp:this.script>
			</xp:eventHandler>
		</xp:button>
		<xp:button value="Cancel" id="button7">
			<xp:eventHandler event="onclick" submit="false">
				<xp:this.script><![CDATA[XSP.closeDialog('#{id:dialog1}')]]></xp:this.script>
			</xp:eventHandler>
		</xp:button>
	</xe:dialogButtonBar>
</xe:dialog>