openSAP Evolved Web Apps with SAPUI5

Week 1 Unit 2: Developing in the Cloud with SAP Web IDE

Exercises
PUBLIC
TABLE OF CONTENTS
DEVELOPING IN THE CLOUD WITH SAP WEB IDE ..................................................................................... 3
Create an SAP Cloud Platform Developer Account ..................................................................................... 4
Navigate to your Web IDE Workspace ........................................................................................................... 7
Configure the Service for SAP Fiori Launchpad .......................................................................................... 9
Connect to the Demo System ES5 ............................................................................................................... 16
Test the Development Environment ............................................................................................................ 21
Deploy Project to Share it with the Outside World .................................................................................... 26
RELATED MATERIAL .................................................................................................................................... 28

2
DEVELOPING IN THE CLOUD WITH SAP WEB IDE

Summary

In this unit, you’ll set up everything you need for the hands-on exercises in this course. You’ll get to know the
development environment SAP Web IDE, configure your own SAP Fiori launchpad, and create a destination
to the ES5 SAP Gateway demo system. Then, you’ll test everything by creating a “Pre-Flight Check” app.
Finally, you’ll deploy your first app to the SAP Cloud Platform.

Preview

After this exercise, the foundation is established for the rest of the course: The basic configuration is in place
and has been tested, and you understand the corresponding concepts.

Figure 1 – The SAP Cloud Platform start page

3
Create an SAP Cloud Platform Developer Account

Explanation Screenshot

1. Open your browser, and open

the following URL:

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

Note: Use Google Chrome

We recommend that you use
Google Chrome as a browser for
this course, as it has the best
developer tools. Our instructions
and browser-related tips throughout
this course will be refer to Google
Chrome.

If you don’t have it installed yet, go

to the following URL, and follow the
setup steps:
https://www.google.de/chrome/br
owser/desktop/

2. Choose Register to create a

free SAP Cloud Platform
developer account.

4
Explanation Screenshot

3. Enter your name and e-mail

address, and choose a
password (at least 8 characters
long, including upper- and
lowercase letters, numbers and
symbols).
4. Accept the terms & conditions,
and click Register.

Note: Trial Account

This will create a developer account
on SAP Cloud Platform for you with
a free and perpetual developer
license. You can use this account
to test out the platform or run demo
scenarios.

5. A confirmation e-mail has been

sent to your account. Open it,
and choose Click here to
activate your account.

6. You should see a confirmation

dialog. Choose Continue to go
to the SAP Cloud Platform
Cockpit.

5
Explanation Screenshot

7. Choose Neo Trial.

8. In the Neo Trial

environment, you can see a
navigation frame on the left.
This is your entry point for
managing cloud apps and
configurations.

6
Navigate to Your SAP Web IDE Workspace

In this step, you’ll navigate to your workspace in SAP Web IDE.

Explanation Screenshot

1. On SAP Cloud Platform, you

can consume tools and
applications as services.

Choose Services to see a list of

applications that are available
in your account.

2. In the search field, filter for ide,

and click on the
SAP Web IDE Full-Stack tile.

Note: SAP Web IDE Full-Stack

Since December 31st, 2018, SAP
Web IDE Full-Stack is the only
cloud version of SAP Web IDE. It
includes all capabilities for Grunt
build, integration with SAP API
Business Hub, as well as support
for SAP Leonardo.

7
Explanation Screenshot

3. Check the label underneath the

title; if it reads Not enabled,
choose Enable. If the label
reads Enabled and the label is
green, you can choose Go to
Service in the Take Action
area.

4. SAP Web IDE opens. Have a

look at the start page. It
contains useful links and
shortcuts to the most important
actions. Choose Open my
workspace.

The direct link to SAP Web IDE is

https://webidecp-
p[XXXXXXXXXX]trial.dispatcher.ha
natrial.ondemand.com/

Note: Replace [XXXXXXXXXX]

with your trial account user ID. If
you are using an existing trial
account, you will see a workspace
with your other projects in this step.

5. (Optional) Add a bookmark to

SAP Web IDE Full-Stack by
pressing CTRL+D in Google
Chrome. You will need this link
to your development
environment frequently
throughout the course, so you
should bookmark the page.

8
Configure the Service for the SAP Fiori Launchpad

In this step you’ll configure the SAP Fiori launchpad in preparation for week 4 of the course.

