<!DOCTYPE HTML>

<html>

  <head>

  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

  <meta http-equiv=’Content-Type’ content=’text/html;charset=UTF-8’/>

  <title>Name Your App</title>

  <script src=”resources/sap-ui-core.js”

             id=”sap-ui-bootstrap”

            data-sap-ui-libs=”sap.m”

            data-sap-ui-theme=”sap_bluecrystal”

            data-sap-ui-xx-bindingSyntax=”complex”

            data-sap-ui-resourceroots='{ “sap.ui.namespace”: “./”}’>

  </script>

  <script>

  new sap.ui.core.ComponentContainer({

                      name : “sap.ui.namespace”

                      }).placeAt(“content”);

  </script>

  </head>

  <body class=”sapUiBody” role=”application”>

  <div id=”content”></div>

  </body>

</html>

The UI5 application, gets initialized from it index.html file. Here in this blog I would like to highlight the main function of each field.

The first line which gets executed here is called bootstraping, it initializes the sap.ui core libraries.

data-sap-ui-libs – The required libraries has be declared here like sap.m, sap.ui.commons, sap.ui.layout and so on

data-sap-ui-theme – This is the place where you can mention the look and feel of your application. By default the  theme is Blue Crystal. We have few other theme like Gold Reflection and High Contrast

data-sap-ui-xx-bindingSyntax – If you need to bind the values within your application like formatter.js, then you need to mention it.


data-sap-ui-resourceroots – The namespace of the application needs to be mentioned  

sap.ui.core.ComponentContainer – This part navigates your application to the Component.JS file to get more information

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply