class sap.ui.core.Popup

Control sample: sap.ui.core.Popup
Visiblity: public
UX Guidelines:
Implements:
Available since: N/A
Module: sap/ui/core/Popup
Application Component: CA-UI5-COR

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 menus, 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 another DOM element.

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 or modal 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);

Since 1.75, DOM elements which have the attribute data-sap-ui-integration-popup-content are considered to be part of all opened popups. Those DOM elements can get the focus without causing the autoclose popup to be closed or the modal popup to take the focus back to itself. Additionally, a further DOM query selector can be provided by using sap.ui.core.Popup.addExternalContent to make the DOM elements which match the selector be considered as part of all opened popups. Please be aware that the Popup implementation only checks if a DOM element is marked with the attribute data-sap-ui-integration-popup-content. The actual attribute value is not checked. To prevent a DOM element from matching, you must remove the attribute itself. Setting the attribute to a falsy value is not enough in this case.


Constructor

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#constructor for a general description of the syntax of the settings object.

new sap.ui.core.Popup(oContent, bModal?, bShadow?, bAutoClose?)
Param Type Default Value Description
oContent sap.ui.core.Control sap.ui.core.Element Element

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.

bModal? boolean false

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.

bShadow? boolean true

whether the popup should be have a visual shadow underneath (shadow appearance depends on active theme and browser support)

bAutoClose? boolean false

whether the popup should automatically close when the focus moves out of the popup


Associations

Name Cardinality Type Description
childPopups 0..n sap.ui.core.Popup

Events Overview

Event Description
blockLayerStateChange

The 'blockLayerStateChange' event is fired only in case of using modal popups and under certain conditions:

 a. the first inserted modal popup in a popup stack opens
 b. the first inserted modal popup in a popup stack closes

closed
opened

blockLayerStateChange

The 'blockLayerStateChange' event is fired only in case of using modal popups and under certain conditions:

 a. the first inserted modal popup in a popup stack opens
 b. the first inserted modal popup in a popup stack closes

Param Type Description
oEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object
visible boolean

Indicates whether a blocking layer is currently visible visible: true or not visible: false

zIndex number

In case a blocking layer is visible, the zIndex property will represent the zIndex at which the blocking layer is displayed. In case of visible: false, zIndex represents the zIndex value of the last open popup.

closed

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object

opened

Param Type Description
oControlEvent sap.ui.base.Event
getSource sap.ui.base.EventProvider
getParameters object

Methods Overview

Method Description
sap.ui.core.Popup.addExternalContent

Adds a DOM query selector for determining additional external popup content.