Explanation Screenshot

1. In your workspace, choose

Tools  SAP Cloud Platform
and then Neo trial to get to the
SAP Cloud Platform Cockpit.

2. Choose Services to see a list of

applications that have been
added automatically to your
account.
3. Search for Portal. The Portal
service is shown, but you can
see that it’s marked as Not
enabled.

4. Choose Not enabled to go to

the service configuration.
5. Choose Enable.

9
Explanation Screenshot

6. As soon as the service is

enabled, this is indicated at the
top of the screen.
7. Choose Go to Service to
continue with the configuration.

8. In case your Portal Service

brings up an authorization
error,
 Go to the top right corner to
get your user ID
 Go to Service, Portal,
Configure Portal > Roles
 Rolle TENANT_ADMIN
 Assign to your user ID
 Log off
 Wait for about 5-10 minutes
 Log on again

10
Explanation Screenshot

9. You can now see the SAP

Cloud Platform Portal site
directory. This is where you will
create your new launchpad site,
so choose Create New Site.

10. As the site name, enter My

Launchpad.
11. Select SAP Fiori Launchpad as
a template – you can find it by
searching for Fiori in the
search field. Then, click on the
search result to select it. Only
after the selection, the Create
button at the bottom is enabled.
Choose Create.

11
Explanation Screenshot

12. Another browser tab is opened

with the Fiori Configuration
Cockpit for the new launchpad
site My Launchpad.

Note: Default Configuration

Settings of My Launchpad
On the dashboard on the Home
screen, you can see the default
settings that came with the
template you selected. You can
change the settings with the options
in the navigation panel on the left
side.

13. Result: If you go back to your

previous browser tab, which is
the Site Directory, you can see
that a new launchpad site was
added.

14. Return to the launchpad

configuration tab. Next,
configure the launchpad
catalog. Return to the Fiori
Configuration Cockpit, and
choose Content Management
 Catalogs, or simply choose
the Catalogs tile.

Note: A catalog is a set of apps you

want to make available for a role.
Depending on the role and the
catalogs assigned to the role, users
can browse through the catalogs
and chose the apps that they want
to display on the entry page of the
SAP Fiori launchpad.

12
Explanation Screenshot

15. To edit the Sample Catalog,

choose Edit in the footer
toolbar.

16. On the Properties tab, change

the name and the description to
My Applications.

17. Go to the Roles tab, and assign

the role Everyone by selecting
the check box.

18. Choose Save.

13
Explanation Screenshot

19. Go to Groups, and choose Edit.

20. Edit the Sample Group, rename

it to My Group and choose
Save.

21. Click on the preview button in

the top right corner to see your
shiny new SAP Fiori launchpad

14
 Explanation Screenshot

22. And here it is! It’s empty at this

stage, as you don’t have any
apps in your SAP Fiori
launchpad yet, but all
necessary background settings
are made with a catalog and a
group assigned to the role
Everyone. You can now look
forward to week 5, when you
will fill your launchpad with
apps!

You have successfully created a basic SAP Fiori launchpad in preparation for week 5.

15
Connect to the ES5 Demo System

In this step, you create an account with a user name and a password for the SAP Gateway demo system
ES5. Then, you can configure a destination in the SAP Cloud Platform Cockpit.

Note: SAP Gateway demo system ES5

With the below configuration, you can consume data from GWSAMPLE_BASIC and other demo services
hosted publicly on the ES5 system. These sample services are typically based on the Enterprise
Procurement Model containing entity types BusinessPartner, Contact, Product, SalesOrder and
SalesOrderLineItem.

Sign Up and Get Started with the SAP Gateway Demo Consumption System

Explanation Screenshot

1. Start the SAP Gateway demo system

with this URL
https://register.sapdevcenter.com/SU
PSignForms/
2. If you see the log on screen, log on to
your SAP Cloud Platform account. If
you are already logged in you’ll see
the SAP Gateway Demo Server
welcome page.
3. Read the terms and conditions, and
choose Register.

16
Explanation Screenshot

4. If an upgrade for your trial account is

necessary, you will see an additional
step for this during your registration
process. Read and acknowledge
SAP’s privacy statement, and choose
Register.

5. You will see a success messagefor

