Create your first SAPUI5 Application from scratch

1
7594

To begin our SAPUI5 development journey, let’s have a look into basic SAPUI5 application. The “Hello World” application to familiarize you with the structured blocks of SAPUI5 and how it actually works. Slowly going forward we will build on the application and dive deep into SAPUI5 world.

hello_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 id="sap-ui-bootstrap"
  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:

 <div id="uiArea"></div>

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.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here