SAPUI5 Tutorial for beginners


Today we will learn basics on sapui5 implementation for beginners. In market there are multiple websites like etc for basics learning on php,javascript,jquery etc. In those websites its clearly explaining where to start with and continues with concept wise explanation with examples. Unfortunately our SAPUI5 doesn’t have this kind of tutorial websites for now as its a infant bee now ;).

So lets startup with one by one concept.

1. Create a HTML page something like xyz.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. Although Microsoft Internet Explorer is not really used widely on mobile devices and not yet supported by the SAPUI5 mobile library, this meta tag makes the page more future-proof.

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. Add a <div> element to <body>.

5. The “sapUiBody” class should always be added to the <body> tag to initialize font and colors for the whole page:
<body class=”sapUiBody”> <!– This is where the App will live: –> <div id=”content”></div></body>

6. To load the SAPUI5 JavaScript file, that contains the library, add the following script tag in the <head>:
<script src= “http://<http://<server&gt;:<port>/sapui5/resources/sap-ui-core.js” id= “sap-ui-bootstrap” data-sap-ui-libs= “sap.m” data-sap-ui-theme= “sap_mvi”> </script>
Note that you are only loading the “sap.m” control library and the “sap_mvi” theme. mvi stands for Mobile Visual Identity and is the name of the SAP Mobile design.

7. Replace <server> and <port> with your local SAPUI5 installation or point to the SAPUI5 libraries on SAP HANA Cloud Platform:

Continue my next tutorial SAPUI5 Beginners tutorial part 2


2 thoughts on “SAPUI5 Tutorial for beginners

  1. Pingback: SAPUI5 Beginners tutorial part 2 | Sathya's Log

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s