“Hello World!”

With this tutorial, you learn how to create a simple first app in a few steps on a single HTML page.

We create an app with two pages and a navigation button to navigate between the pages.

Preview

Figure 1: Simple "Hello World" App - First Page

Figure 2: Simple "Hello World" App - Second Page

Note

You can view the demo app in the Demo Kit under Demo Apps.

Coding

In the following steps, we will create an index.html file with the code below. If you directly want to try the app, just copy and paste the code from here.

You can also launch this mini application and modify the code by creating a jsbin example at https://jsbin.com Information published on non-SAP site .

Caution

Adapt the path where the resources are located (<<server>>:<<port>>) according to your installation. For OpenUI5 you can use src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js". For accessing SAPUI5 on the SAP HANA Cloud Platform, for example, use src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js".

You can use this reference to the latest stable version of SAPUI5 for the tutorial or for testing purposes, but never use this for productive use. In an actual app, you always have to specify an SAPUI5 version explicitly.

For more information, see Step 1: Create an HTML Page and Variant for Bootstrapping from Content Delivery Network.

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