Show TOC

Step 3: Add Content PagesLocate this document in the navigation structure

Apps consist of a set of pages, views, and screens between which the user can navigate. Now we add two pages to the app.

index.html
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>Hello World App</title>
	<script src="http://<server>:<port>/resources/sap-ui-core.js"
		id="sap-ui-bootstrap"
		data-sap-ui-theme="sap_bluecrystal"
		data-sap-ui-libs="sap.m">
	</script>
	<script type="text/javascript">
		sap.ui.getCore().attachInit(function () {
			// create a mobile app and display page1 initially
			var app = new sap.m.App("myApp", {
				initialPage: "page1"
			});
			// create the first page
			var page1 = new sap.m.Page("page1", {
				title : "Hello World",
				showNavButton : false,
				content : new sap.m.Button({
					text : "Go to Page 2",
					press : function () {
						// navigate to page2
						app.to("page2");
					}
				})
			});
			// create the second page with a back button
			var page2 = new sap.m.Page("page2", {
				title : "Hello Page 2",
				showNavButton : true,
				navButtonPress : function () {
					// go back to the previous page
					app.back();
				}
			});
			// add both pages to the app
			app.addPage(page1).addPage(page2);
			// place the app into the HTML document
			app.placeAt("content");
		});
	</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
  1. Create one sap.m.Page control and set its title. To keep this example simple, the content is just one button that navigates to the second page by calling app.to("page2") when the button is pressed. The parameter page2 is the ID of the second page. You could also specify the animation type for the navigation. The default is a slide animation from right to left.

    Note

    sap.m.Page controls can be used for the aggregation pages of the app control, but other controls could be used as well. The page has a scrollable content section for displaying information and will create a header and an optional footer area.

  2. Create the second page that displays the Back button. The property showNavButton is set to true to display a Back button. When it is pressed, the event handler function calls app.back(). This will bring the user back to the main page with an an inverse animation.

  3. Add both pages to the app and place the app in the content area of the HTML file that you have defined as the body tag earlier:
    app.addPage(page1).addPage(page2); 
    app.placeAt("content");
The app is now placed into the HTML, the app uses the whole screen size that is available on the device.