your registration.
6. Go to your e-mail inbox to find the
confirmation e-mail, or follow the
instructions on the screen to log on to
the SAP Gateway WebGUI
(https://sapes5.sapdevcenter.com/).

7. Log on with your user name and

temporary password.

17
Explanation Screenshot

8. Change the password from a

temporary to a permanent password.

9. Write down the new password for

the next configuration step.

10. The initial screen appears, which

means your user ID and password
work. You’re all set to create a
destination in the SAP Cloud Platform
Cockpit. This destination will then be
the connection between the service
and your app.

11. To get to the SAP Cloud Platform

Cockpit, go to your Web IDE Full-
Stack trial account (use your
bookmark, if have set it).
12. Go to Tools  SAP Cloud Platform
Cockpit.

18
Explanation Screenshot

13. In the SAP Cloud Platform Cockpit,

choose Connectivity  Destinations.

14. Choose Import Destination. Leave the

import popup open as you perform the
next step.

15. In another tab, download the ES5

destination.txt file from the UI52
GitHub repository folder import by
right clicking the Raw button and
choosing Save Link as…

ES5 Destination on GitHub

Save it to your local computer. Then

select it in the import popup that
appeared after you clicked on Import
Destination.

16. Ensure the field entries match the

screenshot on the right side, and
enter your user name and password
for the ES5 service.

17. Choose Save.

Note: Additional Properties

WebIDEEnabled: This makes this
destination visible to SAP Web IDE.
WebIDESystem: This is the system ID
that the service runs on.
WebIDEUsage: You can enter multiple
usages for a destination, separated by
commas without spaces.

19
 Explanation Screenshot

18. This is the resulting destination

configuration. Next, click on Check
Connection to test if the URL is
plausible.

Note: Check Connection does not

check user credentials
An incorrect user or password does not
cause this test to fail, because it only tests
the URL connectivity, not the
authentication to the system.

19. If you see the message on the right,

the test was successful, and the URL
is correct.

Note that this test is just a technical ping without authorization check. So, if you enter an incorrect password,
this test will still be successful. For this reason, a test was added for the Pre-Flight Check app to see if you
can retrieve a record through the service. If you get the record, the service works.

20
Test the Development Environment

Let’s now check if our SAP Web IDE set-up works by adding the Pre-Flight Check example. From the SAP
Cloud Platform Cockpit, go back to Services, find SAP Web IDE Full-Stack again, and re-open your
workspace by choosing Go to Service.

Explanation Screenshot

Right-click on Workspace, and add

a new project folder called check.

Repeat this step to create another

new folder called webapp.

21
Explanation Screenshot

Right-click on the folder webapp,

and choose New  File to create a
new file called index.html.

Copy the code below into the newly

created file and choose Save.

22
webapp/index.html (NEW)

<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>openSAP - Evolved Web Apps with SAPUI5</title>
<link rel="stylesheet" type="text/css"
href="../../resources/sap/ui/core/themes/sap_belize/library.css">
<script id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
src="../../resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize">
</script>
<script>
// check javascript
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("web").innerHTML = "Ready!";
});
// check ui5
sap.ui.getCore().attachInit(function() {
new sap.m.Title({
text: "Ready!"
}).placeAt("ui5");
document.getElementById("go").style.display = "block";
});
</script>
</head>
<body class="sapUiBody sapUiSmallMargin sapUiForceWidthAuto">
<h1>Evolved Web Apps With SAPUI5</h1>
<hr/>
<h2>Pre-flight Check</h2>
<ul>
<li><p><strong>Web Page:</strong></p>
<p id="web"></p></li>
<li><p><strong>SAPUI5:</strong></p>
<p id="ui5"></p></li>
<li><p><strong>Backend System:</strong></p>
<iframe id="es5"
src="/ES5/sap/opu/odata/iwbep/GWSAMPLE_BASIC/VH_CountrySet('DE')?$format=xml"
style="border:none; display: block"></iframe>
</li>
</ul>
<h2><span id="go" style="display: none; color: forestgreen">&rarr; All systems go
– ready for take-off!</span></h2>
</body>
</html>

This page is intended to check some important things in our configuration:

 The head contains the UI5 bootstrap to make UI5 available. You test this by adding a UI5
element to your page. If it comes up, UI5 is ready.
 You check that JavaScript is enabled by means of the script tags.
 In the body, the iFrame contains a call to our ES5 service via the SAP Gateway demo
system: It retrieves one record through your ES5 destination, the value for Germany. If the
value is returned in a record, the test was successful.

