cancel
Showing results for 
Search instead for 
Did you mean: 

Navigating between two pages in SAP UI5 using MVC Model

prathik
Participant
0 Kudos

Hi ,

      I'm a beginner to SAPUI5  and was trying out some stuff.....

I am unable to navigate between two pages could someone help me out with this...

here is my code....

sap.ui.jsview("myfirstmobile.MobileView", {

      getControllerName : function() {

         return "myfirstmobile.MobileView";

      },

      createContent : function(oController) {

        // var app = new sap.m.App({initialPage:"idMobileView1"});

         this.setHeight("100%");

        var flexbox=new sap.m.FlexBox({direction:"Column"});

        flexbox.addItem( new sap.m.Input({placeholder:"Enter UserName"}));

        flexbox.addItem( new sap.m.Input({placeholder:"Enter Password"}));

        flexbox.addItem( new sap.m.Button('login',{text:"Log In",press:alert("are you sure")}));

       // flexbox.addItem(alert("hi"));

        flexbox.setAlignItems("Center");

        flexbox.setJustifyContent("Center");

 

       

     var page1 =new sap.m.Page("page1",{

        title: "LOG IN",

        icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",

        content:flexbox,

              showNavButton: true,

              navButtonTap:function(){

              this.app.to("page2");

              }

         });

     var page2 =new sap.m.Page("page2",{

        title:"CALCULATOR",

        icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",

        content:[]

     } );

     app.addPage(page1).addPage(page2);

     

        return app;

        

      }

});

I've also tried using second page in a separate view...but its not working...

Regards,

Prathik

Accepted Solutions (1)

Accepted Solutions (1)

former_member104694
Participant
0 Kudos

Hi Prathik,

You could use your current code without any views (so code directly in your index.html under your var app = ... statement) and get it to work by changing two things...

from:

flexbox.addItem( new sap.m.Button('login',{text:"Log In",press:alert("are you sure")}));

to:

flexbox.addItem( new sap.m.Button('login',{text:"Log In",press:function(){alert("are you sure");}}));

from:

this.app.to("page2");

to:

app.to("page2");

Alternatively you could create two views and return one m.Page from each of your createContent methods, then within the event handler for navButtonTap you can refer to the view ID when calling the app.to method

Hope this helps.

Cheers,

Ian

former_member104694
Participant
0 Kudos

just to be sure it's clear, the first option mentioned above would mean that your index.html file would have code similar to the following between your <script></script> tags

var app = new sap.m.App("myApp",{initialPage:"page1"});

var flexbox=new sap.m.FlexBox({direction:"Column"});

flexbox.addItem( new sap.m.Input({placeholder:"Enter UserName"}));

flexbox.addItem( new sap.m.Input({placeholder:"Enter Password"}));

flexbox.addItem( new sap.m.Button('login',{text:"Log In",press:function(){alert("are you sure");}}));

flexbox.setAlignItems("Center");

flexbox.setJustifyContent("Center");

var page1 =new sap.m.Page("page1",{

          title: "LOG IN",

          icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",

          content:flexbox,

          showNavButton: true,

          navButtonTap:function(){

                    app.to("page2");

          }

});

var page2 =new sap.m.Page("page2",{

          title:"CALCULATOR",

          icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",

          content:[]

} );

app.addPage(page1).addPage(page2);

app.placeAt("content");

and the second option something like this...

index.html between your <script></script> tags:

sap.ui.localResources("myfirstmobile");

var app = new sap.m.App("myApp",{initialPage:"idMobileView1"});

var page1 = sap.ui.view({id:"idMobileView1", viewName:"myfirstmobile.MobileView", type:sap.ui.core.mvc.ViewType.JS});

var page2 = sap.ui.view({id:"idMobileView2", viewName:"myfirstmobile.MobileView2", type:sap.ui.core.mvc.ViewType.JS});

app.addPage(page1).addPage(page2);

app.placeAt("content");

MobileView createContent:

var flexbox=new sap.m.FlexBox({direction:"Column"});

flexbox.addItem( new sap.m.Input({placeholder:"Enter UserName"}));

flexbox.addItem( new sap.m.Input({placeholder:"Enter Password"}));

flexbox.addItem( new sap.m.Button('login',{text:"Log In",press:function(){alert("are you sure");}}));    

flexbox.setAlignItems("Center");

flexbox.setJustifyContent("Center");

            

var page1 =new sap.m.Page("page1",{

                    title: "LOG IN",

                    icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",

                    content:flexbox,

                    showNavButton: true,

                    navButtonTap:function(){

                                   app = sap.ui.getCore().byId("myApp");

                                   app.to("idMobileView2");

                    }

});

      

return page1;

MobileView2 createContent:

return new sap.m.Page("page2",{

       title:"CALCULATOR",

       icon: "http://www.sap.com/global/ui/images/global/sap-logo.png",

     content:[]

});

prathik
Participant
0 Kudos

Hi Ian,

          I am able to navigate now....Thank You

Regards,

prathik   

Former Member
0 Kudos

Hi Ian MacGregor,

Great explanation....

Regards,

Mithun

former_member127164
Participant
0 Kudos

thank u so much sir

Former Member
0 Kudos

This message was moderated.

Answers (0)