Show TOC

Create an HTML Page for Your AppLocate this document in the navigation structure

You first create an HTML page and define the meta tags, a script tag to load the SAPUI5 libraries and a placeholder for your app.


  1. Create an HTML page called mobile.html
  2. Add the HTML5 doctype definition: <!DOCTYPE html>" in the first line and the Internet Explorer-specific meta tag :<meta http-equiv="X-UA-Compatible" content="IE=edge" />" are the beginning of <head> element.
    This ensures that all browsers use the latest version of their rendering engine.
  3. Add a second meta tag: <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>.
    This lets all browsers treat the file as UTF-8 encoded (assuming that you use this encoding when editing/saving the file).
  4. In the HTML <body> there needs to be a place where the app HTML will go. Here we add a <div> element to <body> . The "sapUiBody" class should always be added to the <body> tag to initialize font and colors for the whole page:
    • You can equally use the body itself, omitting the extra div. In this case give the body the ID content.
    <body class="sapUiBody">
      <!-- This is where the app will live: -->
      <div id="content"></div>
  5. To load the SAPUI5 JavaScript file that contains the library add the following script tag in the <head>:
    <script  src="http://<server>:<port>/sapui5/resources/sap-ui-core.js"

    Replace <server> and <port> with your local installation. In the SAP HANA Cloud Platform, for example, use src= "" .

    Note Only the sap.m library and the sap_bluecrystal theme are loaded


At this point, SAPUI5 including controls is loaded and ready to use.