SAP Web IDE

How-To Guide

Provided by Customer Experience Group

Set up your SAP Web IDE on HANA Cloud

Applicable Releases:
SAP Web Integrated Development Environment 1.4
Version 1.3 - January 2015

Set up your SAP Web IDE on HANA Cloud

Document History
Document Version

Authored By

Description

1.3

Customer Experience
Group

Updated the document with an additional section to

deploy app deployment to ABAP repository

1.2

Customer Experience
Group

Changed the names to some variables and updated

the screen shots

1.1

Customer Experience
Group

Added some prerequisites and changed the way to

define destinations

1.0

Customer Experience
Group

First release of this guide

Set up your SAP Web IDE on HANA Cloud

TABLE OF CONTENTS
1. Business Scenario ............................................................................................................................... 4
2. Background Information ..................................................................................................................... 4
3. Prerequisites ...................................................................................................................................... 5
4. Step-by-Step Procedure ...................................................................................................................... 6
4.1 Subscribing to the SAP Web IDE in the HANA Cloud ........................................................................... 6
4.2 Opening SAP Web IDE for the first time .............................................................................................. 8
4.3 Entering the Git User Settings ............................................................................................................. 9
4.4 Installing and configuring the HANA Cloud Connector ..................................................................... 10
4.5 Connecting remote systems .............................................................................................................. 17
4.6 Test the SAP Web IDE ........................................................................................................................ 20
4.7 Deploy the application to the ABAP Repository ................................................................................ 24

Set up your SAP Web IDE on HANA Cloud

1.

BUSINESS SCENARIO

SAP Web Integrated Development Environment (or SAP Web IDE) is a next-generation cloud-based
meeting space where multiple project stakeholders can work together from a common web interface -connecting to the same shared repository with virtually no setup required. It includes multiple interactive
features that allow you to collaborate with your colleagues and accelerate the development of your
HTML5/UI5 applications.
2.

BACKGROUND INFORMATION

In this How-To Guide we will see how to setup your own development environment with SAP Web IDE on
the HANA Cloud. SAP HANA Cloud Platform is the in-memory Platform-as-a-Service offering from SAP,
which enables customers and developers to build, extend, and run applications on SAP HANA in the cloud.
With flexible subscription models and optional services for apps, database, and infrastructure, it provides
instant access to the full power of SAP HANA.
This is the complete landscape of this model: lets spend some words about it.
1) SAP Web IDE is in the cloud: it reads the destination we define in the SAP HANA Cloud Cockpit.
You may have several destinations for different scopes.
2) After reading a destination, SAP Web IDE looks for the virtual system specified and tries to get the
real system by examining the Access Controls specified in the SAP HANA Cloud Connector installed
on the users local machine.
3) Any Access Control in the SAP HANA Cloud Connector points to one or more resources in the
physical external system. This system can be an ABAP system or any other with OData capabilities.
External$Systems$

SAP$HANA$Cloud$

System$Resources$
SAP$Web$IDE$
FIE$GM6$

Des7na7on$

Des7na7on$

Des7na7on$

1$

D1$ D2$ D3$SAP$HANA$

Cloud$Cockpit$

SAP$HANA$Cloud$
Connector$
Usage$

odata_abap$

Usage$

dev_abap$

Usage$

ui5_execute_abap$

2$
Local$Machine$
(1)$SAP$Web$IDE$reads$the$des7na7ons$
in$the$Cloud$Cockpit$
(2)$A$des7na7on$is$linked$to$an$Access$
Control$inside$the$Cloud$Connector$
(3)$An$Access$Control$points$to$some$
Resources$in$the$specied$ABAP$system$$

3$
CC$

Set up your SAP Web IDE on HANA Cloud

3.

PREREQUISITES

You need a valid account on the https://account.hanatrial.ondemand.com portal in order to follow

the steps shown in this guide:

