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.
Click on the Button “New Entry”. A pop up appears, now fill in the details and press Save.
So, here we are
Done!!!!
Thank you 🙂 I am new to UI5 and this code was helpful 🙂
Thank You
I am getting the pop up but buttons are missing on pop up
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.
This code was very helpful. Thanks! 🙂
thankss
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
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?
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.
Afterwards, you should get the expected result.
Hope this helps.
Best Regards
Michael