Google Apps Script

Class PopupPanel

A panel that can "pop up" over other widgets. It overlays the browser's client area (and any previously-created popups).

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.

To make the popup stay at a fixed location rather than scrolling with the page, try setting the 'position', 'fixed' style on it with setStyleAttribute(attribute, value).

Note that this panel can contain at most one direct child widget. To add more children, make the child of this panel a different panel that can contain more than one child.

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 PopupPanel documentation here.

Here is an example showing how to use the popup panel widget:

 
function doGet() {
   var app = UiApp.createApplication();
   // Create a popup panel and set it to be modal.
   var popupPanel = app.createPopupPanel(false, true);
   // Add a button to the panel and set the dimensions and position.
   popupPanel.add(app.createButton()).setWidth("100px").setHeight("100px")
       .setPopupPosition(100, 100);
   // Show the panel. Note that it does not have to be "added" to the UiInstance.
   popupPanel.show();
   return app;
 }
 

Methods

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

Detailed documentation

add(widget)

Add a widget to the PopupPanel.

Parameters

NameTypeDescription
widgetWidgetthe widget to add.

Return

PopupPanel — the PopupPanel 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

PopupPanel — the PopupPanel itself, useful for chaining.


addStyleDependentName(styleName)

Sets the dependent style name of this PopupPanel.

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

PopupPanel — the PopupPanel itself, useful for chaining.


addStyleName(styleName)

Adds a style name to this PopupPanel.

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

PopupPanel — the PopupPanel itself, useful for chaining.


clear()

Remove all widgets from the PopupPanel.

Return

PopupPanel — the PopupPanel 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 PopupPanel.

Return

String — the text tag.


getType()

Gets the type of this object.

Return

String — the object type


hide()

Hides the popup.

Return

PopupPanel — the PopupPanel itself, useful for chaining.


setAnimationEnabled(animationEnabled)

Sets whether opening and closing the PopupPanel is animated.

Parameters

NameTypeDescription
animationEnabledBooleanwhether to animate opening and closing.

Return

PopupPanel — the PopupPanel itself, useful for chaining.


setAutoHideEnabled(enabled)

Enable or disable the autoHide feature.

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

Parameters

NameTypeDescription
enabledBooleanwhether auto-hiding should be enabled.

Return

PopupPanel — the PopupPanel 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 PopupPanel 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

PopupPanel — the PopupPanel itself, useful for chaining.


setHeight(height)

Sets the height of this PopupPanel.

Parameters

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

Return

PopupPanel — the PopupPanel itself, useful for chaining.


setId(id)

Sets the id of this PopupPanel.

Parameters

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

Return

PopupPanel — the PopupPanel itself, useful for chaining.


setModal(modal)

Sets whether this PopupPanel is in "modal" mode.

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

Parameters

NameTypeDescription
modalBooleanwhether the PopupPanel should be modal.

Return

PopupPanel — the PopupPanel itself, useful for chaining.


setPixelSize(width, height)

Sets the size of this PopupPanel in pixels.

Parameters

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

Return

PopupPanel — the PopupPanel 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

PopupPanel — the PopupPanel itself, useful for chaining.


setPreviewingAllNativeEvents(previewing)

When enabled, the PopupPanel 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 PopupPanel to autoHide even if another non-modal popup was shown after it. If this feature is disabled, the PopupPanel will only autoHide if it was the last popup opened.

Parameters

NameTypeDescription
previewingBooleanwhether to preview all native events.

Return

PopupPanel — the PopupPanel itself, useful for chaining.


setSize(width, height)

Sets the size of this PopupPanel.

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

PopupPanel — the PopupPanel itself, useful for chaining.


setStyleAttribute(attribute, value)

Sets one of this PopupPanel'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

PopupPanel — the PopupPanel itself, useful for chaining.


setStyleAttributes(attributes)

Sets this PopupPanel'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

PopupPanel — the PopupPanel itself, useful for chaining.


setStyleName(styleName)

Sets the style name of this PopupPanel.

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

PopupPanel — the PopupPanel itself, useful for chaining.


setStylePrimaryName(styleName)

Sets the primary style name of this PopupPanel.

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

PopupPanel — the PopupPanel itself, useful for chaining.


setTag(tag)

Sets the text tag of this PopupPanel.

Parameters

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

Return

PopupPanel — the PopupPanel itself, useful for chaining.


setTitle(title)

Sets the hover title of this PopupPanel.

Not all browsers will show this.

Parameters

NameTypeDescription
titleStringthe hover title.

Return

PopupPanel — the PopupPanel itself, useful for chaining.


setVisible(visible)

Sets whether this PopupPanel is visible.

Parameters

NameTypeDescription
visibleBooleanwhether this PopupPanel should be visible or not.

Return

PopupPanel — the PopupPanel itself, useful for chaining.


setWidget(widget)

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

Parameters

NameTypeDescription
widgetWidgetthe widget to put in this PopupPanel.

Return

PopupPanel — the PopupPanel itself, useful for chaining.


setWidth(width)

Sets the width of this PopupPanel.

Parameters

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

Return

PopupPanel — the PopupPanel itself, useful for chaining.


show()

Shows the popup.

Return

PopupPanel — the PopupPanel 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.