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:-
/wp-content/uploads/2013/09/button_275727.jpg
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>

     <script src=“resources/sap-ui-core.js” id=“sap-ui-bootstrap”

           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-uilibs‘ if required –>

     <script>

     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>

<body class=“sapUiBody”>

<div id=“content1”></div>

<br/>

<div id=“Content2”></div>

  <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:-
Warn.jpg
To report this post you need to login first.

16 Comments

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

    1. JayaBharath S Post author

      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

      (0) 
  1. Anupriya Sharma

    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

    (0) 
    1. JayaBharath S Post author

      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

      (0) 
  2. Mario Maisto

    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?

    (0) 

Leave a Reply