Typical mobile applications are often composed of a number of pages/views/screens between which the user can navigate. You now add two of them to your app.
// create the first page of your application var page1 = new sap.m.Page("page1", { title: "Initial Page", content : new sap.m.Button({ // content is just one Button text : "Go to Page 2", press : function() { app.to("page2"); // when pressed, it triggers drilldown to page 2 } }) });
When the Button is pressed, it triggers a drilldown navigation by calling app.to("page2"), where page2 is the ID of the second page. You could also give the animation type. The default is a slide animation from right to left.
// create the second page of your application var page2 = new sap.m.Page("page2", { title: "Page 2", showNavButton: true, // page 2 should display a back button navButtonPress: function(){ app.back(); // when tapped, the back button should navigate back up to page 1 }, icon: "http://www.sap.com/global/ui/images/global/sap-logo.png", content : new sap.m.Text({text:"Hello Mobile World!"}) });
// add both pages to the App app.addPage(page1).addPage(page2);
app.placeAt("content"); // place the App into the HTML document