Popup

extends ManagedObject

Popup Class is a helper class for controls that want themselves or parts of themselves or even other aggregated or composed controls or plain HTML content to popup on the screen like menues, dialogs, drop down boxes.

It allows the controls to be aligned to other dom elements using the sap.ui.core.Popup.Dock method. With it you can define where the popup should be docked. One can dock the popup to the top bottom left or right side of a dom ref.

In the case that the popup has no space to show itself in the view port of the current window it tries to open itself to the inverted direction.

Since 1.12.3 it is possible to add further DOM-element-ids that can get the focus when 'autoclose' is enabled. E.g. the RichTextEditor with running TinyMCE uses this method to be able to focus the Popups of the TinyMCE if the RichTextEditor runs within a Popup/Dialog etc.

To provide an additional DOM-element that can get the focus the following should be done: // create an object with the corresponding DOM-id var oObject = { id : "this_is_the_most_valuable_id_of_the_DOM_element" };

// add the event prefix for adding an element to the ID of the corresponding Popup var sEventId = "sap.ui.core.Popup.addFocusableContent-" + oPopup.getId();

// fire the event with the created event-id and the object with the DOM-id sap.ui.getCore().getEventBus().publish("sap.ui", sEventId, oObject);

Namespaces & Classes

DockEnumeration providing options for docking of some element to another.

Constructor Summary

new sap.ui.core.Popup(oContent, bModal?, bShadow?, bAutoClose?)Creates an instance of sap.ui.core.Popup that can be used to open controls as a Popup, visually appearing in front of other controls.

Event Summary

closed(oControlEvent)

opened(oControlEvent)

Events borrowed from class sap.ui.base.ManagedObject

formatError, modelContextChange, parseError, validationError, validationSuccess

Method Summary

sap.ui.core.Popup.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.ui.core.Popup with name sClassName and enriches it with the information contained in oClassInfo.

sap.ui.core.Popup.getLastZIndex()Returns the last z-index that has been handed out.

sap.ui.core.Popup.getMetadata()Returns a metadata object for class sap.ui.core.Popup.

sap.ui.core.Popup.getNextZIndex()Returns the next available z-index on top of the existing/previous popups.

sap.ui.core.Popup.setInitialZIndex(iInitialZIndex)Set an initial z-index that should be used by all Popup so all Popups start at least with the set z-index.

attachClosed(oData?, fnFunction, oListener?)Attaches event handler fnFunction to the closed event of this sap.ui.core.Popup.

attachOpened(oData?, fnFunction, oListener?)Attaches event handler fnFunction to the opened event of this sap.ui.core.Popup.

close(iDuration?)Closes the popup.

destroy()Closes and destroys this instance of Popup.

detachClosed(fnFunction, oListener)Detaches event handler fnFunction from the closed event of this sap.ui.core.Popup.

detachOpened(fnFunction, oListener)Detaches event handler fnFunction from the opened event of this sap.ui.core.Popup.

exit()When the Popup is being destroyed all corresponding references should be deleted as well to prevent any memory leaks.

fireClosed(mArguments?)Fires event closed to attached listeners.

fireOpened(mArguments?)Fires event opened to attached listeners.

getAutoClose()Determines whether the pop-up should auto closes or not.

getContent()Returns this Popup's content.

getFollowOf()This returns true/false if the default followOf method should be used.

getLastZIndex()Returns the last z-index that has been handed out.

getModal()Returns the value if a Popup is of modal type

getNextZIndex()Returns the next available z-index on top of the existing/previous popups.

getOpenState()Returns whether the Popup is currently open, closed, or transitioning between these states.

isOpen()Returns whether the Popup is currently open (this includes opening and closing animations).

open(iDuration?, my?, at?, of?, offset?, collision?, followOf?)Opens the popup's content at the position either specified here or beforehand via setPosition.

setAnimations(fnOpen, fnClose)Sets the animation functions to use for opening and closing the Popup.

setAutoClose(bAutoClose)Used to specify whether the Popup should close as soon as - for non-touch environment: the focus leaves - for touch environment: user clicks the area which is outside the popup itself, the dom elemnt which popup aligns to (except document), and one of the autoCloseAreas set by calling setAutoCloseAreas.

