Google Apps Script

Class DialogBox

A form of popup that has a caption area at the top and can be dragged by the user. Unlike a PopupPanel, calls to setWidth(width) and setHeight(height) will set the width and height of the dialog box itself, even if a widget has not been added as yet.

In general it's not recommended to add this panel as a child of another widget or of the app as that will make it behave like any other inline panel and not act as a popup. Instead, create the popup and then use its show() and hide() methods to show and hide it. See the example below.

Internally, UiApp widgets are built on top of the Google Web Toolkit, and it can sometimes be helpful to look at the GWT documentation directly. You can find the DialogBox documentation here.

Here is an example showing how to use the dialog box widget:

 
function doGet() {
   var app = UiApp.createApplication();
   // Create a dialog box.
   var dialog = app.createDialogBox();
   // Set the position and dimensions.
   dialog.setPopupPosition(100, 100).setSize(500, 500);
   // Show the dialog. Note that it does not have to be "added" to the UiInstance.
   dialog.show();
   return app;
 }
 

Methods

MethodReturn typeBrief description
add(widget)DialogBoxAdd a widget to the DialogBox.
addCloseHandler(handler)DialogBoxAdd a handler for close events.
addStyleDependentName(styleName)DialogBoxSets the dependent style name of this DialogBox.
addStyleName(styleName)DialogBoxAdds a style name to this DialogBox.
clear()DialogBoxRemove all widgets from the DialogBox.
getId()StringReturns the id that has been assigned to this object.
getTag()StringGets the text tag of this DialogBox.
getType()StringGets the type of this object.
hide()DialogBoxHides the popup.
setAnimationEnabled(animationEnabled)DialogBoxSets whether opening and closing the DialogBox is animated.
setAutoHideEnabled(enabled)DialogBoxEnable or disable the autoHide feature.
setGlassEnabled(enabled)DialogBoxEnable or disable a "glass" pane.
setHTML(html)DialogBoxSets the HTML content of this DialogBox.
setHeight(height)DialogBoxSets the height of this DialogBox.
setId(id)DialogBoxSets the id of this DialogBox.
setModal(modal)DialogBoxSets whether this DialogBox is in "modal" mode.
setPixelSize(width, height)DialogBoxSets the size of this DialogBox in pixels.
setPopupPosition(left, top)DialogBoxSets the popup's position relative to the browser's client area.
setPreviewingAllNativeEvents(previewing)DialogBoxWhen enabled, the DialogBox will preview all native events, even if another popup was opened after this one.
setSize(width, height)DialogBoxSets the size of this DialogBox.
setStyleAttribute(attribute, value)DialogBoxSets one of this DialogBox's style attributes to a new value.
setStyleAttributes(attributes)DialogBoxSets this DialogBox's style attributes.
setStyleName(styleName)DialogBoxSets the style name of this DialogBox.
setStylePrimaryName(styleName)DialogBoxSets the primary style name of this DialogBox.
setTag(tag)DialogBoxSets the text tag of this DialogBox.
setText(text)DialogBoxSets the text inside the caption.
setTitle(title)DialogBoxSets the hover title of this DialogBox.
setVisible(visible)DialogBoxSets whether this DialogBox is visible.
setWidget(widget)DialogBoxSets the widget inside this DialogBox, removing anything previously there.
setWidth(width)DialogBoxSets the width of this DialogBox.
show()DialogBoxShows the popup.

Detailed documentation

add(widget)

Add a widget to the DialogBox.

Parameters

NameTypeDescription
widgetWidgetthe widget to add.

Return

DialogBox — the DialogBox itself, useful for chaining.


addCloseHandler(handler)

Add a handler for close events.

Note that you can have multiple handlers for the same event on the same widget. They will be called in the order that they were added to the widget, although ServerHandlers may appear to happen simultaneously.

