DialogWindow

Version: 9.0

The DialogWindow control shows a dialog that can be modal or not. The content can be internal or external.

You create internal content by adding SPEAK renderings to the placeholders that the DialogWindow control provides.

You specify external content by adding a Frame control to the DialogWindow control, and configuring this Frame control to display either a Sitecore dialog or a website.

Opening and closing a DialogWindow control

There are three events you can raise to open or close a DialogWindow control:

Event

Description

show

Shows (“opens”) the DialogWindow control

hide

Hides (“closes”) the DialogWindow control

toggle

Toggles the current state of the DialogWindow control

If you want to display the DialogWindow control immediately when a user opens the page that contains the DialogWindow control, you can call the show event from the page code in the containing page.

In many cases, you want to display a button that users can click to open the DialogWindow control. You can add this JavaScript to the Click property of a button:

RequestResponse
show:<ID of DialogWindow>, for example: show:CustomerLookupWindow

If the HeaderLess property is False (this is the default), the DialogWindow control shows a close button in the header. When a user clicks this “X,” the DialogWindow control closes.

If the EnableKeyboard property is True (this is the default), users can close the DialogWindow control by pressing Esc.

You can also use the hide event to close the DialogWindow control. For example, you can add this to the Click property of a button:

RequestResponse
hide:<ID of DialogWindow>, for example: hide:CustomerLookupWindow

The toggle event toggles the state of the DialogWindow control: if the DialogWindow control is not shown, the toggle event shows it; and if it is shown, the toggle event hides it.

Placeholders

  • The DialogWindow control has four placeholders:

  • Actions: place the most important buttons here. If there are many actions associated with the DialogWindow control, you can use an ActionControl control. If you put controls in this placeholder, the “X” that is normally shown is not visible and clickable. You must make sure that the user has at least one other way of closing the DialogWindow control. If you specify a title for the DialogWindow control in the Text property, SPEAK displays this title in the Actions placeholder.

  • Buttons: place secondary buttons here.

  • Navigation

  • Content: use this placeholder for the SPEAK renderings you need for the main part of the DialogWindow control.

If you have specified that the DialogWindow control is HeaderLess, it does not show the Action, Buttons, and Navigation placeholders.

If your DialogWindow control is external, you normally put a Frame control in the Content placeholder, and you do not use the other placeholders.

Properties

Name

Description

Default

Appearance

EnableKeyboard

If True, users can dismiss the dialog with the Esc key.

Note

If you set this to False, and you also do not have a header in the dialog box, you have to manually create a way for users to dismiss the dialog box.

True

HeaderLess

If True, the dialog box does not have a header with a title. In addition, the “X” that users can use to dismiss the dialog box is not displayed.

False

IsAnimated

If True, the dialog box slides in and out when it opens and closes.

False

IsModal

If True, the dialog box is modal.

True

Size

Specify the size of the dialog box. You can use these five values:

  • Small

  • Medium

  • Large

  • X-Large

  • MessageSpecific – use this value to create a DialogWindow control with a size that is appropriate for displaying a brief message.

Medium

Text

Specify a header text for the dialog box. The dialog box does not display this text if the HeaderLess property is True.

Do you have some feedback for us?

If you have suggestions for improving this article,