A popup that interrupts the current processing and prompts the user for an action or an input in a modal mode.
The Dialog control is used to prompt the user for an action or a confirmation. It interrupts the current app processing as it is the only focused UI element and the main screen is dimmed/blocked. The content of the Dialog is fully customizable.
A Dialog consists of a title, optional subtitle, content area and a footer for action buttons. The Dialog is usually displayed at the center of the screen. Its size and position can be changed by the user. To enable this, you need to set the properties resizable
and draggable
accordingly. In that case the dialog title bar can be focused. While the keyboard focus is located on the title bar, the dialog can be moved with the arrow keys and resized with shift+arrow keys.
There are other specialized types of dialogs:
stretch
property is set to true
, the Dialog displays on full screen.contentWidth
and/or contentHeight
properties are set, the Dialog will try to fill those sizes.sap.m.Dialog
in SAP Quartz themes, the breakpoints and layout paddings could be determined by the Dialog's width. To enable this concept and add responsive paddings to an element of the Dialog control, you have to add the following classes depending on your use case: sapUiResponsivePadding--header
, sapUiResponsivePadding--subHeader
, sapUiResponsivePadding--content
, sapUiResponsivePadding--footer
. If the Dialog has one or two actions, they will cover the entire footer. If there are more actions, they will overflow.
The action buttons in the toolbar are right-aligned. Use cozy mode on tablet devices.
The action buttons in the toolbar are right-aligned. Use compact mode on desktop.
Constructor for a new Dialog.
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.m.Dialog(sId?, mSettings?)
Param | Type | Default Value | Description |
---|---|---|---|
sId? | string | ID for the new control, generated automatically if no ID is given |
|
mSettings? | object | Initial settings for the new control |
Name | Type | Default Value | Description |
---|---|---|---|
closeOnNavigation | boolean | true | Indicates whether the Dialog will be closed automatically when a routing navigation occurs. |
contentHeight | sap.ui.core.CSSSize | Preferred height of the content in the Dialog. If the preferred height is bigger than the available space on a screen, it will be overwritten by the maximum available height on a screen in order to make sure that the Dialog isn't cut off. |
|
contentWidth | sap.ui.core.CSSSize | Preferred width of the content in the Dialog. This property affects the width of the Dialog on a phone in landscape mode, a tablet or a desktop, because the Dialog has a fixed width on a phone in portrait mode. If the preferred width is less than the minimum width of the Dialog or more than the available width of the screen, it will be overwritten by the min or max value. The current mininum value of the Dialog width on tablet is 400px. |
|
draggable | boolean | false | Indicates whether the Dialog is draggable. If this property is set to |
escapeHandler | function | This property expects a function with one parameter of type Promise. In the function, you should call either |
|
horizontalScrolling | boolean | true | Indicates if the user can scroll horizontally inside the Dialog when the content is bigger than the content area. The Dialog detects if there's |
icon | sap.ui.core.URI | Icon displayed in the Dialog header. This |
|
resizable | boolean | false | Indicates whether the Dialog is resizable. If this property is set to |
role | sap.m.DialogRoleType | Dialog | Specifies the ARIA role of the Dialog. If the state of the control is "Error" or "Warning" the role will be "AlertDialog" regardless of what is set. |
showHeader | boolean | true | Determines whether the header is shown inside the Dialog. If this property is set to |
state | sap.ui.core.ValueState | None | Affects the If a value other than |
stretch | boolean | false | Determines if the Dialog will be stretched to full screen on mobile. On desktop, the Dialog will be stretched to approximately 90% of the viewport. This property is only applicable to a Standard Dialog. Message-type Dialog ignores it. |
stretchOnPhone | boolean | false | Determines whether the Dialog will be displayed on full screen on a phone. |
title | string | Title text appears in the Dialog header. Visibility: public |
|
titleAlignment | sap.m.TitleAlignment | Auto | Specifies the Title alignment (theme specific). If set to |
type | sap.m.DialogType | Standard | The |
verticalScrolling | boolean | true | Indicates if the user can scroll vertically inside the Dialog when the content is bigger than the content area. The Dialog detects if there's |
Default Aggregation: content
Name | Cardinality | Type | Description |
---|---|---|---|
_header | 0..1 | sap.ui.core.Control |
The hidden aggregation for internal maintained |
_icon | 0..1 | sap.ui.core.Control |
The hidden aggregation for internal maintained |
_toolbar | 0..1 | sap.m.OverflowToolbar |
The hidden aggregation for internal maintained |
_valueState | 0..1 | sap.ui.core.InvisibleText |
The hidden aggregation for the Dialog state. |
beginButton | 0..1 | sap.m.Button |
The button which is rendered to the left side (right side in RTL mode) of the |
buttons | 0..n | sap.m.Button |
Buttons can be added to the footer area of the Dialog through this aggregation. When this aggregation is set, any change to the |
content (default) | 0..n | sap.ui.core.Control |
The content inside the Dialog. |
customHeader | 0..1 | sap.m.IBar |
When it is set, the |
endButton | 0..1 | sap.m.Button |
The button which is rendered to the right side (left side in RTL mode) of the |
subHeader | 0..1 | sap.m.IBar |
When a |
Name | Cardinality | Type | Description |
---|---|---|---|
ariaDescribedBy | 0..n | sap.ui.core.Control |
Association to controls/IDs which describe this control (see WAI-ARIA attribute aria-describedby). |
ariaLabelledBy | 0..n | sap.ui.core.Control |
Association to controls/IDs which label this control (see WAI-ARIA attribute aria-labelledby). |
initialFocus | 0..1 | sap.ui.core.Control |
In the Dialog focus is set first on the |
leftButton | 0..1 | sap.m.Button |
|
rightButton | 0..1 | sap.m.Button |
|
Event | Description |
---|---|
afterClose |
This event will be fired after the Dialog is closed. |
afterOpen |
This event will be fired after the Dialog is opened. |
beforeClose |
This event will be fired before the Dialog is closed. |
beforeOpen |
This event will be fired before the Dialog is opened. |
This event will be fired after the Dialog is closed.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
origin | sap.m.Button |
This indicates the trigger of closing the Dialog. If the Dialog is closed by either the |
This event will be fired after the Dialog is opened.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object |
This event will be fired before the Dialog is closed.
Param | Type | Description |
---|---|---|
oControlEvent | sap.ui.base.Event | |
getSource | sap.ui.base.EventProvider | |
getParameters | object | |
origin | sap.m.Button |
This indicates the trigger of closing the Dialog. If the Dialog is closed by either the |
Method | Description |
---|---|
_getAnyHeader |
Returns the custom header instance when the |
addAriaDescribedBy |
Adds some ariaDescribedBy into the association ariaDescribedBy. |
addAriaLabelledBy |
Adds some ariaLabelledBy into the association ariaLabelledBy. |
addButton |
Adds some button to the aggregation buttons. |
addContent |
Adds some content to the aggregation content. |
attachAfterClose |
Attaches event handler When called, the context of the event handler (its This event will be fired after the Dialog is closed. |
attachAfterOpen |
Attaches event handler When called, the context of the event handler (its This event will be fired after the Dialog is opened. |
attachBeforeClose |
Attaches event handler When called, the context of the event handler (its This event will be fired before the Dialog is closed. |
attachBeforeOpen |
Attaches event handler When called, the context of the event handler (its This event will be fired before the Dialog is opened. |
close |
Close the dialog. |
destroyBeginButton |
Destroys the beginButton in the aggregation beginButton. |
destroyButtons |
Destroys all the buttons in the aggregation buttons. |
destroyContent |
Destroys all the content in the aggregation content. |
destroyCustomHeader |
Destroys the customHeader in the aggregation customHeader. |
destroyEndButton |
Destroys the endButton in the aggregation endButton. |
destroySubHeader |
Destroys the subHeader in the aggregation subHeader. |
detachAfterClose |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachAfterOpen |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachBeforeClose |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
detachBeforeOpen |
Detaches event handler The passed function and listener object must match the ones used for event registration. |
sap.m.Dialog.extend |
Creates a new subclass of class sap.m.Dialog with name
|
fireAfterClose |
Fires event afterClose to attached listeners. |
fireAfterOpen |
Fires event afterOpen to attached listeners. |
fireBeforeClose |
Fires event beforeClose to attached listeners. |
fireBeforeOpen |
Fires event beforeOpen to attached listeners. |
getAriaDescribedBy |
Returns array of IDs of the elements which are the current targets of the association ariaDescribedBy. |
getAriaLabelledBy |
Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy. |
getBeginButton |
Gets content of aggregation beginButton. The button which is rendered to the left side (right side in RTL mode) of the |
getButtons |
Gets content of aggregation buttons. Buttons can be added to the footer area of the Dialog through this aggregation. When this aggregation is set, any change to the |
getCloseOnNavigation |
Gets current value of property closeOnNavigation. Indicates whether the Dialog will be closed automatically when a routing navigation occurs. Default value is |
getContent |
Gets content of aggregation content. The content inside the Dialog. |
getContentHeight |
Gets current value of property contentHeight. Preferred height of the content in the Dialog. If the preferred height is bigger than the available space on a screen, it will be overwritten by the maximum available height on a screen in order to make sure that the Dialog isn't cut off. |
getContentWidth |
Gets current value of property contentWidth. Preferred width of the content in the Dialog. This property affects the width of the Dialog on a phone in landscape mode, a tablet or a desktop, because the Dialog has a fixed width on a phone in portrait mode. If the preferred width is less than the minimum width of the Dialog or more than the available width of the screen, it will be overwritten by the min or max value. The current mininum value of the Dialog width on tablet is 400px. |
getCustomHeader |
Gets content of aggregation customHeader. When it is set, the |
getDraggable |
Gets current value of property draggable. Indicates whether the Dialog is draggable. If this property is set to Default value is |
getEndButton |
Gets content of aggregation endButton. The button which is rendered to the right side (left side in RTL mode) of the |
getEscapeHandler |
Gets current value of property escapeHandler. This property expects a function with one parameter of type Promise. In the function, you should call either |
getHorizontalScrolling |
Gets current value of property horizontalScrolling. Indicates if the user can scroll horizontally inside the Dialog when the content is bigger than the content area. The Dialog detects if there's Default value is |
getIcon |
Gets current value of property icon. Icon displayed in the Dialog header. This |
getInitialFocus |
ID of the element which is the current target of the association initialFocus, or |
getLeftButton |
ID of the element which is the current target of the association leftButton, or
Since 1.15.1 <code>LeftButton</code> has been deprecated since 1.15.1. Please use the <code>beginButton</code> instead which is more RTL friendly.
|
sap.m.Dialog.getMetadata |
Returns a metadata object for class sap.m.Dialog. |
getResizable |
Gets current value of property resizable. Indicates whether the Dialog is resizable. If this property is set to Default value is |
getRightButton |
ID of the element which is the current target of the association rightButton, or
Since 1.15.1 <code>RightButton</code> has been deprecated since 1.15.1. Please use the <code>endButton</code> instead which is more RTL friendly.
|
getShowHeader |
Gets current value of property showHeader. Determines whether the header is shown inside the Dialog. If this property is set to Default value is |
getState |
Gets current value of property state. Affects the If a value other than Default value is |
getStretch |
Gets current value of property stretch. Determines if the Dialog will be stretched to full screen on mobile. On desktop, the Dialog will be stretched to approximately 90% of the viewport. This property is only applicable to a Standard Dialog. Message-type Dialog ignores it. Default value is |
getStretchOnPhone |
Gets current value of property stretchOnPhone. Determines whether the Dialog will be displayed on full screen on a phone. Default value is
Since 1.13.1 Please use the new stretch property instead. This enables a stretched Dialog even on tablet and desktop. If you want to achieve the same effect as <code>stretchOnPhone</code>, please set the stretch with <code>Device.system.phone</code>, then the Dialog is only stretched when it runs on a phone.
|
getSubHeader |
Gets content of aggregation subHeader. When a |
getTitle |
Gets current value of property title. Title text appears in the Dialog header. |
getTitleAlignment |
Gets current value of property titleAlignment. Specifies the Title alignment (theme specific). If set to Default value is |
getType |
Gets current value of property type. The Default value is |
getVerticalScrolling |
Gets current value of property verticalScrolling. Indicates if the user can scroll vertically inside the Dialog when the content is bigger than the content area. The Dialog detects if there's Default value is |
indexOfButton |
Checks for the provided |
indexOfContent |
Checks for the provided |
insertButton |
Inserts a button into the aggregation buttons. |
insertContent |
Inserts a content into the aggregation content. |
isOpen |
The method checks if the Dialog is open. It returns |
open |
Open the dialog. |
removeAllAriaDescribedBy |
Removes all the controls in the association named ariaDescribedBy. |
removeAllAriaLabelledBy |
Removes all the controls in the association named ariaLabelledBy. |
removeAllButtons |
Removes all the controls from the aggregation buttons. Additionally, it unregisters them from the hosting UIArea. |
removeAllContent |
Removes all the controls from the aggregation content. Additionally, it unregisters them from the hosting UIArea. |
removeAriaDescribedBy |
Removes an ariaDescribedBy from the association named ariaDescribedBy. |
removeAriaLabelledBy |
Removes an ariaLabelledBy from the association named ariaLabelledBy. |
removeButton |
Removes a button from the aggregation buttons. |
removeContent |
Removes a content from the aggregation content. |
setBeginButton |
Sets the aggregated beginButton. |
setCloseOnNavigation |
Sets a new value for property closeOnNavigation. Indicates whether the Dialog will be closed automatically when a routing navigation occurs. When called with a value of Default value is |
setContentHeight |
Sets a new value for property contentHeight. Preferred height of the content in the Dialog. If the preferred height is bigger than the available space on a screen, it will be overwritten by the maximum available height on a screen in order to make sure that the Dialog isn't cut off. When called with a value of |
setContentWidth |
Sets a new value for property contentWidth. Preferred width of the content in the Dialog. This property affects the width of the Dialog on a phone in landscape mode, a tablet or a desktop, because the Dialog has a fixed width on a phone in portrait mode. If the preferred width is less than the minimum width of the Dialog or more than the available width of the screen, it will be overwritten by the min or max value. The current mininum value of the Dialog width on tablet is 400px. When called with a value of |
setCustomHeader |
Sets the aggregated customHeader. |
setDraggable |
Sets a new value for property draggable. Indicates whether the Dialog is draggable. If this property is set to When called with a value of Default value is |
setEndButton |
Sets the aggregated endButton. |
setEscapeHandler |
Sets a new value for property escapeHandler. This property expects a function with one parameter of type Promise. In the function, you should call either When called with a value of |
setHorizontalScrolling |
Sets a new value for property horizontalScrolling. Indicates if the user can scroll horizontally inside the Dialog when the content is bigger than the content area. The Dialog detects if there's When called with a value of Default value is |
setIcon |
Sets a new value for property icon. Icon displayed in the Dialog header. This When called with a value of |
setInitialFocus |
Sets the associated initialFocus. |
setLeftButton |
Sets the associated leftButton.
Since 1.15.1 <code>LeftButton</code> has been deprecated since 1.15.1. Please use the <code>beginButton</code> instead which is more RTL friendly.
|
setResizable |
Sets a new value for property resizable. Indicates whether the Dialog is resizable. If this property is set to When called with a value of Default value is |
setRightButton |
Sets the associated rightButton.
Since 1.15.1 <code>RightButton</code> has been deprecated since 1.15.1. Please use the <code>endButton</code> instead which is more RTL friendly.
|
setShowHeader |
Sets a new value for property showHeader. Determines whether the header is shown inside the Dialog. If this property is set to When called with a value of Default value is |
setState |
Sets a new value for property state. Affects the If a value other than When called with a value of Default value is |
setStretch |
Sets a new value for property stretch. Determines if the Dialog will be stretched to full screen on mobile. On desktop, the Dialog will be stretched to approximately 90% of the viewport. This property is only applicable to a Standard Dialog. Message-type Dialog ignores it. When called with a value of Default value is |
setStretchOnPhone |
Sets a new value for property stretchOnPhone. Determines whether the Dialog will be displayed on full screen on a phone. When called with a value of Default value is
Since 1.13.1 Please use the new stretch property instead. This enables a stretched Dialog even on tablet and desktop. If you want to achieve the same effect as <code>stretchOnPhone</code>, please set the stretch with <code>Device.system.phone</code>, then the Dialog is only stretched when it runs on a phone.
|
setSubHeader |
Sets the aggregated subHeader. |
setTitle |
Sets a new value for property title. Title text appears in the Dialog header. When called with a value of |
setTitleAlignment |
Sets a new value for property titleAlignment. Specifies the Title alignment (theme specific). If set to When called with a value of Default value is |
setType |
Sets a new value for property type. The When called with a value of Default value is |
setVerticalScrolling |
Sets a new value for property verticalScrolling. Indicates if the user can scroll vertically inside the Dialog when the content is bigger than the content area. The Dialog detects if there's When called with a value of Default value is |
Returns the custom header instance when the customHeader
aggregation is set. Otherwise, it returns the internal managed header instance. This method can be called within composite controls which use sap.m.Dialog
inside.
Adds some ariaDescribedBy into the association ariaDescribedBy.
Param | Type | DefaultValue | Description |
---|---|---|---|
vAriaDescribedBy | sap.ui.core.ID sap.ui.core.Control |
The ariaDescribedBy to add; if empty, nothing is inserted |
Adds some ariaLabelledBy into the association ariaLabelledBy.
Param | Type | DefaultValue | Description |
---|---|---|---|
vAriaLabelledBy | sap.ui.core.ID sap.ui.core.Control |
The ariaLabelledBy to add; if empty, nothing is inserted |
Adds some button to the aggregation buttons.
Param | Type | DefaultValue | Description |
---|---|---|---|
oButton | sap.m.Button |
The button to add; if empty, nothing is inserted |
Adds some content to the aggregation content.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContent | sap.ui.core.Control |
The content to add; if empty, nothing is inserted |
Attaches event handler fnFunction
to the afterClose event of this sap.m.Dialog
.
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.m.Dialog
itself.
This event will be fired after the Dialog is closed.
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 |
Attaches event handler fnFunction
to the afterOpen event of this sap.m.Dialog
.
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.m.Dialog
itself.
This event will be fired after the Dialog is opened.
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 |
Attaches event handler fnFunction
to the beforeClose event of this sap.m.Dialog
.
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.m.Dialog
itself.
This event will be fired before the Dialog is closed.
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 |
Attaches event handler fnFunction
to the beforeOpen event of this sap.m.Dialog
.
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.m.Dialog
itself.
This event will be fired before the Dialog is opened.
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 |
Detaches event handler fnFunction
from the afterClose event of this sap.m.Dialog
.
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 |
Detaches event handler fnFunction
from the afterOpen event of this sap.m.Dialog
.
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 |
Detaches event handler fnFunction
from the beforeClose event of this sap.m.Dialog
.
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 |
Detaches event handler fnFunction
from the beforeOpen event of this sap.m.Dialog
.
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 |
Creates a new subclass of class sap.m.Dialog 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.core.Control.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 |
Fires event afterClose to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
origin | sap.m.Button |
This indicates the trigger of closing the Dialog. If the Dialog is closed by either the |
Fires event afterOpen to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
Fires event beforeClose to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
|
origin | sap.m.Button |
This indicates the trigger of closing the Dialog. If the Dialog is closed by either the |
Fires event beforeOpen to attached listeners.
Param | Type | DefaultValue | Description |
---|---|---|---|
mParameters | object |
Parameters to pass along with the event |
Returns array of IDs of the elements which are the current targets of the association ariaDescribedBy.
Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
Gets content of aggregation beginButton.
The button which is rendered to the left side (right side in RTL mode) of the endButton
in the footer area inside the Dialog. As of version 1.21.1, there's a new aggregation buttons
created with which more than 2 buttons can be added to the footer area of the Dialog. If the new buttons
aggregation is set, any change made to this aggregation has no effect anymore. With the Belize themes when running on a phone, this button
(and the endButton
together when set) is (are) rendered at the center of the footer area. While with the Quartz themes when running on a phone, this button
(and the endButton
together when set) is (are) rendered on the right side of the footer area. When running on other platforms, this button
(and the endButton
together when set) is (are) rendered at the right side (left side in RTL mode) of the footer area.
Gets content of aggregation buttons.
Buttons can be added to the footer area of the Dialog through this aggregation. When this aggregation is set, any change to the beginButton
and endButton
has no effect anymore. Buttons which are inside this aggregation are aligned at the right side (left side in RTL mode) of the footer instead of in the middle of the footer.
Gets content of aggregation content.
The content inside the Dialog.
Note: When the content of the Dialog is comprised of controls that use position: absolute
, such as SplitContainer
, the Dialog has to have either stretch: true
or contentHeight
set.
Gets current value of property contentHeight.
Preferred height of the content in the Dialog. If the preferred height is bigger than the available space on a screen, it will be overwritten by the maximum available height on a screen in order to make sure that the Dialog isn't cut off.
Gets current value of property contentWidth.
Preferred width of the content in the Dialog. This property affects the width of the Dialog on a phone in landscape mode, a tablet or a desktop, because the Dialog has a fixed width on a phone in portrait mode. If the preferred width is less than the minimum width of the Dialog or more than the available width of the screen, it will be overwritten by the min or max value. The current mininum value of the Dialog width on tablet is 400px.
Gets content of aggregation customHeader.
When it is set, the icon
, title
and showHeader
properties are ignored. Only the customHeader
is shown as the header of the Dialog.
Gets current value of property draggable.
Indicates whether the Dialog is draggable. If this property is set to true
, the Dialog will be draggable by its header. This property has a default value false
. The Dialog can be draggable only in desktop mode.
Default value is false
.
Gets content of aggregation endButton.
The button which is rendered to the right side (left side in RTL mode) of the beginButton
in the footer area inside the Dialog. As of version 1.21.1, there's a new aggregation buttons
created with which more than 2 buttons can be added to the footer area of Dialog. If the new buttons
aggregation is set, any change made to this aggregation has no effect anymore. With the Belize themes when running on a phone, this button
(and the beginButton
together when set) is (are) rendered at the center of the footer area. While with the Quartz themes when running on a phone, this button
(and the beginButton
together when set) is (are) rendered on the right side of the footer area. When running on other platforms, this button
(and the beginButton
together when set) is (are) rendered at the right side (left side in RTL mode) of the footer area.
Gets current value of property escapeHandler.
This property expects a function with one parameter of type Promise. In the function, you should call either resolve()
or reject()
on the Promise object.
The function allows you to define custom behavior which will be executed when the Escape key is pressed. By default, when the Escape key is pressed, the Dialog is immediately closed.
Gets current value of property horizontalScrolling.
Indicates if the user can scroll horizontally inside the Dialog when the content is bigger than the content area. The Dialog detects if there's sap.m.NavContainer
, sap.m.Page
, sap.m.ScrollContainer
or sap.m.SplitContainer
as a direct child added to the Dialog. If there is, the Dialog will turn off scrolling
by setting this property to false
, automatically ignoring the existing value of the property.
Default value is true
.
Gets current value of property icon.
Icon displayed in the Dialog header. This icon
is invisible on the iOS platform and it is density-aware. You can use the density convention (@2, @1.5, etc.) to provide higher resolution image for higher density screen.
ID of the element which is the current target of the association initialFocus, or null
.
ID of the element which is the current target of the association leftButton, or null
.
Gets current value of property resizable.
Indicates whether the Dialog is resizable. If this property is set to true
, the Dialog will have a resize handler in its bottom right corner. This property has a default value false
. The Dialog can be resizable only in desktop mode.
Default value is false
.
ID of the element which is the current target of the association rightButton, or null
.
Gets current value of property showHeader.
Determines whether the header is shown inside the Dialog. If this property is set to true
, the text
and icon
properties are ignored. This property has a default value true
.
Default value is true
.
Gets current value of property state.
Affects the icon
and the title
color.
If a value other than None
is set, a predefined icon will be added to the Dialog. Setting the icon
property will overwrite the predefined icon.
Default value is None
.
Gets current value of property stretch.
Determines if the Dialog will be stretched to full screen on mobile. On desktop, the Dialog will be stretched to approximately 90% of the viewport. This property is only applicable to a Standard Dialog. Message-type Dialog ignores it.
Default value is false
.
Gets current value of property stretchOnPhone.
Determines whether the Dialog will be displayed on full screen on a phone.
Default value is false
.
Gets content of aggregation subHeader.
When a subHeader
is assigned to the Dialog, it's rendered directly after the main header in the Dialog. The subHeader
is out of the content area and won't be scrolled when the content size is bigger than the content area size.
Gets current value of property titleAlignment.
Specifies the Title alignment (theme specific). If set to TitleAlignment.Auto
, the Title will be aligned as it is set in the theme (if not set, the default value is center
); Other possible values are TitleAlignment.Start
(left or right depending on LTR/RTL), and TitleAlignment.Center
(centered)
Default value is Auto
.
Gets current value of property type.
The type
of the Dialog. In some themes, the type Message will limit the Dialog width within 480px on tablet and desktop.
Default value is Standard
.
Gets current value of property verticalScrolling.
Indicates if the user can scroll vertically inside the Dialog when the content is bigger than the content area. The Dialog detects if there's sap.m.NavContainer
, sap.m.Page
, sap.m.ScrollContainer
or sap.m.SplitContainer
as a direct child added to the Dialog. If there is, the Dialog will turn off scrolling
by setting this property to false
, automatically ignoring the existing value of this property.
Default value is true
.
Checks for the provided sap.m.Button
in the aggregation buttons. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oButton | sap.m.Button |
The button whose index is looked for |
Checks for the provided sap.ui.core.Control
in the aggregation content. and returns its index if found or -1 otherwise.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContent | sap.ui.core.Control |
The content whose index is looked for |
Inserts a button into the aggregation buttons.
Param | Type | DefaultValue | Description |
---|---|---|---|
oButton | sap.m.Button |
The button to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
Inserts a content into the aggregation content.
Param | Type | DefaultValue | Description |
---|---|---|---|
oContent | sap.ui.core.Control |
The content to insert; if empty, nothing is inserted |
|
iIndex | int |
The |
The method checks if the Dialog is open.
It returns true
when the Dialog is currently open (this includes opening and closing animations), otherwise it returns false
.
Removes all the controls from the aggregation buttons.
Additionally, it unregisters them from the hosting UIArea.
Removes all the controls from the aggregation content.
Additionally, it unregisters them from the hosting UIArea.
Removes an ariaDescribedBy from the association named ariaDescribedBy.
Param | Type | DefaultValue | Description |
---|---|---|---|
vAriaDescribedBy | int sap.ui.core.ID sap.ui.core.Control |
The ariaDescribedBy to be removed or its index or ID |
Removes an ariaLabelledBy from the association named ariaLabelledBy.
Param | Type | DefaultValue | Description |
---|---|---|---|
vAriaLabelledBy | int sap.ui.core.ID sap.ui.core.Control |
The ariaLabelledBy to be removed or its index or ID |
Removes a button from the aggregation buttons.
Param | Type | DefaultValue | Description |
---|---|---|---|
vButton | int string sap.m.Button |
The button to remove or its index or id |
Removes a content from the aggregation content.
Param | Type | DefaultValue | Description |
---|---|---|---|
vContent | int string sap.ui.core.Control |
The content to remove or its index or id |
Sets the aggregated beginButton.
Param | Type | DefaultValue | Description |
---|---|---|---|
oBeginButton | sap.m.Button |
The beginButton to set |
Sets a new value for property contentHeight.
Preferred height of the content in the Dialog. If the preferred height is bigger than the available space on a screen, it will be overwritten by the maximum available height on a screen in order to make sure that the Dialog isn't cut off.
When called with a value of null
or undefined
, the default value of the property will be restored.
Param | Type | DefaultValue | Description |
---|---|---|---|
sContentHeight | sap.ui.core.CSSSize |
New value for property |
Sets a new value for property contentWidth.
Preferred width of the content in the Dialog. This property affects the width of the Dialog on a phone in landscape mode, a tablet or a desktop, because the Dialog has a fixed width on a phone in portrait mode. If the preferred width is less than the minimum width of the Dialog or more than the available width of the screen, it will be overwritten by the min or max value. The current mininum value of the Dialog width on tablet is 400px.
When called with a value of null
or undefined
, the default value of the property will be restored.
Param | Type | DefaultValue | Description |
---|---|---|---|
sContentWidth | sap.ui.core.CSSSize |
New value for property |
Sets the aggregated customHeader.
Param | Type | DefaultValue | Description |
---|---|---|---|
oCustomHeader | sap.m.IBar |
The customHeader to set |
Sets a new value for property draggable.
Indicates whether the Dialog is draggable. If this property is set to true
, the Dialog will be draggable by its header. This property has a default value false
. The Dialog can be draggable only in desktop mode.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bDraggable | boolean | false |
New value for property |
Sets the aggregated endButton.
Param | Type | DefaultValue | Description |
---|---|---|---|
oEndButton | sap.m.Button |
The endButton to set |
Sets a new value for property escapeHandler.
This property expects a function with one parameter of type Promise. In the function, you should call either resolve()
or reject()
on the Promise object.
The function allows you to define custom behavior which will be executed when the Escape key is pressed. By default, when the Escape key is pressed, the Dialog is immediately closed.
When called with a value of null
or undefined
, the default value of the property will be restored.
Param | Type | DefaultValue | Description |
---|---|---|---|
fnEscapeHandler | function |
New value for property |
Sets a new value for property horizontalScrolling.
Indicates if the user can scroll horizontally inside the Dialog when the content is bigger than the content area. The Dialog detects if there's sap.m.NavContainer
, sap.m.Page
, sap.m.ScrollContainer
or sap.m.SplitContainer
as a direct child added to the Dialog. If there is, the Dialog will turn off scrolling
by setting this property to false
, automatically ignoring the existing value of the property.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is true
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bHorizontalScrolling | boolean | true |
New value for property |
Sets a new value for property icon.
Icon displayed in the Dialog header. This icon
is invisible on the iOS platform and it is density-aware. You can use the density convention (@2, @1.5, etc.) to provide higher resolution image for higher density screen.
When called with a value of null
or undefined
, the default value of the property will be restored.
Param | Type | DefaultValue | Description |
---|---|---|---|
sIcon | sap.ui.core.URI |
New value for property |
Sets the associated initialFocus.
Param | Type | DefaultValue | Description |
---|---|---|---|
oInitialFocus | sap.ui.core.ID sap.ui.core.Control |
ID of an element which becomes the new target of this initialFocus association; alternatively, an element instance may be given |
Sets the associated leftButton.
Param | Type | DefaultValue | Description |
---|---|---|---|
oLeftButton | sap.ui.core.ID sap.m.Button |
ID of an element which becomes the new target of this leftButton association; alternatively, an element instance may be given |
Sets a new value for property resizable.
Indicates whether the Dialog is resizable. If this property is set to true
, the Dialog will have a resize handler in its bottom right corner. This property has a default value false
. The Dialog can be resizable only in desktop mode.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bResizable | boolean | false |
New value for property |
Sets the associated rightButton.
Param | Type | DefaultValue | Description |
---|---|---|---|
oRightButton | sap.ui.core.ID sap.m.Button |
ID of an element which becomes the new target of this rightButton association; alternatively, an element instance may be given |
Sets a new value for property showHeader.
Determines whether the header is shown inside the Dialog. If this property is set to true
, the text
and icon
properties are ignored. This property has a default value true
.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is true
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bShowHeader | boolean | true |
New value for property |
Sets a new value for property state.
Affects the icon
and the title
color.
If a value other than None
is set, a predefined icon will be added to the Dialog. Setting the icon
property will overwrite the predefined icon.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is None
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sState | sap.ui.core.ValueState | None |
New value for property |
Sets a new value for property stretch.
Determines if the Dialog will be stretched to full screen on mobile. On desktop, the Dialog will be stretched to approximately 90% of the viewport. This property is only applicable to a Standard Dialog. Message-type Dialog ignores it.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bStretch | boolean | false |
New value for property |
Sets a new value for property stretchOnPhone.
Determines whether the Dialog will be displayed on full screen on a phone.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is false
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bStretchOnPhone | boolean | false |
New value for property |
Sets the aggregated subHeader.
Param | Type | DefaultValue | Description |
---|---|---|---|
oSubHeader | sap.m.IBar |
The subHeader to set |
Sets a new value for property title.
Title text appears in the Dialog header.
When called with a value of null
or undefined
, the default value of the property will be restored.
Param | Type | DefaultValue | Description |
---|---|---|---|
sTitle | string |
New value for property |
Sets a new value for property titleAlignment.
Specifies the Title alignment (theme specific). If set to TitleAlignment.Auto
, the Title will be aligned as it is set in the theme (if not set, the default value is center
); Other possible values are TitleAlignment.Start
(left or right depending on LTR/RTL), and TitleAlignment.Center
(centered)
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is Auto
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sTitleAlignment | sap.m.TitleAlignment | Auto |
New value for property |
Sets a new value for property type.
The type
of the Dialog. In some themes, the type Message will limit the Dialog width within 480px on tablet and desktop.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is Standard
.
Param | Type | DefaultValue | Description |
---|---|---|---|
sType | sap.m.DialogType | Standard |
New value for property |
Sets a new value for property verticalScrolling.
Indicates if the user can scroll vertically inside the Dialog when the content is bigger than the content area. The Dialog detects if there's sap.m.NavContainer
, sap.m.Page
, sap.m.ScrollContainer
or sap.m.SplitContainer
as a direct child added to the Dialog. If there is, the Dialog will turn off scrolling
by setting this property to false
, automatically ignoring the existing value of this property.
When called with a value of null
or undefined
, the default value of the property will be restored.
Default value is true
.
Param | Type | DefaultValue | Description |
---|---|---|---|
bVerticalScrolling | boolean | true |
New value for property |