Next, you make your destination available to your app by adding it to the neo-app.json file.

23
 Explanation Screenshot

1. Right-click on the your project

root folder check, and choose
New  HTML5 Application
Descriptor.

Note: You will see this entry only if

you right-click on the root folder of
your project.

2. This creates the neo-

app.json file in your app
folder.
3. Add the following destination
information to it, and save your
file.

webapp/neo-app.json

{
"welcomeFile": "index.html",
"routes": [
{
"path": "/resources",
"target": {

...

"description": "SAPUI5 Test Resources"

},
{
"path": "/ES5",
"target": {
"type": "destination",
"name": "ES5"
},
"description": "SAP Gateway Demo System"
}
]
}

24
Your workspace should now look like this:

Figure 2 - Workspace for the test page

Remember to always save your changes by choosing the save icon(s) . You should also use the
preview button in the header toolbar from time to time. This will open a new tab with a preview of your app.
Your “app” (remember: this is just a test) is now simulated in the cloud, and you will see the Pre-Flight Check
app:

Figure 3 - Preview of the test page

Next, you’ll learn how to deploy and share the app on SAP Cloud Platform.

25
Deploy Project to Share it with the Outside World

The link to a deployed app is accessible on the internet. Use it to illustrate technical issues or share your
achievements with other learners.

Deploy your App to SAP Cloud Platform

When previewing your app with the button, you can conveniently test your local development. However,
if you want to share your code, the local preview is not good enough. The URL is connected to your user
session and won’t work for other learners.

webapp/neo-app.json

{
"welcomeFile": "webapp/index.html",
"routes": [
{
"path": "/resources",
"target": {
...

Before deploying the app, you need to configure the path so that SAP Cloud Platform can find the
index.html file. In your SAP Web IDE workspace, (re-)open your neo-app.json file. Adjust the path for
the welcome file by adding webapp/ in front of index.html. Now, the path matches the folder structure in
your webapp folder.

Save the file by clicking on one of the buttons in the top left corner

Explanation Screenshot

1. Next, you can deploy our app.

Right-click the project folder,
and choose Deploy  Deploy
to SAP Cloud Platform.

26
Explanation Screenshot

2. A settings window opens. You

could change the name of your
published app, give it a different
version number, or deactivate
it. For this exercise, use the
default settings, and choose
Deploy.

3. Next, you get a pop-up with the

success message and the links
to the deployed app, which
means it is accessible on the
Internet via this link. Clicking on
the first link will open the app.

4. The second link displays the

settings of your app in the SAP
Cloud Platform Cockpit where
you can manage all apps on
your cloud account.

5. When you click on the second

link, you can see the app in the
SAP Cloud Platform Cockpit.
The publicly available link as
well as the settings are all
there.

27
 Explanation Screenshot

6. After you close the pop-up, you

can still find the links in SAP
Web IDE by choosing Tools 
SAP Cloud Platform Cockpit.

7. Select HTML5 Applications in

the navigation panel on the left
side. Your myapp app is listed
on the table. By clicking on it,
you can see the same settings
as you saw in step 5.

In the next unit, you’ll learn how to set up a local development environment as an alternative to SAP Web
IDE, how you can consume UI5, and how you can benefit from the latest UI5 Tooling.

RELATED MATERIAL
 Demo Kit: App Development Using SAP Web IDE

28
Coding Samples
Any software coding or code lines/strings (“Code”) provided in this documentation are only examples and are not intended for use in a production system environment. The Code is only intended to better
explain and visualize the syntax and phrasing rules for certain SAP coding. SAP does not warrant the correctness or completeness of the Code provided herein and SAP shall not be liable for errors or
damages cause by use of the Code, except where such damages were caused by SAP with intent or with gross negligence.

www.sap.com/contactsap
© 2018 SAP SE or an SAP affiliate company. All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company.

The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP or its affiliated companies shall not be liable
for errors or omissions with respect to the materials. The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the express warranty statements
accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality
mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or platform directions and functionality are
all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment, promise, or legal obligation
to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are
cautioned not to place undue reliance on these forward-looking statements, and they should not be relied upon in making purchasing decisions.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other
countries. All other product and service names mentioned are the trademarks of their respective companies. See http://www.sap.com/corporate-en/legal/copyright/index.epx for additional trademark
information and notices.