Wednesday, 08 June 2016 18:04

Create your first SAPUI5 Application from scratch

Written by
Rate this item
(0 votes)

Slowly going forward we will build on the application and dive deep into SAPUI5 world.

Source Code: hello_world.html

As SAPUI5 runs in a browser (client-side web UI library). It is implemented in JavaScript.

For loading SAPUI5, its bootstrap needs to be included with a <script> tag. The second option is to provide the source for the SAP UI Core(main/essential) library. The third attribute select the visual design to apply and the last option specifies SAPUI5 control library/libraries to use.

<script src="/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.commons" ></script>

SAPUI5 UI elements are created and modified using code:

// create the button instance var oButton = new sap.ui.commons.Button("button1"); // set properties, e.g. the button text oButton.setText("Hello World!"); // attach an action to the button's "press" event oButton.attachPress(function(){$("#button1").fadeOut()});

Finally, we need to tell SAPUI5 where to place the UI control on our page. We need to give the ID of an element in the page to do so:

// place the button into the HTML element defined below myButton.placeAt("uiArea");

This element must exist somewhere in the HTML page as a placeholder of our UI control defined above, so we need to put the following code to the desired place within the <body> tags:


That’s it ! You can download and run the code hello_world, saving the file as an html file.

Note: SAP preferred Google Chrome browser to used during the SAPUI5 testing and live deployment.

Read 649 times

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.