Former Member

September 7, 2013 12 minute read

Working with Dialog Controls in SAP UI5

This blog tells you about types of dialog controls and how to use in SAP UI5

The Dialog control is used to display some information temporarily in a size-limited window in front of the regular application screen, without affecting/removing or modifying the currently displayed content in the main/parent window. Dialog control includes thoughts known from other technologies where traditionally we use to call the windows that appears have names such as dialog box, popup window, alert box, or message box.

It is modal that means that some user action is required before returning to the parent window is possible. To achieve this, you can create an instance of the dialog control using its constructor Dialog() (i.e., new sap.ui.commons.Dialog()). Next, you set the properties for the title and the content, make settings for the size and define other property values.

The MessageBox utility class implements some of the functionality based on the Dialog control. MessageBox defines a template that can be easily configured with the method parameters. Each method of the MessageBox class addresses a different use case: alert(), confirm(), and show().

Syntax for alert() :-

sap.ui.commons.MessageBox.alert(“Your Message”,‘fnCallback’,“title”); //fnCallback & title are optional ; but fnCallback is used to handle the event after the user responds

Example:-

sap.ui.commons.MessageBox.alert(“You are refused to display the message”,”,“Notification”);

Output:-

/wp-content/uploads/2013/09/alert_275685.jpg

Syntax for confirm() :-

sap.ui.commons.MessageBox.confirm(“Your message”,fnCallback, “title”); //fnCallback & title are optional ; but fnCallback is used to handle the event after the user responds

Example:-

new sap.ui.commons.Button({text:“Show Message”, press : dispAlert}).placeAt(“content1”); // Displays a button & when is press the button, this will call the function dispAlert()

function dispAlert() {

sap.ui.commons.MessageBox.confirm(“Are you want to display message?”,rCallAlertBack, “Confirmation”);

return false;

}

