Skip to Content

Pop Up to Accept Input in SAPUI5

In this blog I would show you how to get a pop up over a screen. For getting a popup we will take the help of sap.m.Dialog. This dialog box should be filled with UI elements which comprises the content. This Dialog even has space to add buttons, which would get added at the bottom of the box.

Sample Code:

sap.m.Dialog

var oDialog = new sap.m.Dialog(“Dialog1”,{

                    title:“Dialog”,

                    modal: true,

                    contentWidth:“1em”,

                    buttons: [/* Add your buttons here */],

                    content:[/* Add your content here */]

             });

Now, Lets create a small demo app to demonstate the use of this pop-up:

Go to Eclipse—New Project—SAPUI5 Mobile, then create a js View<View1>.

Paste the following code in the createContent of view.js file:

createContent of view.js file

var oPage = new sap.m.Page({

                    title: “Players Details”,

             });

             var oButton1 = new sap.m.Button(“Submit”, {

                    text: “New Entry”,

                    tap: [ oController.NewEntry, oController ]

             });

             var oButton2 = new sap.m.Button(“Save”, {

                    text: “Save”,

                   tap: [ oController.Save, oController ]

             });

             var oButton3 = new sap.m.Button(“Cancel”, {

                    text: “Cancel”,

                    tap: [ oController.Cancel, oController ]

             });

             var oDialog = new sap.m.Dialog(“Dialog1”,{

                    title:“Details ofNew Entry”,

                    modal: true,

                    contentWidth:“1em”,

                    buttons: [ oButton2, oButton3 ],

             content:[

                      new sap.m.Label({text:“First name”}),

                      new sap.m.Input({

                    maxLength: 20,

                    id: “FName”

                      }),

                      new sap.m.Label({text:“LastName”}),

                      new sap.m.Input({

                   maxLength: 20,

                     id: “LName”

                       }),

                      new sap.m.Label({text:“Age”}),

                      new sap.m.Input({

                   maxLength: 3,

                   id: “Age” 

                    }),

                      ]

             });

             var oTable = new sap.m.Table({

                    id: “Players”,

                    columns: [

                    new sap.m.Column({

                           width: “1em”,

                           header: new sap.m.Label({

                           text: “First Name”

                           })

                    }),new sap.m.Column({

                           width: “1em”,

                           header: new sap.m.Label({

                           text: “Last Name”

                           })

                    }),new sap.m.Column({

                           width: “1em”,

                           header: new sap.m.Label({

                            text: “Age”

                           })

                    })

                    ]

             });

             oPage.addContent(oButton1);

             oPage.addContent(oTable);

             return oPage;

Now paste the following code in controller.js file:

Controller.js

NewEntry: function() {

             sap.ui.getCore().byId(“Dialog1”).open();

       },

Save:function() {

             var fName = sap.ui.getCore().byId(“FName”).getValue();

             var lName = sap.ui.getCore().byId(“LName”).getValue();

             var age = sap.ui.getCore().byId(“Age”).getValue();

      oTableRow = new sap.m.ColumnListItem({

                    type: “Active”,

                   visible: true,

                    selected: true,

                    cells: [

                                 new sap.m.Label({

                    text: fName

                   }),

                                 new sap.m.Label({

                 text: lName

                  }),

                                 new sap.m.Label({

                  

                 text: age

                 })

                 ]

             });

             sap.ui.getCore().byId(“Players”).addItem(oTableRow);

             sap.ui.getCore().byId(“Dialog1”).close();

             sap.m.MessageToast.show(“Saved”,{duration:1000});

       },

Cancel:function() {

             sap.ui.getCore().byId(“Dialog1”).close();

       }

Evrything is ready. Save and run the application.

/wp-content/uploads/2014/12/chrome_598465.jpg

Click on the Button “New Entry”. A pop up appears, now fill in the details and press Save.

/wp-content/uploads/2014/12/chrome1_598466.jpg

So, here we are

/wp-content/uploads/2014/12/chrome2_598467.jpg

Done!!!!

9 Comments
You must be Logged on to comment or reply to a post.
    • Hi Sankara,

      The buttons have to be defined. The pop does not have a predefined buttons. Please go through the above code, where i have created the buttons and then added it to the pop up.

  • Thank you for the article, very helpful! I don’t see any margin/padding defined in this article. Do you know how it can be added directly to our Dialog element?

    var oDialog = new sap.m.Dialog("Dialog1",{
    	     title:"Create Shipping Units",
    	     class:"sapUiResponsivePadding", //Not working
    	     buttons: [oButton1, oButton2],
    	     content:[
    	          new sap.m.Label({text:"Packaging Material"}),
    	          new sap.m.Input({maxLength: 20,id: "PackagingMaterial_ID"}),
    	          new sap.m.Label({text:"Number of Packages"}),
    	          new sap.m.Input({maxLength: 3, id: "NumberOfPackages"})
    	     ]
    });
    
    sap.ui.getCore().byId("Dialog1").open();
    

     

     

    /
    • Hi Austin,

      your code requires two adjustments. Apparently the property “class” is not working for dialog, but the method “addStyleClass” does. Furthermore, use css-class “sapUiContentPadding” in order to get padding.

      oDialog.addStyleClass("sapUiContentPadding");

      Afterwards, you should get the expected result.

      Hope this helps.

      Best Regards
      Michael