Create Your First SAPUI5 Application

You can include a bootstrap to the SAPUI5 JavaScript libraries to use SAPUI5 in an HTML page without having set up the SAPUI5 application development tools in Eclipse.

This page explains how to create and run a simple SAPUI5 application from scratch within twenty seconds (with some practice… the current record is 16 seconds).

If you are interested in exactly doing this without reading too much, you can skip the background information and read the And how to do it in 20 Seconds section below.

Background Information

As SAPUI5 is a client-side web UI library meaning that it runs in a browser, a SAPUI5 application typically is composed of an HTML page and, if required, many more files.

SAPUI5 is implemented in JavaScript. For loading SAPUI5, its bootstrap needs to be included with a <script> tag. The last two attributes select the visual design to apply initially (other choices would be sap_hcb or sap_goldreflection) and the SAPUI5 control library/libraries to use . In your scenario you need to make sure the URL points to a SAPUI5 installation.

<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 programmatically:

// create the button instance
var oMyButton = new sap.ui.commons.Button("btn");

// set properties, e.g. the text (there is also a shorter way of setting several properties)
myButton.setText("Hello World!");

// attach an action to the button's "press" event (use jQuery to fade out the button)
myButton.attachPress(function(){$("#btn").fadeOut()});

There is also a shorthand notation based on JSON for setting multiple properties; you could also write:

var oMyButton = new sap.ui.commons.Button({text:"Hello World!",tooltip:"Hello Tooltip!"});

Finally you need to tell SAPUI5 where the UI control should be placed. You can just 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, so you need to put the following code to the desired place within the <body>:

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

An alternative way to create and initialize the control in a more jQuery-style manner is also available:

$(function(){
  $("#uiArea").sapui("Button", "btn", {
    text:"Hello World!",
    press:function(){$("#btn").fadeOut();}
 });
});

As a minor detail, the <body> should have a certain CSS class, so the page background and some other styles are properly set:

<body class="sapUiBody">

There are two meta tags at the beginning of the <head>: The first meta tag is used to ensure that Internet Explorer 8+ uses its most standard-compliant rendering mode. The second meta tag is used to let all browsers treat the file as UTF-8 encoded (assuming that you use this encoding when editing/saving the file):

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

And How to do it in 20 Seconds

Assumption for these instructions to work exactly as described: You have a Windows Computer (other OS will work similarly), Internet Explorer 9+ with security option set to Access data across domains for the respective zone, Firefox, Safari or Chrome in the latest version, and you know where you can refer to SAPUI5 on some server.

Note The URL in the script tag is pre-filled as https://sapui5.hana.ondemand.com/resources/sap-ui-core.js. This is the URL where the resources are located in the SAP HANA Cloud Platform delivery. Test this URL first and if it does not work, replace this URL with the location of SAPUI5 on your local server.

Proceed as follows:

Right click your desktop and select New Text Document .
Name the new file, for example "ui5.html", and accept the extension change warning.
Right click the new file and select Edit. Make sure that the file opens in Notepad and not in MS Word.
Copy and paste the below HTML code. Keep in mind to adapt the SAPUI5 URL
Drag the file to the browser window.
That was it.

<!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>SAPUI5 in 20 Seconds</title>
    <!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
    <script id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-libs="sap.ui.commons"></script>

    <!-- 2.) Create a UI5 button and place it onto the page -->
    <script>
        // create the button instance
        var myButton = new sap.ui.commons.Button("btn");

        // set properties, e.g. the text (there is also a shorter way of setting several properties)
        myButton.setText("Hello World!");

        // attach an action to the button's "press" event (use jQuery to fade out the button)
        myButton.attachPress(function(){$("#btn").fadeOut()});

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

        // an alternative, more jQuery-like notation for the same is:  
        /*
        $(function(){
            $("#uiArea").sapui("Button", "btn", {
                text:"Hello World!",
                press:function(){$("#btn").fadeOut();}
            });
         });
         */
     </script>
</head>
<body class="sapUiBody">

    <!-- This is where you place the UI5 button -->
    <div id="uiArea"></div>
</body>
</html>

Result

If you followed the steps above you should now see a button like this which fades out when clicked:

Next Steps

You can now do the following:

Add more buttons.
Let them do trickier things.
Find out about further properties and events of button controls and use those.
.