SAPUI5 project setup for beginners with HTML views - Part1: Installation

[WouterLemaire]

Hi all,

Starting SAPUI5 development isn't that straightforward as it is for WD ( for example) as an ABAP developer. First of all, developments are in other language called javascript and another environment called eclipse. This is new for most ABAP developers and a basic example of how to setup an SAPUI5 project will boost you all to start with SAPUI5. My intension of this blog is to have one place with all needed information to start developing SAPUI5. This blog will exists out of four parts:

Part1: Installation

Part2: Navigation and storing data with a global model - full project https://github.com/lemaiwo/SAPUI5-part1

Part3: Navigation and storing data with different models - full project https://github.com/lemaiwo/SAPUI5-part2

Part4: Testing your application

Part1: Installation

• Install Eclipse
• Install SAPUI5
• Download the SAPUI5 SDK
• Find examples

Install Eclipse

To start developing in SAPUI5, you need some new software. First you need to download eclipse Juno or Kepler:

Juno: http://www.eclipse.org/juno/

Kepler: http://www.eclipse.org/kepler/

Install SAPUI5

The next step is to install SAPUI5 in your eclipse. You can find these steps on: https://tools.hana.ondemand.com/#sapui5

In Eclipse, choose in the menu bar Help > Install New Software...

In the Install dialog, enter the following update site URL in the Work with entry field:

https://tools.hana.ondemand.com/kepler for Eclipse Kepler (4.3)

https://tools.hana.ondemand.com/juno for Eclipse Juno (4.2)

Press Enter to display the available features.

Select the desired features under UI Development Toolkit for HTML5 and choose Next.

On the next wizard page, you get an overview of the features to be installed. Choose Next.

Confirm the license agreements and choose Finish to start the installation

Installation

Restart Eclipse:

Download the SAPUI5 SDK

After installing SAPUI5, you can download the SAPUI5 SDK at http://scn.sap.com/community/developer-center/front-end.

Find examples

This is not required for developing SAPUI5 but it has some examples which is very helpful! For example, you have a look a like Fiori application under "test-resources\sap\m\demokit\inbox". (if you are getting errors by testing the example, check part 3. In part3 will be explained how to test a SAPUI5 application)

You can find the "test-resources" after unzipping  HTML5Evaluation_complete_1.16.3_1 and afterworths unzipping the "sapui5-sdk-static" folder. It is possible to browse through all the examples and investigate the source code.

Another reason why I prefer downloading the SDK, the application doesn't need to send a network request to SAP to load the SDK and just uses my local version. Also when SAP upgrades his online SDK, this has no influence on your application.

You can find more helpful information about the SAPUI5 SDK at https://sapui5.hana.ondemand.com/sdk/. This documentation is mostly about JS Views, for HTML views you can find more in the "test-resources".

After everything is installed you can go to the next step and start development!

Next step: Part2: Navigation and storing data with a global model

Kind regards,

Wouter