Skip to Content

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

To report this post you need to login first.

7 Comments

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

    1. Ranjit Rao 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.

      (0) 

Leave a Reply