When the browser focus is switched from the main popup content (which is set by calling #setContent) to another DOM element, this DOM element is tested against the selector to determine:

  • Autoclose popup: whether the popup should be kept open
  • Modal popup: whether the focus is allowed to be taken away

sap.ui.core.Popup.attachBlockLayerStateChange

Attaches event handler fnFunction to the static blockLayerStateChange event.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to a dummy event provider object.

The event gets triggered in case of modal popups when the first of multiple popups opens and closes.

attachClosed

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.

attachOpened

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.

close

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.

destroy

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

sap.ui.core.Popup.detachBlockLayerStateChange

Removes a previously attached event handler fnFunction from the static blockLayerStateChange event.

The event gets triggered in case of modal popups when the first of multiple popups opens and closes.

detachClosed

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.

detachOpened

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.

exit

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

sap.ui.core.Popup.extend

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.

fireClosed

Fires event closed to attached listeners.

fireOpened

Fires event opened to attached listeners.

getAutoClose

Determines whether the Popup should auto closes or not.

getContent

Returns this Popup's content.

getFollowOf

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

getLastZIndex

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

sap.ui.core.Popup.getLastZIndex

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

sap.ui.core.Popup.getMetadata

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

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. Each call increases the internal z-index counter and the returned z-index.

sap.ui.core.Popup.getNextZIndex

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.

getOpenState

Returns whether the Popup is currently open, closed, or in a transition between these states.

sap.ui.core.Popup.getWithinArea

Returns the value that has been set by sap.ui.core.Popup.setWithinArea. When a DOM element that represents the within area is needed, use sap.ui.core.Popup.getWithinAreaDomRef instead.

If no within area is specified, undefined is returned.

sap.ui.core.Popup.getWithinAreaDomRef

Returns the actual DOM element of the value that has been set by sap.ui.core.Popup.setWithinArea. It returns window by default when no within area has been set using sap.ui.core.Popup.setWithinArea.

When an sap.ui.core.Element is set as a within area, document.documentElement is returned before element is rendered.

isOpen

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

sap.ui.core.Popup.markExternalContentAsNotSelectable

Marks the external content as not user selectable

sap.ui.core.Popup.markExternalContentAsSelectable

Marks the external content as user selectable

open

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.

sap.ui.core.Popup.removeExternalContent

Removes a DOM query selector which has been added by sap.ui.core.Popup.addExternalContent.

The default query selector [data-sap-ui-integration-popup-content] can't be deleted.

setAnimations

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

setAutoClose

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 element which the popup aligns to (except document), and any extra popup content set by calling setExtraContent.

setAutoCloseAreas
Since 1.75 please use {@link #setExtraContent} instead.
setContent

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

setDurations

Sets the durations for opening and closing animations. Null values and values < 0 are ignored. A duration of 0 means no animation.

setExtraContent

Sets additional content that are considered part of the Popup.

A popup with autoclose #setAutoClose enabled allows the focus to be moved into the extra content without closing itself.

A popup with modal #setModal enabled allows the focus to be shifted into the extra content without taking it back to the previous focused element in the popup.

setFollowOf

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.

setInitialFocusId

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.

sap.ui.core.Popup.setInitialZIndex

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.

setModal

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.

setPosition

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.

setShadow

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

sap.ui.core.Popup.setWithinArea

Sets a within area that is used as the area available for positioning the popup. It mainly affects the collision detection. The position of the popup can then be further adapted depending on the "collision" parameter that is set with sap.ui.core.Popup#open or sap.ui.core.Popup#setPosition when the popup overflows the within area.

If no within area is specified, all popups use the window as within area.

When an sap.ui.core.Element is set as the within area, make sure that the control is rendered when the popup opens, otherwise the window is used as the within area.

sap.ui.core.Popup.addExternalContent

Adds a DOM query selector for determining additional external popup content.

When the browser focus is switched from the main popup content (which is set by calling #setContent) to another DOM element, this DOM element is tested against the selector to determine:

Param Type DefaultValue Description
vSelectors string[] string

One query selector or an array of query selectors to be added

bMarkAsSelectable boolean false

Whether the external content should be marked instantly as user selectable. If the external content which matches the given or default selector is added after a modal popup is opened, this parameter needs to be set to true to make the external content user selectable.

sap.ui.core.Popup.attachBlockLayerStateChange

Attaches event handler fnFunction to the static blockLayerStateChange event.

When called, the context of the event handler (its this) will be bound to oListener if specified, otherwise it will be bound to a dummy event provider object.

The event gets triggered in case of modal popups when the first of multiple popups opens and closes.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function

The function to be called, when the event occurs

oListener object

Context object to call the event handler with. Defaults to a dummy event provider object

attachClosed

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.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.ui.core.Popup itself

attachOpened

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.

Param Type DefaultValue Description
oData object

An application-specific payload object that will be passed to the event handler along with the event object when firing the event

fnFunction function(sap.ui.base.Event) : void

The function to be called when the event occurs

oListener object

Context object to call the event handler with. Defaults to this sap.ui.core.Popup itself

close

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.

Param Type DefaultValue Description
iDuration int jQuery.fx.speed.fast

Animation duration in milliseconds. For iDuration == 0 the closing happens synchronously without animation.

destroy

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

sap.ui.core.Popup.detachBlockLayerStateChange

Removes a previously attached event handler fnFunction from the static blockLayerStateChange event.

The event gets triggered in case of modal popups when the first of multiple popups opens and closes.

Param Type DefaultValue Description
fnFunction function

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

detachClosed

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.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

detachOpened

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.

Param Type DefaultValue Description
fnFunction function(sap.ui.base.Event) : void

The function to be called, when the event occurs

oListener object

Context object on which the given function had to be called

exit

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

sap.ui.core.Popup.extend

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.

Param Type DefaultValue Description
sClassName string

Name of the class being created

oClassInfo object

Object literal with information about the class

FNMetaImpl function

Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class

fireClosed

Fires event closed to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

fireOpened

Fires event opened to attached listeners.

Param Type DefaultValue Description
mParameters object

Parameters to pass along with the event

getAutoClose

Determines whether the Popup should auto closes or not.

getContent

Returns this Popup's content.

getFollowOf

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

getLastZIndex

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

sap.ui.core.Popup.getLastZIndex

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

sap.ui.core.Popup.getMetadata

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

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. Each call increases the internal z-index counter and the returned z-index.

sap.ui.core.Popup.getNextZIndex

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.

getOpenState

Returns whether the Popup is currently open, closed, or in a transition between these states.

sap.ui.core.Popup.getWithinArea

Returns the value that has been set by sap.ui.core.Popup.setWithinArea. When a DOM element that represents the within area is needed, use sap.ui.core.Popup.getWithinAreaDomRef instead.

If no within area is specified, undefined is returned.

sap.ui.core.Popup.getWithinAreaDomRef

Returns the actual DOM element of the value that has been set by sap.ui.core.Popup.setWithinArea. It returns window by default when no within area has been set using sap.ui.core.Popup.setWithinArea.

When an sap.ui.core.Element is set as a within area, document.documentElement is returned before element is rendered.

isOpen

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

sap.ui.core.Popup.markExternalContentAsNotSelectable

Marks the external content as not user selectable

sap.ui.core.Popup.markExternalContentAsSelectable

Marks the external content as user selectable

open

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.

Param Type DefaultValue Description
iDuration int jQuery.fx.speed.fast

animation duration in milliseconds. For iDuration == 0 the opening happens synchronously without animation.

my sap.ui.core.Popup.Dock sap.ui.core.Popup.Dock.CenterCenter

the popup content's reference position for docking

at sap.ui.core.Popup.Dock sap.ui.core.Popup.Dock.CenterCenter

the "of" element's reference point for docking to

of string sap.ui.core.Element Element jQuery jQuery.Event document

specifies the reference element to which the given content should dock to

offset string '0 0'

the offset relative to the docking point, specified as a string with space-separated pixel values (e.g. "10 0" 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.

collision string 'flip'

defines how the position of an element should be adjusted in case it overflows the within area in some direction.

within string sap.ui.core.Element Element Window Window

defines the area the popup should be placed in. This affects the collision detection.

followOf boolean false

defines whether the popup should follow the dock reference when the reference changes its position.

sap.ui.core.Popup.removeExternalContent

Removes a DOM query selector which has been added by sap.ui.core.Popup.addExternalContent.

The default query selector [data-sap-ui-integration-popup-content] can't be deleted.

Param Type DefaultValue Description
vSelectors string[] string

One query selector or an array of query selectors to be deleted

bMarkAsNotSelectable boolean false

Whether the external content should be marked instantly as not user selectable. If the selector is removed while a modal popup is still open, this parameter needs to be set to true to make the external content not user selectable.

setAnimations

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

Param Type DefaultValue Description
fnOpen function

The function which executes the custom opening animation

fnClose function

The function which executes the custom closing animation

setAutoClose

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 element which the popup aligns to (except document), and any extra popup content set by calling setExtraContent.

Param Type DefaultValue Description
bAutoClose boolean

whether the Popup should close as soon as the focus leaves

setAutoCloseAreas

Since 1.75 please use {@link #setExtraContent} instead.

setContent

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

Param Type DefaultValue Description
oContent sap.ui.core.Control Element

The content of the popup

setDurations

Sets the durations for opening and closing animations. Null values and values < 0 are ignored. A duration of 0 means no animation.

Param Type DefaultValue Description
iOpenDuration int jQuery.fx.speed.fast

in milliseconds

iCloseDuration int jQuery.fx.speed.fast

in milliseconds

setExtraContent

Sets additional content that are considered part of the Popup.

A popup with autoclose #setAutoClose enabled allows the focus to be moved into the extra content without closing itself.

A popup with modal #setModal enabled allows the focus to be shifted into the extra content without taking it back to the previous focused element in the popup.

Param Type DefaultValue Description
aContent Element[] sap.ui.core.Element[] string[]

An array containing DOM elements, sap.ui.core.Element or an ID which are considered to be part of the Popup; a value of null removes all previous content

setFollowOf

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.

Param Type DefaultValue Description
followOf boolean function null

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

setInitialFocusId

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.

Param Type DefaultValue Description
sId string

the ID of the DOM element to focus

sap.ui.core.Popup.setInitialZIndex

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.

Param Type DefaultValue Description
iInitialZIndex number

is the initial z-index

setModal

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.

Param Type DefaultValue Description
bModal boolean

whether the Popup is of modal type

sModalCSSClass string

a CSS class (or space-separated list of classes) that should be added to the block layer

setPosition

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.

Param Type DefaultValue Description
my sap.ui.core.Popup.Dock

specifies which point of the given Content should be aligned

at sap.ui.core.Popup.Dock Object

specifies the point of the reference element to which the given Content should be aligned

of string sap.ui.core.Element Element jQuery jQuery.Event document

specifies the reference element to which the given content should be aligned as specified in the other parameters

offset string '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.

collision string

defines how the position of an element should be adjusted in case it overflows the within area in some direction. The valid values that refer to jQuery-UI's position parameters are "flip", "fit" and "none".

within string sap.ui.core.Element Element Window Window

defines the area the popup should be placed in. This affects the collision detection.

setShadow

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

Param Type DefaultValue Description
bShowShadow boolean

whether to show a shadow

sap.ui.core.Popup.setWithinArea

Sets a within area that is used as the area available for positioning the popup. It mainly affects the collision detection. The position of the popup can then be further adapted depending on the "collision" parameter that is set with sap.ui.core.Popup#open or sap.ui.core.Popup#setPosition when the popup overflows the within area.

If no within area is specified, all popups use the window as within area.

When an sap.ui.core.Element is set as the within area, make sure that the control is rendered when the popup opens, otherwise the window is used as the within area.

Param Type DefaultValue Description
vValue string Element sap.ui.core.Element Window

The within area