setAutoCloseAreas(aAutoCloseAreas)Sets the additional areas in the page that are considered part of the Popup when autoclose is enabled.

setContent(oContent)Sets the content this instance of the Popup should render.

setDurations(iOpenDuration, iCloseDuration)Sets the durations for opening and closing animations.

setFollowOf(followOf)This enabled/disables the Popup to follow its opening reference.

setInitialFocusId(sId)Sets the ID of the element that should be focused once the popup opens.

setModal(bModal, sModalCSSClass?)Used to specify whether the Popup should be modal.

setPosition(my, at, of?, offset?, collision?)Sets the position of the Popup (if you refer to a Control as anchor then do not use the DOMRef of the control which might change after re-renderings).

setShadow(bShowShadow)Determines whether the Popup should have a shadow (in supporting browsers).

Methods borrowed from class sap.ui.base.ManagedObject

addAggregation, addAssociation, applySettings, attachFormatError, attachModelContextChange, attachParseError, attachValidationError, attachValidationSuccess, bindAggregation, bindContext, bindObject, bindProperty, clone, destroyAggregation, detachFormatError, detachModelContextChange, detachParseError, detachValidationError, detachValidationSuccess, findAggregatedObjects, fireFormatError, fireModelContextChange, fireParseError, fireValidationError, fireValidationSuccess, getAggregation, getAssociation, getBinding, getBindingContext, getBindingInfo, getBindingPath, getEventingParent, getId, getMetadata, getModel, getObjectBinding, getOriginInfo, getParent, getProperty, hasModel, indexOfAggregation, insertAggregation, invalidate, isBound, isInvalidateSuppressed, isTreeBinding, propagateMessages, removeAggregation, removeAllAggregation, removeAllAssociation, removeAssociation, setAggregation, setAssociation, setBindingContext, setModel, setProperty, toString, unbindAggregation, unbindContext, unbindObject, unbindProperty, validateAggregation, validateProperty

Methods borrowed from class sap.ui.base.EventProvider

attachEvent, attachEventOnce, detachEvent, fireEvent, hasListeners

Methods borrowed from class sap.ui.base.Object

getInterface

Constructor Detail

new sap.ui.core.Popup(oContent, bModal?, bShadow?, bAutoClose?)

Creates an instance of sap.ui.core.Popup that can be used to open controls as a Popup, visually appearing in front of other controls.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject for a general description of the syntax of the settings object.

The supported settings are:

Events
- opened : fnListenerFunction or [fnListenerFunction, oListenerObject] or [oData, fnListenerFunction, oListenerObject]
- closed : fnListenerFunction or [fnListenerFunction, oListenerObject] or [oData, fnListenerFunction, oListenerObject]

In addition, all settings applicable to the base type sap.ui.base.ManagedObject can be used as well.

Parameters:

{sap.ui.core.Control\|sap.ui.core.Element\|DOMNode}	oContent	the content to render in the popup. In case of sap.ui.core.Element or DOMNode, the content must be present in the page (i.e. rendered). In case of sap.ui.core.Control, the Popup ensures rendering before opening.
{boolean}	bModal?	whether the popup should be opened in a modal way (i.e. with blocking background). Setting this to "true" effectively blocks all attempts to focus content outside the modal popup. A modal popup also automatically sets the focus back to whatever was focused when the popup opened.
{boolean}	bShadow?, Default: true	whether the popup should be have a visual shadow underneath (shadow appearance depends on active theme and browser support)
{boolean}	bAutoClose?	whether the popup should automatically close when the focus moves out of the popup

Event Detail

closed(oControlEvent)

Parameters:

{sap.ui.base.Event}	oControlEvent
{sap.ui.base.EventProvider}	oControlEvent.getSource
{object}	oControlEvent.getParameters

opened(oControlEvent)

Parameters:

{sap.ui.base.Event}	oControlEvent
{sap.ui.base.EventProvider}	oControlEvent.getSource
{object}	oControlEvent.getParameters

Method Detail

sap.ui.core.Popup.extend(sClassName, oClassInfo?, FNMetaImpl?): function

