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. Applicationsa. 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. EclipseDescription: Tools for Java developers creating Java EE and Web applications, including a Java IDE, tools for Java EE, JPA, JSF, Mylyn and others.

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

d. OpenUI5 SDKDescription: 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. TortoiseSVNDescription: 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 ChromeDescription: 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 LinksThe following applications are needed to start developing using SAPUI5:

Application Purpose Link

FileZilla Client

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

Go

Eclipse (Kepler)

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 eclipseHow to check jdk version:

1. Run ‘cmd’2. Type ‘java -version’ and press

enter3. 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

32-bit: Go64-bit:Go

XAMPP

Will be used for deploying the website for testing

*

OpenUI5 SDK Contains the files needed to create an SAPUI5 application

*

Notepad++

Alternative editor for source codes Go

TortoiseSVN Will be used for versioning Go

Google Chrome

Will be used to test and debug the application

Go

Subclipse (Eclipse Plugin)

Subclipse is an Eclipse Team Provider plug-in providing support for

Subversion within the Eclipse IDE.

**

UI Development Toolkit for HTML5 (Eclipse Plugin)

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 FileZilla2. Enter the credentials

- Host: ABSSAP05VIR03.phl.hp.com- Username: sapui5_bootcamper- Password: sapui5_2015

3. Press Quickconnect4. In the 4th pane (lower right pane), double click ‘Installers’

folder5. 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. InstallationPlease 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. Check Subclipse5. Click Next6. Click Next again

7. Click ‘I accept the terms of the license agreements’8. Click Finish

UI5 Toolkit (Eclipse Plugin)

1. Open Eclipse2. Click Help -> Install New Software3. Copy paste this link https://tools.hana.ondemand.com/kepler

to the ‘Work with’ field.4. Check UI Development Toolkit for HTML55. Click Next6. Click Next again7. 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 Eclipse3. 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 Chrome’s web security because of Same origin policy.

Create a shortcut to --disable-web-security

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

Revision Table

Version Date Name1.0 2/17/2015 Rodolfo DC Odiamar1.1 3/11/2015 Rodolfo DC Odiamar1.2 3/31/2015 Rodolfo DC Odiamar1.3 5/27/2015 Rodolfo DC Odiamar1.4 5/28/2015 Rodolfo DC Odiamar1.5 9/23/2015 Ginwene Rueda