The handler passes back some information to the server about what happened. This information can be accessed as follows:

 
function doGet() {
   var app = UiApp.createApplication();
   var item1 = app.createTreeItem("item1");
   item1.addItem(app.createTreeItem("item2"));
   var tree = app.createTree();
   tree.addItem(item1);
   var handler = app.createServerHandler("handlerFunction");
   tree.addCloseHandler(handler)
   app.add(tree);
   return app;
 }

 function handlerFunction(eventInfo) {
   var parameter = eventInfo.parameter;
   // the type of event, in this case "close".
   var eventType = parameter.eventType;
   // the id of the widget that fired this event.
   var source = parameter.source;
 }
 
In addition, the values of certain widgets can be sent up with the event as well as "callback elements." See the documentation of ServerHandler for more information.

Parameters

NameTypeDescription
handlerHandlerthe handler to execute when the event occurs. This can be a ClientHandler or a ServerHandler.

Return

DialogBox — the DialogBox itself, useful for chaining.


addStyleDependentName(styleName)

Sets the dependent style name of this DialogBox.

This is useful for debugging but is otherwise of minimal use since there is no way to use custom stylesheets in UiApp.

Parameters

NameTypeDescription
styleNameStringthe new style name.

Return

DialogBox — the DialogBox itself, useful for chaining.


addStyleName(styleName)

Adds a style name to this DialogBox.

This is useful for debugging but is otherwise of minimal use since there is no way to use custom stylesheets in UiApp.

Parameters

NameTypeDescription
styleNameStringthe new style name.

Return

DialogBox — the DialogBox itself, useful for chaining.


clear()

Remove all widgets from the DialogBox.

Return

DialogBox — the DialogBox itself, useful for chaining.


getId()

Returns the id that has been assigned to this object.

This can be used in conjunction with app.getElementById() to retrieve a reference to this object.

Return

String — the id that has been assigned to this object


getTag()

Gets the text tag of this DialogBox.

Return

String — the text tag.


getType()

Gets the type of this object.

Return

String — the object type


hide()

Hides the popup.

Return

DialogBox — the DialogBox itself, useful for chaining.


setAnimationEnabled(animationEnabled)

Sets whether opening and closing the DialogBox is animated.

Parameters

NameTypeDescription
animationEnabledBooleanwhether to animate opening and closing.

Return

DialogBox — the DialogBox itself, useful for chaining.


setAutoHideEnabled(enabled)

Enable or disable the autoHide feature.

When enabled, the DialogBox will be automatically hidden when the user clicks outside of it.

Parameters

NameTypeDescription
enabledBooleanwhether auto-hiding should be enabled.

Return

DialogBox — the DialogBox itself, useful for chaining.


setGlassEnabled(enabled)

Enable or disable a "glass" pane.

When enabled, the background will be blocked with a semi-transparent pane the next time it is shown. If the DialogBox is already visible, the glass will not be displayed until it is hidden and shown again.

Parameters

NameTypeDescription
enabledBooleanwhether the glass panel should be enabled.

Return

DialogBox — the DialogBox itself, useful for chaining.


setHTML(html)

Sets the HTML content of this DialogBox.

Parameters

NameTypeDescription
htmlStringthe new HTML

Return

DialogBox — the DialogBox itself, useful for chaining.


setHeight(height)

Sets the height of this DialogBox.

Parameters

NameTypeDescription
heightStringthe new height in any CSS unit such as "10px" or "50%".

Return

DialogBox — the DialogBox itself, useful for chaining.


setId(id)

Sets the id of this DialogBox.

Parameters

NameTypeDescription
idStringthe new id, which can be used to retrieve the DialogBox from app.getElementById(id).

Return

DialogBox — the DialogBox itself, useful for chaining.


setModal(modal)

Sets whether this DialogBox is in "modal" mode.

When the DialogBox is modal, keyboard or mouse events that do not target the PopupPanel or its children will be ignored.

Parameters

NameTypeDescription
modalBooleanwhether the DialogBox should be modal.

Return

DialogBox — the DialogBox itself, useful for chaining.


setPixelSize(width, height)

Sets the size of this DialogBox in pixels.

Parameters

NameTypeDescription
widthIntegerthe new width in pixels.
heightIntegerthe new height in pixels.

Return

DialogBox — the DialogBox itself, useful for chaining.


setPopupPosition(left, top)

Sets the popup's position relative to the browser's client area.

The popup's position may be set before calling show().