Creates a new subclass of class sap.ui.core.Popup with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.base.ManagedObject.extend.

Parameters:

{string}	sClassName	Name of the class being created
{object}	oClassInfo?	Object literal with information about the class
{function}	FNMetaImpl?	Constructor function for the metadata object; if not given, it defaults to `sap.ui.core.ElementMetadata`

Returns:

{function}

Created class / constructor function

sap.ui.core.Popup.getLastZIndex(): Number

Returns the last z-index that has been handed out. does not increase the internal z-index counter.

Returns:

{Number}

sap.ui.core.Popup.getMetadata(): sap.ui.base.Metadata

Returns a metadata object for class sap.ui.core.Popup.

Returns:

{sap.ui.base.Metadata}

Metadata object describing this class

sap.ui.core.Popup.getNextZIndex(): Number

Returns the next available z-index on top of the existing/previous popups. Each call increases the internal z-index counter and the returned z-index.

Returns:

{Number}

the next z-index on top of the Popup stack

sap.ui.core.Popup.setInitialZIndex(iInitialZIndex)

Set an initial z-index that should be used by all Popup so all Popups start at least with the set z-index. If the given z-index is lower than any current available z-index the highest z-index will be used.

Parameters:

{Number}

iInitialZIndex

is the initial z-index

Since:: 1.30.0

attachClosed(oData?, fnFunction, oListener?): sap.ui.core.Popup

Attaches event handler fnFunction to the closed event of this sap.ui.core.Popup.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.core.Popup itself.

Parameters:

{object}	oData?	An application-specific payload object that will be passed to the event handler along with the event object when firing the event
{function}	fnFunction	The function to be called when the event occurs
{object}	oListener?	Context object to call the event handler with. Defaults to this `sap.ui.core.Popup` itself

Returns:

{sap.ui.core.Popup} Reference to this in order to allow method chaining

attachOpened(oData?, fnFunction, oListener?): sap.ui.core.Popup

Attaches event handler fnFunction to the opened event of this sap.ui.core.Popup.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to this sap.ui.core.Popup itself.

Parameters:

{object}	oData?	An application-specific payload object that will be passed to the event handler along with the event object when firing the event
{function}	fnFunction	The function to be called when the event occurs
{object}	oListener?	Context object to call the event handler with. Defaults to this `sap.ui.core.Popup` itself

Returns:

{sap.ui.core.Popup} Reference to this in order to allow method chaining

close(iDuration?)

Closes the popup.

If the Popup is already closed or in the process of closing, calling this method does nothing. If the Popup is in the process of being opened and closed with a duration of 0, calling this method does nothing. If the Popup is in the process of being opened and closed with an animation duration, the animation will be chained, but this functionality is dangerous, may lead to inconsistent behavior and is thus not recommended and may even be removed.

Parameters:

{int}

iDuration?

animation duration in milliseconds; default is the jQuery preset "fast". For iDuration == 0 the closing happens synchronously without animation.

destroy()

Closes and destroys this instance of Popup. Does not destroy the hosted content.

detachClosed(fnFunction, oListener): sap.ui.core.Popup

Detaches event handler fnFunction from the closed event of this sap.ui.core.Popup.

The passed function and listener object must match the ones used for event registration.

Parameters:

{function}	fnFunction	The function to be called, when the event occurs
{object}	oListener	Context object on which the given function had to be called

Returns:

{sap.ui.core.Popup} Reference to this in order to allow method chaining

detachOpened(fnFunction, oListener): sap.ui.core.Popup

Detaches event handler fnFunction from the opened event of this sap.ui.core.Popup.

The passed function and listener object must match the ones used for event registration.

Parameters:

{function}	fnFunction	The function to be called, when the event occurs
{object}	oListener	Context object on which the given function had to be called

Returns:

{sap.ui.core.Popup} Reference to this in order to allow method chaining

exit()

When the Popup is being destroyed all corresponding references should be deleted as well to prevent any memory leaks.

fireClosed(mArguments?): sap.ui.core.Popup

Fires event closed to attached listeners.

Parameters:

{Map}

mArguments?

The arguments to pass along with the event

