Scribd
Upload
57 views

Introducing SAPUI5: Sap Web Ide 2 Bootstrap 3

Intro to SAPUI5

Uploaded by

Raina Goyal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
57 views

Introducing SAPUI5: Sap Web Ide 2 Bootstrap 3

Intro to SAPUI5

Uploaded by

Raina Goyal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

UI5 Scripts for Demo Run

August 27, 2018 – C O N F I D E N T I AL

Introducing SAPUI5
C O N F I D E N T I AL

Please perform the exercises below:

Table of Contents

SAP Web IDE 2


Bootstrap 3

1.1.

1.2. Preview

Figure 1 - Preview of the app after doing this unit’s exercises

© Sopra Steria Group, 2019 / Ref. : 20180826-050849-SH

1/6
Scripts for UI5 Training
UI5 Scripts for Demo Run
August 27, 2018 – C O N F I D E N T I AL

SAP Web IDE

1.2.1. Access your development environment

In SAP web IDE to access your development project.

Explanation Screenshot

1. Go to the services page of the


SAP HCP Cockpit by opening
the following URL and pressing
the menu item “Services”:

https://account.hanatrial.ondem
and.com/cockpit

2. In the search field filter for


“web” and click on the tile “SAP
Web IDE“.

Click on the link “SAP Web


IDE” to open your development
environment.

3. Go to the development
perspective by clicking on the
icon “</>” in the left toolbar. On
the left side you will see a
folder list with your app
projects.

© Sopra Steria Group, 2019 / Ref. : 20180826-050849-SH

2/6
Scripts for UI5 Training
UI5 Scripts for Demo Run
August 27, 2018 – C O N F I D E N T I AL

Bootstrap
In this step, we will create a very simple web page and load the SAPUI5 library.

1.1.1. webapp/index.html (NEW)


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title> Developing Web Apps with SAPUI5</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>

If you haven’t done so yet in the preparation week of the course, create a project folder and an HTML page. Add
a new project folder MyApp by right-clicking on the “Local” entry in the source tree it and selecting “New >
Folder”.

Inside this folder create a new folder webapp, which will contain all sources of the app we will create throughout
the first weeks of this course. Now create a new root HTML file called index.html in your app folder with the
contents of the listing above.

Your workspace should now look like this:

Figure 2 - Workspace for the test page

© Sopra Steria Group, 2019 / Ref. : 20180826-050849-SH

3/6
Scripts for UI5 Training
UI5 Scripts for Demo Run
August 27, 2018 – C O N F I D E N T I AL

Save your changes and press the button in the header toolbar. A new tab will open with the preview of
your app. In all the following exercises you can test your code like this.

Figure 3 - Preview of the test page

1.1.2. webapp/index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title> Developing Web Apps with SAPUI5</title>

<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.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async">
</script>

<script>
sap.ui.getCore().attachInit(function () {
alert("SAPUI5 is ready");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

Before we can do anything with SAPUI5, we need to load and initialize it. This process of loading and initializing
SAPUI5 is called bootstrapping. Once this bootstrapping is finished, we simply display an alert.

© Sopra Steria Group, 2019 / Ref. : 20180826-050849-SH

4/6
Scripts for UI5 Training
UI5 Scripts for Demo Run
August 27, 2018 – C O N F I D E N T I AL

In the code above, we load the SAPUI5 framework from the Content Delivery Network (CDN)
at https://sapui5.hana.ondemand.com/resources/sap-ui-core.js.

Note:

You can use this reference to the latest stable version of SAPUI5 for the exercises or for testing purposes,
but never do this for productive use. In an actual app, when using our content delivery network, you
always have to specify an SAPUI5 version explicitly. Have a look at the documentation for more details.
The URL will then look like this: https://sapui5.hana.ondemand.com/1.34.10/resources/sap-ui-
core.js

© Sopra Steria Group, 2019 / Ref. : 20180826-050849-SH

5/6
Scripts for UI5 Training
UI5 Scripts for Demo Run
August 27, 2018 – C O N F I D E N T I AL

We initialize the UI5 core with the following configuration options:

 The src attribute of the first <script> tag tells the browser where to find the SAPUI5 core library – it
initializes the SAPUI5 runtime and loads additional resources, such as the libraries specified in
the data-sap-ui-libs attribute.
 The SAPUI5 controls support different themes, we choose sap_bluecrystal as our default theme.
 We specify the required UI library sap.m containing the UI controls we need for this tutorial.
 To make use of the most recent functionality of SAPUI5 we define the compatibility version as edge.
 We configure the process of “bootstrapping” to run asynchronously.
This means that the SAPUI5 resources can be loaded simultaneously in the background for
performance reasons.

When all resources and libraries are loaded, the SAPUI5 runtime fires the global init event to signal that the
library is ready. When loading the libraries asynchronously, you have to listen for this event in order to trigger
your application logic only after the required resources are loaded.

In the example above, we get a reference to the SAPUI5 core by calling sap.ui.getCore() and register an
anonymous callback function for the init event by calling attachInit(…) on the core. In SAPUI5 these kinds
of callback functions are often referred to as event handlers, event listener functions, or simply listeners. The
core is a singleton and can be accessed from anywhere in the code.

Our anonymous callback function is executed when the bootstrap of SAPUI5 is finished and displays a native
JavaScript alert.

© Sopra Steria Group, 2019 / Ref. : 20180826-050849-SH

6/6

You might also like