At chapter 4.6 you will be requested to install the HANA Cloud Connector. This software, at moment,
is only available for 64bit platforms, so before you continue with this guide ensure you are in the
proper condition. Windows 8.x may be not yet supported.

Be sure to have your Internet browser up to date.

Set up your SAP Web IDE on HANA Cloud

4.

STEP-BY-STEP PROCEDURE

This is the sequence of steps:

1)
2)
3)
4)
5)
6)
4.1

Subscribing to the SAP Web IDE in the HANA Cloud

Opening SAP Web IDE for the first time
Entering the Git User Settings
Installing and configuring the HANA Cloud Connector
Connecting remote systems
Test the SAP Web IDE
Subscribing to the SAP Web IDE in the HANA Cloud

The first step is to open the HANA Cloud system and to subscribe to the RDE service.
...

1. Open SAP HANA Cloud cockpit through the link https://account.hanatrial.ondemand.com

2. Click on the Cockpit link

3. Click on Subscriptions

Set up your SAP Web IDE on HANA Cloud

4. Click on New Subscription

5. Select the sapwebide application, enter a name for the subscription (you can leave the proposed
webide name) and click on Create

6. Your subscription is complete

Set up your SAP Web IDE on HANA Cloud

4.2
...

Opening SAP Web IDE for the first time

You are now ready to open SAP Web IDE for the first time.
Choose the menu option File -> New -> Project

1. From the SAP HANA Cloud cockpit, in the Subscriptions section, click on the name of your
subscription. If you didnt change it, it should be webide

2. You should see the application URL related to your SAP Web IDE tool. Copy this link in the clipboard

3. Paste this link in the browser. Your SAP Web IDE tool will be launched

Set up your SAP Web IDE on HANA Cloud

4.3
...

Entering the Git User Settings

Before SAP Web IDE tool can be used with Git, you need to provide some information related to your name
and your email address.
Choose the menu option File -> New -> Project

1. Open SAP Web IDE

2. Click on Tools Git Settings

3. Enter your name and your email address and click on Update

Set up your SAP Web IDE on HANA Cloud

4.4
...

Installing and configuring the HANA Cloud Connector

SAP Web IDE is ready, but it cannot connect to remote systems yet. The steps listed in this paragraph and in
the next one, will do the job. You need to configure the HANA Cloud Connector in order to connect the
destinations, which you are going to define in the next chapter, with the required systems.
Choose the menu option File -> New -> Project

1. Download the HANA Cloud connector from the link https://tools.hana.ondemand.com/#cloud

For windows you have also an installer package (the one with the .msi extension). If you use it, you
can skip step 2
2. Once downloaded, unzip the connector and move the resulting folder in a suitable place on your local
machine
3. Go inside the extracted connector

4. Run the file go.sh (or go.bat in case of Windows OS)

5. When the Connector is started you should see the osgi> prompt

Should you need to close the connector, you can simply type close in this console and the connector
will be closed

10

Set up your SAP Web IDE on HANA Cloud

6. Open browser and go to the link https://localhost:8443.

7. If you get the following error, click on Advanced. This error comes because you dont have yet any
valid certificate for this localhost server

8. Click on Proceed to localhost (unsafe)

9. Enter these credentials and click on Login

User Name

Password

Administrator

manage

11

Set up your SAP Web IDE on HANA Cloud

10. Choose Master as the installation type since this is your first time you are installing the product and
this is the only SAP HANA Cloud Connector in your system. Click on Apply

11. The first time you log in, you need to change the password. Do it and click on Save

12. Provide the following initial configuration and click on Apply. Proxy information is only needed if you
are in a network that requires a proxy, like for example the SAP network.
Parameter

Value

Landscape Host

hanatrial.ondemand.com

Account Name

<your account name on the landscape host>. It can be found on the top
left corner of your SAP HANA Cloud Cockpit

User Name

<your user name on the landscape host>

Password

<your password>

HTTPS Proxy Host