Returns:

{sap.ui.core.Popup} Reference to this in order to allow method chaining

fireOpened(mArguments?): sap.ui.core.Popup

Fires event opened to attached listeners.

Parameters:

{Map}

mArguments?

The arguments to pass along with the event

Returns:

{sap.ui.core.Popup} Reference to this in order to allow method chaining

getAutoClose(): boolean

Determines whether the pop-up should auto closes or not.

Since:: 1.16

Returns:

{boolean}

getContent(): sap.ui.core.Control|DOMRef

Returns this Popup's content.

Returns:

{sap.ui.core.Control|DOMRef}

the content that has been set previously (if any)

getFollowOf(): boolean|function

This returns true/false if the default followOf method should be used. If a separate followOf-handler was previously added the correspodning function is returned.

Since:: 1.13.0

Returns:

{boolean|function}

if a function was set it is returned otherwise a boolean value whether the follow of is activated

getLastZIndex(): Number

Returns the last z-index that has been handed out. does not increase the internal z-index counter.

Returns:

{Number}

getModal()

Returns the value if a Popup is of modal type

getNextZIndex(): Number

Returns the next available z-index on top of the existing/previous popups. Each call increases the internal z-index counter and the returned z-index.

Returns:

{Number}

the next z-index on top of the Popup stack

getOpenState(): sap.ui.core.OpenState

Returns whether the Popup is currently open, closed, or transitioning between these states.

Returns:

{sap.ui.core.OpenState}

whether the Popup is opened

isOpen(): boolean

Returns whether the Popup is currently open (this includes opening and closing animations).

Returns:

{boolean}

whether the Popup is opened (or currently being opened or closed)

open(iDuration?, my?, at?, of?, offset?, collision?, followOf?)

Opens the popup's content at the position either specified here or beforehand via setPosition. Content must be capable of being positioned via "position:absolute;" All parameters are optional (open() may be called without any parameters). iDuration may just be omitted, but if any of "at", "of", "offset", "collision" is given, also the preceding positioning parameters ("my", at",...) must be given.

If the Popup's OpenState is different from "CLOSED" (i.e. if the Popup is already open, opening or closing), the call is ignored.

Parameters:

{int}	iDuration?	animation duration in milliseconds; default is the jQuery preset "fast". For iDuration == 0 the opening happens synchronously without animation.
{sap.ui.core.Popup.Dock}	my?, Default: sap.ui.core.Popup.Dock.CenterCenter	the popup content's reference position for docking
{sap.ui.core.Popup.Dock}	at?, Default: sap.ui.core.Popup.Dock.CenterCenter	the "of" element's reference point for docking to
{string\|sap.ui.core.Element\|DOMRef\|jQuery\|jQuery.Event}	of?, Default: document	specifies the reference element to which the given content should dock to
{string}	offset?, Default: '0 0'	the offset relative to the docking point, specified as a string with space-separated pixel values (e.g. "0 10" to move the popup 10 pixels to the right). If the docking of both "my" and "at" are both RTL-sensitive ("begin" or "end"), this offset is automatically mirrored in the RTL case as well.
{string}	collision?, Default: 'flip'	defines how the position of an element should be adjusted in case it overflows the window in some direction.
{boolean}	followOf?	defines whether the popup should follow the dock reference when the reference changes its position.

setAnimations(fnOpen, fnClose): sap.ui.core.Popup

Sets the animation functions to use for opening and closing the Popup. Any null value will be ignored and not change the respective animation function. When called, the animation functions receive three parameters: - the jQuery object wrapping the DomRef of the popup - the requested animation duration - a function that MUST be called once the animation has completed

Parameters:

{function}	fnOpen
{function}	fnClose

Returns:

{sap.ui.core.Popup} this to allow method chaining

setAutoClose(bAutoClose): sap.ui.core.Popup

Used to specify whether the Popup should close as soon as - for non-touch environment: the focus leaves - for touch environment: user clicks the area which is outside the popup itself, the dom elemnt which popup aligns to (except document), and one of the autoCloseAreas set by calling setAutoCloseAreas.

Parameters:

{boolean}

bAutoClose

