Skip to Content
Author's profile photo Ranjit Rao

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!!!!

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Ramya G
      Ramya G

      Thank you 🙂 I am new to UI5 and this code was helpful 🙂

      Author's profile photo Ranjit Rao
      Ranjit Rao
      Blog Post Author

      Thank You

      Author's profile photo sankara rao bhatta
      sankara rao bhatta

      I am getting the pop up but buttons are missing on pop up

      Author's profile photo Ranjit Rao
      Ranjit Rao
      Blog Post Author

      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.

      Author's profile photo Former Member
      Former Member

      This code was very helpful. Thanks! 🙂

      Author's profile photo Former Member
      Former Member

      thankss

      Author's profile photo Michael Smith
      Michael Smith

      Nice post.  In the dialog popup, is there a way to put the Label control on the same line as the Input control?

      Thanks,

      Michael

       

       

      Author's profile photo Austin Kloske
      Austin Kloske

      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();
      

       

       

      Author's profile photo Michael Christa
      Michael Christa

      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