only if required (for SAP users is proxy)

HTTPS Proxy Port

only if required (for SAP users is 8080)

12

Set up your SAP Web IDE on HANA Cloud

13. The landscape is configured. Now we need to add some mappings with the real systems. Click on
Access Control

14. Click on Add in the Mapping Virtual to Internal System section

13

Set up your SAP Web IDE on HANA Cloud

15. Enter the following information and click on Save. What you are doing in this step is to assign to a real
backend system a virtual name. In this way you can decouple the SAP Web IDE from the backend
infrastructure. You can also create a virtual port, which of course can be different from the real one. In
this case you will be using the same port. Lets use as virtual server name gm6.virtual on the port
44333; this will be linked to the physical system GM6 with the URL https://
ldcigm6.wdf.sap.corp:44333.
NOTE: Please be aware that the server used in this document (GM6) is just an example, thus
you may not have granted access to it.
Parameter

Value

Virtual Host

gm6.virtual

Virtual Port

44333

Internal Host

ldcigm6.wdf.sap.corp

Internal Port

44333

Protocol

HTTPS

Back-end Type

ABAP System

16. Now you need to add all the resources related to the usages you want to have in your SAP Web IDE.
These resources are the paths to be concatenated with the server URL in order to have the complete
paths to the resources. For example, if you want to configure your SAP Web IDE to consume the
OData service at the address https://ldcigm6.wdf.sap.corp:44333/sap/opu/odata and extend some
SAP Fiori applications at the address https://ldcigm6.wdf.sap.corp:44333/sap/bc/adt, you just need to
add the common part (the server name and the port) in the system mapping and all the different paths
in the table of the accessible resources.

14

Set up your SAP Web IDE on HANA Cloud

This is the list of the available resources that you can add as of today:
Usage

Path

Description

odata_abap

/sap/opu/odata

for the OData functionality of Gateway

odata_gen

for generic OData functionality (service

URL must be provided manually in the
New Project wizard)

ui5_execute_abap

/sap/bc/ui5_ui5

dev_abap

/sap/bc/adt

for executing SAPUI5 applications from

the SAPUI5 ABAP Repository
for extensibility scenarios and
developing or deploying to SAPUI5
ABAP Repository

bsp_execute_abap

/sap/bc/bsp

For fact sheets

odata_xs

/sap/hba

For HANA XS Odata services

plugin_repository

/plugins/pluginrepository

for exposing external plugin repositories

In this case lets add just the following resources: /sap/opu/odata, /sap/bc/adt and /sap/bc/ui5_ui5,
because for that server we want to use OData services, extend applications and also execute some
SAPUI5 applications.
So click on Add in the Resources section

17. Add the first resource and click on Save

Parameter

Value

URL Path

/sap/opu/odata

Access Policy

Path and all sub-paths

15

Set up your SAP Web IDE on HANA Cloud

18. Do the same for /sap/bc/adt and for /sap/bc/ui5_ui5 and click on Save

19. At the end you should have this configuration

20. Your SAP HANA Cloud connector has been properly configured. The status is green and its
connected

21. You have successfully installed and configured your SAP HANA Cloud Connector.

16

Set up your SAP Web IDE on HANA Cloud

4.5
...

Connecting remote systems

In the previous chapter you have configured your SAP HANA Cloud Connector with a virtual server pointing
to a given real server. This was pretty easy to do: now you have to say to your SAP Web IDE to point to the
virtual server you have created, mapping to it all the related resources. You are going to setup, in the SAP
HANA Cloud Cockpit, a new destination: this destination will give to the SAP Web IDE, the information about
where to look for the specified backend.
With the previous versions of SAP Web IDE you had to create several destinations for each usage you
wanted to include in your connection. Now all this has been heavily simplified: you have to create just one
destination for each system you want to connect by simply specifying all the needed usages in the
WebIDEUsage property: all the usages must be separated by commas with no spaces among them.
Since you want to use the paths /sap/opu/odata, /sap/bc/adt and /sap/bc/ui5_ui5, you need to specify
the usages odata_abap, dev_abap and ui5_execute_abap according to the table at point 16 of the
previous chapter.
These are the actions to perform in order to configure this destination:
Choose the menu option File -> New -> Project