whether the Popup should close as soon as the focus leaves

Returns:

{sap.ui.core.Popup} this to allow method chaining

setAutoCloseAreas(aAutoCloseAreas): sap.ui.core.Popup

Sets the additional areas in the page that are considered part of the Popup when autoclose is enabled. - non-touch environment: if the focus leaves the Popup but immediately enters one of these areas, the Popup does NOT close. - touch environment: if user clicks one of these areas, the Popup does NOT close.

Parameters:

{DomRef[]}

aAutoCloseAreas

an array containing DOM elements considered part of the Popup; a value of null removes all previous areas

Returns:

{sap.ui.core.Popup} this to allow method chaining

setContent(oContent): sap.ui.core.Popup

Sets the content this instance of the Popup should render. Content must be capable of being positioned via position:absolute;

Parameters:

{sap.ui.core.Control|DOMRef}

oContent

Returns:

{sap.ui.core.Popup} this to allow method chaining

setDurations(iOpenDuration, iCloseDuration): sap.ui.core.Popup

Sets the durations for opening and closing animations. Null values and values < 0 are ignored. A duration of 0 means no animation. Default value is "fast" which is the jQuery constant for "200 ms".

Parameters:

{int}	iOpenDuration	in milliseconds
{int}	iCloseDuration	in milliseconds

Returns:

{sap.ui.core.Popup} this to allow method chaining

setFollowOf(followOf)

This enabled/disables the Popup to follow its opening reference. If the Popup is open and a followOf should be set the corresponding listener will be attached.

Parameters:

{boolean|function|null}

followOf

a boolean value enabled/disables the default followOf-Handler. Or an individual handler can be given. null deletes all followOf settings.

Since:: 1.13.0

setInitialFocusId(sId)

Sets the ID of the element that should be focused once the popup opens. If the given ID is the ID of an existing Control, this Control's focusDomRef will be focused instead, which may be an HTML element with a different ID (usually a sub-element inside the Control). If no existing element ID is supplied and the Popup is modal or auto-close, the Popup will instead focus the first focusable element.

Parameters:

{string}

sId

the ID of the DOM element to focus

setModal(bModal, sModalCSSClass?): sap.ui.core.Popup

Used to specify whether the Popup should be modal. A modal popup will put some fading "block layer" over the background and prevent attempts to put the focus outside/below the popup. Setting this while the popup is open will change "block layer" immediately.

Parameters:

{boolean}	bModal	whether the Popup is of modal type
{string}	sModalCSSClass?	a CSS class (or space-separated list of classes) that should be added to the block layer

Returns:

{sap.ui.core.Popup} this to allow method chaining

setPosition(my, at, of?, offset?, collision?): sap.ui.core.Popup

Sets the position of the Popup (if you refer to a Control as anchor then do not use the DOMRef of the control which might change after re-renderings). Optional parameters can only be omitted when all subsequent parameters are omitted as well.

Parameters:

{sap.ui.core.Popup.Dock}	my	specifies which point of the given Content should be aligned
{sap.ui.core.Popup.Dock\|Object}	at	specifies the point of the reference element to which the given Content should be aligned
{string\|sap.ui.core.Element\|DOMRef\|jQuery\|jQuery.Event}	of?, Default: document	specifies the reference element to which the given content should be aligned as specified in the other parameters
{string}	offset?, Default: '0 0'	the offset relative to the docking point, specified as a string with space-separated pixel values (e.g. "0 10" to move the popup 10 pixels to the right). If the docking of both "my" and "at" are both RTL-sensitive ("begin" or "end"), this offset is automatically mirrored in the RTL case as well.
{string}	collision?	defines how the position of an element should be adjusted in case it overflows the window in some direction. The valid values that refer to jQuery-UI's position parameters are "flip", "fit" and "none".

Returns:

{sap.ui.core.Popup} this to allow method chaining

setShadow(bShowShadow): sap.ui.core.Popup

Determines whether the Popup should have a shadow (in supporting browsers). This also affects a currently open popup.

Parameters:

{boolean}

bShowShadow

whether to show a shadow

Returns:

{sap.ui.core.Popup} this to allow method chaining