Show TOC

Add Content PagesLocate this document in the navigation structure

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.

Procedure

  1. One sap.m.Page control is created, its title is set and the content is just one button:
     
    // 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.

    sap.m.Page controls can be used as pages, and the aggregation is called pages, but other controls could be used as well.
  2. Add the following to the <script> section of the HTML page below the part, where you've initialized the app:
     
    // 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!"})
    }); 
    showNavButton is set to true to get a Back button displayed. When this button is pressed, the handler calls app.back(). This causes an inverse animation, which leads back to the main page.
  3. Add the two pages to the App:
    // add both pages to the App
    app.addPage(page1).addPage(page2); 
    
  4. Finally place the app into the content area you've defined earlier.
      app.placeAt("content"); // place the App into the HTML document
    The app is placed into the HTML like a SAPUI5 desktop control. The App takes care to cover the whole screen.