Panel - Dialog

Panel - Dialog

Display a modal or modeless dialog box. The dialog box content is part of the underlying window (and document).

Properties and All Attributes views

The Properties view for a component shows the most common set of attributes you can set on a component, and, depending on the component, you might also see options for adding controls, actions, or other components. To open the Properties view, click

Window | Show View | Properties.

These common attributes for the Panel - Dialog component display on the hx:panelDialog, Display options, and Items tabs in the Properties view. See the table for a list of attributes.

The All Attributes view shows a table of all the attributes you can set on a component, which includes those attributes you can access from the Properties view. To switch to the All Attributes view, click the
All Attributes icon in the upper right corner of the Properties view.

Table 1. Panel - Dialog attributes

Attribute name

Description

align

Specifies the alignment for the component:

left

center

right

relative

enableMoveKey

If omitted or true, dialogs that are movable can be moved via the keyboard by pressing Ctrl+Shift+Arrow-key whenever something in the dialog has focus. If false, the dialog cannot be moved via the keyboard.

for

Specifies the component to which the helper component is to be applied. The value should be the ID of the helped component.

initialFocus

If an identifier is provided, when the dialog is shown, focus is initially set to this field (and the content of the field selected if appropriate). If omitted or false, when the dialog is shown, focus is set to the first focusable field in the dialog.

initiallyShow

If true, when the page is loaded, the dialog is shown (the onshow handler is called, the primary window is disabled). If false, the dialog is not initially shown.

movable

Specifies whether the dialog can be moved by pressing the mouse cursor down on the title bar and dragging the dialog to a different location or using the keyboard equivalent. If false, the dialog cannot be moved.

Note: If a dialog is movable and has no title bar, it may only be moved using the keyboard accelerators.

onhide

JavaScript™ function to be run whenever the dialog is removed from display. The signature of the function is function(thisObj, thisEvent) where thisObj points to the dialog and thisEvent is the event that triggered the hide. If the dialog is hidden because an OK or CANCEL button (or the close button which is a cancel button) within the dialog is clicked, then thisEvent.dialogAction will be OK or
CANCEL depending on which button was clicked.

onshow

JavaScript function to be run whenever the dialog is displayed. The signature of the function is function(thisObj, thisEvent) where thisObj points to the dialog and thisEvent is the event that triggered the show.

relativeTo

If an ID is provided and align or valign is set to relative, the alignment is relative to the identified tag.

saveState

If true, when the dialog is displayed a copy of the values from all "form" fields within the dialog is made (for example, the values of input and textArea are saved). The saved values are available programmatically to event handlers written for the dialog and the values are used to restore the state of the values if cancel is clicked. If false, values are not saved (and clicking cancel will not restore values to their state when the dialog was first shown).

showTitleBar

If true (or omitted), a title bar is displayed at the top of the dialog box. If false, a title bar is not displayed.

showTitleCloseButton

If true (or omitted), a close button is displayed in the title bar (if the title bar is displayed). If false, a close button is not displayed.

Note: Clicking the close button is the same as clicking a cancel button.

title

Specifies the title text, shown in browser as a tooltip at runtime. Used by a browser as the alternative text of a component if the alternative text is not specified.

titleCloseButtonImage

The URL of the image to be used as the close button. (Can also be specified via CSS.)

type

The type of the dialog box. A modal dialog box blocks input (keyboard or mouse) to the window under the dialog ( fill out the dialog and press OK or CANCEL before you may do anything else in the page). A modeless dialog box does not block input to the window "under" the dialog.

Note: More than one modeless dialog box may be displayed at a time. If more than one modal dialog box is displayed at a time, the boxes stack on top of each other and only the top dialog is active.

valign

Specifies the vertical position of data within a cell:

top

middle

bottom

relative

Attribute name	Description
align	Specifies the alignment for the component: left center right relative
enableMoveKey	If omitted or true, dialogs that are movable can be moved via the keyboard by pressing Ctrl+Shift+Arrow-key whenever something in the dialog has focus. If false, the dialog cannot be moved via the keyboard.
for	Specifies the component to which the helper component is to be applied. The value should be the ID of the helped component.
initialFocus	If an identifier is provided, when the dialog is shown, focus is initially set to this field (and the content of the field selected if appropriate). If omitted or false, when the dialog is shown, focus is set to the first focusable field in the dialog.
initiallyShow	If true, when the page is loaded, the dialog is shown (the onshow handler is called, the primary window is disabled). If false, the dialog is not initially shown.
movable	Specifies whether the dialog can be moved by pressing the mouse cursor down on the title bar and dragging the dialog to a different location or using the keyboard equivalent. If false, the dialog cannot be moved. Note: If a dialog is movable and has no title bar, it may only be moved using the keyboard accelerators.
onhide	JavaScript™ function to be run whenever the dialog is removed from display. The signature of the function is function(thisObj, thisEvent) where thisObj points to the dialog and thisEvent is the event that triggered the hide. If the dialog is hidden because an OK or CANCEL button (or the close button which is a cancel button) within the dialog is clicked, then thisEvent.dialogAction will be OK or CANCEL depending on which button was clicked.
onshow	JavaScript function to be run whenever the dialog is displayed. The signature of the function is function(thisObj, thisEvent) where thisObj points to the dialog and thisEvent is the event that triggered the show.
relativeTo	If an ID is provided and align or valign is set to relative, the alignment is relative to the identified tag.
saveState	If true, when the dialog is displayed a copy of the values from all "form" fields within the dialog is made (for example, the values of input and textArea are saved). The saved values are available programmatically to event handlers written for the dialog and the values are used to restore the state of the values if cancel is clicked. If false, values are not saved (and clicking cancel will not restore values to their state when the dialog was first shown).
showTitleBar	If true (or omitted), a title bar is displayed at the top of the dialog box. If false, a title bar is not displayed.
showTitleCloseButton	If true (or omitted), a close button is displayed in the title bar (if the title bar is displayed). If false, a close button is not displayed. Note: Clicking the close button is the same as clicking a cancel button.
title	Specifies the title text, shown in browser as a tooltip at runtime. Used by a browser as the alternative text of a component if the alternative text is not specified.
titleCloseButtonImage	The URL of the image to be used as the close button. (Can also be specified via CSS.)
type	The type of the dialog box. A modal dialog box blocks input (keyboard or mouse) to the window under the dialog ( fill out the dialog and press OK or CANCEL before you may do anything else in the page). A modeless dialog box does not block input to the window "under" the dialog. Note: More than one modeless dialog box may be displayed at a time. If more than one modal dialog box is displayed at a time, the boxes stack on top of each other and only the top dialog is active.
valign	Specifies the vertical position of data within a cell: top middle bottom relative