Pop Up to Accept Input in SAPUI5

[ranjit_rao]

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.

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

So, here we are

Done!!!!