function rCallAlertBack(rValue) {

if(rValue) //If User presses ‘Ok’

{

sap.ui.commons.MessageBox.alert(“Welcome to SAPUI5.\n You’re now viewing a Simple alert message.”,”,“Congrats!”);

return false;

}

else // If the user presses ‘Cancel’

{

sap.ui.commons.MessageBox.alert(“You are refussed to display the message”,”,“Notification”);

}

Output:-

Once the user presses the button “Show Message” ; below Confirmation window will be popup

/wp-content/uploads/2013/09/confirm_275686.jpg

When the user presses “Ok” ; rCallAlertBack() will execute the corresponding lines of code and displays as shown below

/wp-content/uploads/2013/09/confirm1_275726.jpg

Syntax for show() :-

sap.ui.commons.MessageBox.show(sMessage,oIcon,sTitle,vActions,fnCallback,oDefaultAction)

where,

sMessage : Message to be displayed

oIcon : sap.ui.commons.MessageBox.Icon.WARNING or ERROR or INFORMATION OR CRITICAL OR SUCCESS OR QUESTION

sTitle : title of the message box

vActions : sap.ui.commons.MessageBox.Action.YES or sap.ui.commons.MessageBox.Action.NO.(You can also use OK or CANCEL instead of YES or NO)

fnCallback: to handle the event after the user responds

Example:-

Here is your complete code, Copy & paste in notepad -> save as “*.html (* – anyname) and execute/run in your browser.

<!DOCTYPE HTML>

<html>

<head>

<title>Welcome | SAPUI5 Demo ::Dialog controls</title>

data-sap-ui-libs=“sap.ui.commons”

data-sap-ui-theme=“sap_goldreflection”>

// Available Themes: sap_goldreflection, sap_platinum and By Default: High Contrast Black

</script>

<!– add sap.ui.table,sap.ui.ux3 and/or other libraries to ‘data-sap-ui–libs‘ if required –>

function dispAlert() { //Display simple Alert Message

sap.ui.commons.MessageBox.confirm(“Are you want to display message?”,rCallAlertBack, “Confirmation”);

return false;

}

// to call the above function, we create a simple button

new sap.ui.commons.Button({text:“Show Message”, press : dispAlert}).placeAt(“content1”);

// to get back the user selection from the above function

function rCallAlertBack(rValue) {

if(rValue) //If User presses ‘Ok’

{

sap.ui.commons.MessageBox.alert(“Welcome to SAPUI5.\n You’re now viewing a Simple alert message.”,”,“Congrats!”);

return false;

}

else // If the user presses ‘Cancel’

{

sap.ui.commons.MessageBox.alert(“You are refussed to display the message”,”,“Notification”);

}

jQuery.sap.require(“sap.ui.commons.MessageBox”); // this is required since there is no direct access to the box’s icons like MessageBox.Icon.WARNING

function fnCallbackMessageBox1(sResult1) {

if(sResult1==‘OK’) {

sap.ui.commons.MessageBox.show(“You are not authorized to delete this content.\n Please check your access”,

sap.ui.commons.MessageBox.Icon.WARNING,

“Warning”,

[sap.ui.commons.MessageBox.Action.OK,sap.ui.commons.MessageBox.Action.CANCEL],

”, sap.ui.commons.MessageBox.Action.OK);

}

else {

sap.ui.commons.MessageBox.alert(“You are refused to display the message”,”,“Notification”);

}

return true;

}

// a callback that will be called when the message box is closed again

function fnCallbackMessageBox(sResult) {

if(sResult==‘OK’) {

sap.ui.commons.MessageBox.show(“You are not authorized to delete this content.\nCheck Access and try again”,

sap.ui.commons.MessageBox.Icon.INFORMATION,

“Notification”, [sap.ui.commons.MessageBox.Action.OK,sap.ui.commons.MessageBox.Action.CANCEL],

fnCallbackMessageBox1, sap.ui.commons.MessageBox.Action.OK);

}

else {

sap.ui.commons.MessageBox.show(“Data deleted successfully!\n”, sap.ui.commons.MessageBox.Icon.SUCCESS,”Sucess”,

[sap.ui.commons.MessageBox.Action.OK], ”, [sap.ui.commons.MessageBox.Action.OK]);

}

return true;

}

function openMessageBox() {

/* sap.ui.commons.MessageBox.Icon.WARNING or ERROR or INFORMATION OR CRITICAL OR SUCCESS OR QUESTION

For the buttons to be displayed, you can use values such as sap.ui.commons.MessageBox.Action.YES or sap.ui.commons.MessageBox.Action.NO. */

// open a fully configured message box

sap.ui.commons.MessageBox.show(“You are not authorized to delete this content.\nCheck Access and try again”,

sap.ui.commons.MessageBox.Icon.ERROR,“Error”,

[sap.ui.commons.MessageBox.Action.OK,sap.ui.commons.MessageBox.Action.RETRY],

fnCallbackMessageBox,

[sap.ui.commons.MessageBox.Action.OK,sap.ui.commons.MessageBox.Action.RETRY]);

}

// to call the above function, we create a simple button

new sap.ui.commons.Button({text:“Delete Content”, press : openMessageBox}).placeAt(“Content2”);

</script>

</head>

<br/>

<br/>

</body>

</html>

Sample Outputs:-

Once you press “Delete Content” button,

/wp-content/uploads/2013/09/btn1_275728.jpg

All the below message box are coded to display.

Error Dialog box:-

/wp-content/uploads/2013/09/error_275732.jpg

Success Dialog box:-

/wp-content/uploads/2013/09/sucs_275733.jpg

Notification Dialog box:-

/wp-content/uploads/2013/09/noty_275734.jpg

Warning Dialog box:-

16 Comments

You must be Logged on to comment or reply to a post.

Former Member

September 7, 2013 at 3:51 pm

nyc one 🙂 🙂

Former Member

September 17, 2013 at 7:50 pm

well explained! expecting few more blog post on UI5

Former Member

September 23, 2013 at 4:10 am

good one 🙂 thank you

Paulo Sales

October 1, 2013 at 7:13 pm

good! Thanks.

Former Member

October 30, 2013 at 9:53 am

Thanks.

Seyed Ismail

January 8, 2014 at 6:33 am

Very useful one, Thanks

Tharun Kumar K C

October 20, 2014 at 10:20 am

How to set a custom header for dialog box in ui5?

Former Member

Blog Post Author

June 15, 2015 at 11:50 pm

Hi Tharun,

If you replace the "Warning" to your desired text - it will be display as the header for the dialog box in UI5.

sap.ui.commons.MessageBox.Icon.WARNING, "Warning",[sap.ui.commons.MessageBox.Action.OK,sap.ui.commons.MessageBox.Action.CANCEL],

'', sap.ui.commons.MessageBox.Action.OK);

Let me know if this works..

Thanks !

Bharath

Former Member

June 15, 2015 at 11:58 am

Hi,

How can we increase the size of the message box. Right now I am displaying a table in a message box and its not looking good as the text in every column field is appearing in next line while trying to fit in the message box.

Is there anything I can do to increase the size.

Regards,

Anupriya

Former Member

Blog Post Author

June 15, 2015 at 11:46 pm

Hi Anupriya,

Try using the syntax - it creates a message Box similar to the alert window.

sap.ui.commons.Dialog({

modal : true,

// a percentage width does result in an ugly vertical slider in Chrome

width : '600px',

content : oContent,

closed : destroyDialog

});

Thanks,

Bharath

Mario Maisto

June 26, 2015 at 10:50 am

Hi,
is it possible to use custom button text with sap.ui.commons.MessageBox.confirm. For example instead of Yes and No, I could set the button text in my native language?

Dhananjay Choubey

June 26, 2015 at 11:05 am

You may extend this.

Surekha Rao

August 21, 2015 at 7:26 am

Can you explain how to add button text on dialog dynamically?

Michael Appleby

August 24, 2015 at 2:37 pm

Please create a new Discussion with your Question.

Regards, Mike (Moderator)

SAP Technology RIG

Lokesh Rajak

June 6, 2016 at 5:52 am

Hi Experts,

Is there a way to stop the drag feature of the dialog.

Regards.

Loki

Former Member

June 20, 2016 at 8:45 pm

you can try these

1. resizable:false

2. try fixing the size contentWidth: "550px" contentHeight: "300px"

Working with Dialog Controls in SAP UI5

This blog tells you about types of dialog controls and how to use in SAP UI5

Syntax for alert() :-

Syntax for confirm() :-

Syntax for show() :-

Assigned Tags