Show TOC

Step 1: Create an HTML PageLocate this document in the navigation structure

We start with creating an HTML page for the app. There we define the meta tags, a script tag to load the SAPUI5 libraries, and a placeholder for the content of the app.

index.html (new)
<!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>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Create a file named index.html and add following sections:
  • <!DOCTYPE html>: This line tells the browser that this page is written in HTML5.

  • head with the following information:

    • The meta tags <meta http-equiv="X-UA-Compatible" content="IE=edge"> to tell Microsoft Internet Explorer to use the latest rendering engine (edge) and <meta charset="utf-8"> to tell any browser that this file is UTF-8 encoded (assuming that you use this encoding when editing or saving the file).

    • The title text.

    • The script tag to load and initialize SAPUI5 with the following information:
      • Location of the resources
        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 Variant for Bootstrapping from Content Delivery Network.

    • You define which library is loaded, and which theme should be used. In our example, only the sap.m library and the sap_bluecrystal theme are loaded. You can load additional libraries and themes if you like.

    Note

    Refer to the documentation linked below for further initialization options.

  • The HTML <body> tag the with ID content and class sapUiBody. This is where the content of the app will be added in in the next steps

Now, SAPUI5 including controls is loaded and ready to use.