Show TOC

“Hello World!”Locate this document in the navigation structure

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.

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

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


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.comInformation published on non-SAP site.


Adapt the path where the resources are located (<<server>>:<<port>>) according to your installation. For OpenUI5 you can use src="". For accessing SAPUI5 on the SAP HANA Cloud Platform, for example, use src="".

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>
	<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"
	<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"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
			// add both pages to the app
			// place the app into the HTML document
<body class="sapUiBody" id="content">