1. From the HANA Cloud cockpit click on the left side on the link Destinations

2. Click on New Destination

17

Set up your SAP Web IDE on HANA Cloud

3. Enter the following parameters and click on Save

Parameter

Value

Name

gm6

Type

HTTP

Description

GM6

URL

https://gm6.virtual:44333

ProxyType

OnPremise

Authentication

NoAuthentication

4. Then click on New Property

5. Add the following new additional parameters:

Parameter

Value

WebIDEEnabled

True

WebIDEUsage

odata_abap,dev_abap,ui5_execute_abap

WebIDESystem

GM6

6. When finished click on Save

18

Set up your SAP Web IDE on HANA Cloud

7. At the end you should have the following situation:

Pay attention to the fact that:

the WebIDEUsage is a concatenation of some of the usages taken from the table at point 16
of previous chapter: just the ones we want to include in our destination;

the URL is not really the address of the real server, but its just the name of a virtual server.

19

Set up your SAP Web IDE on HANA Cloud

4.6
...

Test the SAP Web IDE

If you have reached this point, you might want to know if your system is really working or not. Lets test it by
creating a new SAP Fiori App that will consume the OData services provided by our GM6 backend.
Choose the menu option File -> New -> Project

1. Reopen SAP Web IDE or refresh it if its already open

2. Click on File New Project

3. Enter a name for the new project and click on Next

4. Select for example the SAP Fiori Starter Application template from the SAP Fiori Application
category and click on Next

5. From the Service Catalog drop down list, choose the name of the server we have just defined. Its
GM6 in this example

20

Set up your SAP Web IDE on HANA Cloud

6. Provide your credentials for that server

7. Wait until the entire list of services is loaded

8. Start typing the name of a service to locate the one that you want, for example if you type sra010 you
should be able to find this service

21

Set up your SAP Web IDE on HANA Cloud

9. Fill the master section with some fields

10. Fill the detail section as well

11. Click on Finish

22

Set up your SAP Web IDE on HANA Cloud

12. Run the new application

13. It should work fine

14. Congratulations! You have successfully configured and tested your SAP Web IDE on HANA Cloud.

23

Set up your SAP Web IDE on HANA Cloud

4.7

Deploy the application to the ABAP Repository

Below are the steps to deploy the created application to the ABAP Repository
Choose the menu option File -> New -> Project

1. Go back to SAP Web IDE. You may want to close other open tabs and windows.
2. Select the project, right-click and select Deploy > Deploy to SAPUI5 ABAP Repository

3. For the Deployment Options, Select GM6 system and if authentication is needed provide user ID/Pwd.
Keep Deploy a new application selected and click Next

24

Set up your SAP Web IDE on HANA Cloud

4. Enter a name, e.g. Z_TApprovalApp (the name needs to start with Z), enter any description and click
Browse. Note: In Package field, $TMP is defaulted by the system if your system only supports local
object creation. Click Next

5. Click Finish to deploy your application to the SAPUI5 ABAP Repository

6. Wait for the successful feedback. Click on OK. You have successfully deployed your app to the ABAP
repository

25

Copyright
2015 SAP SE SE or an SAP SE 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.
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 and its affiliated companies (SAP SE Group) for informational
purposes only, without representation or warranty of any kind, and SAP SE Group shall not be liable for
errors or omissions with respect to the materials. The only warranties for SAP SE Group 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.
SAP SE and other SAP SE products and services mentioned herein as well as their respective logos are
trademarks or registered trademarks of SAP SE in Germany and other countries.
Please see
http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark
for additional trademark information and notices.