Setting Up SAPUI5 Development

Environment
I.

Introduction

SAP Fiori apps are developed by using UI Development Toolkit for

HTML5 (SAPUI5). The SAPUI5 runtime is a client-side HTML5
rendering library with a rich set of UI controls for building desktop
applications as well as mobile applications.
Before develop an SAPUI5 application, you need to set up the
development environment first.

II.

Applications
a. FileZilla Client
Description: FileZilla Client is a fast and reliable cross-platform
FTP, FTPS and SFTP client with lots of useful features and an
intuitive graphical user interface.

b. Eclipse
Description: Tools for Java developers creating Java EE and Web
applications, including a Java IDE, tools for Java EE, JPA, JSF,
Mylyn and others.

c. XAMPP
Description: XAMPP is a completely free, easy to install Apache
distribution containing MySQL, PHP, and Perl.

d. OpenUI5 SDK
Description: Platform for developing rich user interfaces for
modern Web business applications.
e. Notepad++
Description: Source code editor and Notepad replacement that
supports several languages.

f. TortoiseSVN
Description: TortoiseSVN is a really easy to use Revision
control / version control / source control software for Windows. It
is based on Apache Subversion (SVN); TortoiseSVN provides a
nice and easy user interface for Subversion.
g. Google Chrome
Description: Google Chrome is a freeware web browser
developed by Google.

h. Subclipse (Eclipse Plugin)

Description: Subclipse is an Eclipse Team Provider plug-in
providing support for Subversion within the Eclipse IDE.
i. UI Development Toolkit for HTML5 (Eclipse Plugin)
Description: Plugin to enable SAPUI5 development within the
Eclipse IDE

III.

Download Links
The following applications are needed to start developing using
SAPUI5:

Application

Purpose
Will be used to access and download
the files in the FTP server.

Link
Go

Will be used for developing the

application.
NOTE: If your jdk is 32-bit, you should
download the 32-bit version of
eclipse. Likewise, if your jdk is 64-bit,
you should download the 64-bit
version of eclipse
How to check jdk version:
1. Run cmd
2. Type java -version and press
enter
3. You should see 64-bit
somewhere in the output string
if your version is 64-bit. If there
is no 64-bit displayed in the
output, your version is 32-bit
Will be used for deploying the website
for testing

32bit:
Go
64bit:
Go

Contains the files needed to create an

SAPUI5 application
Alternative editor for source codes

*
Go

Will be used for versioning

Go

FileZilla Client
Eclipse (Kepler)

XAMPP
OpenUI5 SDK

Notepad++
TortoiseSVN

Google Chrome
Subclipse (Eclipse
Plugin)

UI Development
Toolkit for HTML5
(Eclipse Plugin)

Will be used to test and debug the

application

Go

Subclipse is an Eclipse Team Provider

plug-in providing support for
Subversion within the Eclipse IDE.
Plugin to enable SAPUI5 development
within the Eclipse IDE

**

**

*OpenUI5 SDK and XAMPP are already available in the FTP server.
You can download these applications using FileZilla:
1. Open FileZilla
2. Enter the credentials
- Host: ABSSAP05VIR03.phl.hp.com
- Username: sapui5_bootcamper
- Password: sapui5_2015
3. Press Quickconnect
4. In the 4th pane (lower right pane), double click Installers
folder
5. Highlight all the files (eclipse, xampp) and drag to the desired
location in 1st pane (upper left pane)
**For the two plugins, it will be discussed later at the Installation
section.
***For the rest of the applications, just follow the links listed above.

IV.

Installation
Please make sure you have downloaded the installers mentioned
above before proceeding to this step.
Subclipse (Eclipse Plugin)
1. Open Eclipse

2. Click Help -> Install New Software

3. Copy paste this link http://subclipse.tigris.org/update_1.10.x/

to the Work with field.

4.
5.
6.
7.
8.

Check Subclipse
Click Next
Click Next again
Click I accept the terms of the license agreements
Click Finish

UI5 Toolkit (Eclipse Plugin)

1. Open Eclipse
2. Click Help -> Install New Software
3. Copy paste this link https://tools.hana.ondemand.com/kepler
to the Work with field.
4. Check UI Development Toolkit for HTML5
5. Click Next
6. Click Next again
7. Click I accept the terms of the license agreements
8. Click Finish
SAPUI5 SDK
Installation of this library will be discussed in Configuration part
The Rest
Follow the steps provided in the wizard

V.

Configuration

1. On your XAMPP htdocs folder, create a folder named sapui5

2. Open Eclipse
3. Point the workspace to sapui5 folder (e.g. C:\xampp\htdocs\sapui5)

Before testing your UI5 Application in Google Chrome you must first disable
Google Chromes web security because of Same origin policy.

Create a shortcut to --disable-web-security

1. Duplicate your Google Chrome shortcut
2. Add --disable-web-security after the double quotes in Target
3. Click OK

Revision Table
Version
1.0
1.1
1.2
1.3
1.4
1.5

Date
2/17/2015
3/11/2015
3/31/2015
5/27/2015
5/28/2015
9/23/2015

Name
Rodolfo DC Odiamar
Rodolfo DC Odiamar
Rodolfo DC Odiamar
Rodolfo DC Odiamar
Rodolfo DC Odiamar
Ginwene Rueda