Parameters

NameTypeDescription
leftIntegerthe popup's left, in pixels.
topIntegerthe popup's top, in pixels.

Return

DialogBox — the DialogBox itself, useful for chaining.


setPreviewingAllNativeEvents(previewing)

When enabled, the DialogBox will preview all native events, even if another popup was opened after this one.

What this practically means is that if autoHide is enabled, enabling this feature will cause the DialogBox to autoHide even if another non-modal popup was shown after it. If this feature is disabled, the DialogBox will only autoHide if it was the last popup opened.

Parameters

NameTypeDescription
previewingBooleanwhether to preview all native events.

Return

DialogBox — the DialogBox itself, useful for chaining.


setSize(width, height)

Sets the size of this DialogBox.

Parameters

NameTypeDescription
widthStringthe new width in any CSS unit such as "10px" or "50%".
heightStringthe new height in any CSS unit such as "10px" or "50%".

Return

DialogBox — the DialogBox itself, useful for chaining.


setStyleAttribute(attribute, value)

Sets one of this DialogBox's style attributes to a new value. Valid attributes are listed here; the values for each attribute are the same as those available in CSS style sheets.

 
// Change the widget's background to black and text color to green.
 widget.setStyleAttribute("background", "black")
     .setStyleAttribute("color", "green");
 

Parameters

NameTypeDescription
attributeStringthe CSS attribute, in camel-case ("fontSize", not "font-size"), as listed here
valueStringthe CSS value

Return

DialogBox — the DialogBox itself, useful for chaining.


setStyleAttributes(attributes)

Sets this DialogBox's style attributes. This is a convenience method that is equivalent to calling setStyleAttribute with every key/value pair in the attributes object. Valid attributes are listed here; the values for each attribute are the same as those available in CSS style sheets.

 
// Change the widget's background to black and text color to green.
 widget.setStyleAttributes({background: "black", color: "green"});
 

Parameters

NameTypeDescription
attributesObjectan object of key/value pairs for the CSS attributes and values to set; valid attributes are listed here

Return

DialogBox — the DialogBox itself, useful for chaining.


setStyleName(styleName)

Sets the style name of this DialogBox.

This is useful for debugging but is otherwise of minimal use since there is no way to use custom stylesheets in UiApp.

Parameters

NameTypeDescription
styleNameStringthe new style name.

Return

DialogBox — the DialogBox itself, useful for chaining.


setStylePrimaryName(styleName)

Sets the primary style name of this DialogBox.

This is useful for debugging but is otherwise of minimal use since there is no way to use custom stylesheets in UiApp.

Parameters

NameTypeDescription
styleNameStringthe new style name.

Return

DialogBox — the DialogBox itself, useful for chaining.


setTag(tag)

Sets the text tag of this DialogBox.

Parameters

NameTypeDescription
tagStringthe new text tag, which can be anything you wish to store with the widget.

Return

DialogBox — the DialogBox itself, useful for chaining.


setText(text)

Sets the text inside the caption.

Parameters

NameTypeDescription
textStringthe new caption text.

Return

DialogBox — the DialogBox itself, useful for chaining.


setTitle(title)

Sets the hover title of this DialogBox.

Not all browsers will show this.

Parameters

NameTypeDescription
titleStringthe hover title.

Return

DialogBox — the DialogBox itself, useful for chaining.


setVisible(visible)

Sets whether this DialogBox is visible.

Parameters

NameTypeDescription
visibleBooleanwhether this DialogBox should be visible or not.

Return

DialogBox — the DialogBox itself, useful for chaining.


setWidget(widget)

Sets the widget inside this DialogBox, removing anything previously there.

Parameters

NameTypeDescription
widgetWidgetthe widget to put in this DialogBox.

Return

DialogBox — the DialogBox itself, useful for chaining.


setWidth(width)

Sets the width of this DialogBox.

Parameters

NameTypeDescription
widthStringthe new width in any CSS unit such as "10px" or "50%".

Return

DialogBox — the DialogBox itself, useful for chaining.


show()

Shows the popup.

Return

DialogBox — the DialogBox itself, useful for chaining.

Deprecated methods




Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.