Sergej Khackimullin - Fotolia

Book excerpt: How to get started with SAPUI5

An expert explains how to start off on the right foot with SAPUI5, with step-by-step advice for setting up the SAPUI5 library and development environment.

SAP Press Getting Started with SAPUI5

Companies that want to build mobile-ready SAP Web applications may turn to SAPUI5, which provides the framework for SAP's Fiori apps.

In the SAP Press book Getting Started with SAPUI5, an expert explains how to work with SAPUI5 to develop applications that can meet some of the new challenges facing the modern enterprise. From programming languages and development basics to step-by-step advice for creating advanced customized apps, the book aims to prepare readers for the future of SAP app development.

This excerpt, from Chapter 4: Getting Started in SAPUI5, provides an introduction to the SAP NetWeaver Application Server ABAP, starting with tips for installing the SAPUI5 library.

4 Getting started in SAPUI5

In this chapter, you will learn the basics of Web development on the SAP NetWeaver Application Server ABAP (SAP NetWeaver AS ABAP). This chapter will show you how to install the SAPUI5 library on the back end and how to set up the development environment on the front end.


You will need the following for this chapter:

  • S user for SAP Service Marketplace
  • Access to an ERP system and to an SAP Solution Manager system

For the development of applications in SAPUI5, you need two pieces:

  • An installed SAPUI5 library in the SAP back end
  • A development environment set up on the front-end PC

Local Web server

If you have no SAP back-end system, you can also deploy your applications on a local Web server such as an Apache HTTPD server (as a download). If you have no access to SAP Service Marketplace, you can download the required SAPUI5 files.

This excerpt from Getting Started with SAP UI5 by Miroslav Antolovic is reprinted here with the publisher's permission

For the initial exercise, it is also sufficient to install only Eclipse and the SAPUI5 front-end tools. With this method, you can use the preview feature in Eclipse and display the result there. In this case, you can skip Section 4.1 and proceed directly to Section 4.2. You do not need the two components ABAP in Eclipse and SAPUI5 Team Provider for these local developments.

First, we will deal with the installation of the SAPUI5 library on the ABAP stack of the SAP system.

4.1 Installation of the SAPUI5 library in SAP Business Suite

Downloading the components

SAPUI5 is integrated as an add-on in SAP Business Suite. The installation packages are available in the SAP Software Download Center under Installations and Upgrades • A-Z Index • N • UI Add-On for NetWeaver • <relevant EHP/ERP release> • Installation. The associated support packages are available under Support Packages and Patches • A-Z Index • N • UI Add-On for NetWeaver • <relevant EHP/ERP release>.

Start the Maintenance Optimizer in SAP Solution Manager and select UI ADD-ON 1.0 FOR NW (Figure 4.1) as the product version.

SAP Solution Manager Maintenance Optimizer
Figure 4.1. Maintenance Optimizer in SAP Solution Manager.


Download the calculated support packages and the stack XML. Then unpack the support packages into the EPS directory and install the packages with the SAP Add-On Installation Tool (Transaction SAINT), or perform an update (Transaction SPAM). For detailed installation instructions, see SAP Note 1747308 (Installation Guide: UI Development Toolkit for HTML5 [SAPUI5]).

UI Development Toolkit for HTML5

You can check whether the installation was successful by calling the URL http://<HOST NAME>:<SERVICE>/sap/public/bc/ui5_ui5, in which you replace <HOST NAME> and <SERVICE> with the values of your SAP system. The system should then display the UI Development Toolkit for HTML5 (see Figure 4.2).

SAP UI Development Toolkit
Figure 4.2. Development Toolkit for HTML5.

Activating ICF service

If you obtain a different result, check whether the relevant service is active. To do so, call Transaction SICF, and activate the service default_host/sap/public/bc/ui5_ui5/ if necessary (see Figure 4.3).

Activate ICF service SAPUI5
Figure 4.3. Activating Service.

The examples shown in this book are based on Version SAPUI5 1.00 SP6, current at the time of writing. Use the Product Availability Matrix (PAM), which is available at, to check the current supported version and install it.

After the successful installation of the back-end component, we will now deal with the installation of the SAPUI5 front-end tools.

4.2 Setting up the development environment


The UI development tools are part of the SAPUI5 library. They include a number of Eclipse-based tools and editors that can assist you in the development of SAPUI5 applications. The SAPUI5 Team Provider functions can aid you in checking the applications developed in Eclipse in an ABAP back-end system. The Team Provider has been available since version 7.0.2. For older SAP releases, use the program /UI5/UI5_REPOSITORY_LOAD instead.

4.2.1 Installation requirements


The developer tools for SAPUI5 must be installed separately as an Eclipse plug-in. Before you install Eclipse, check whether the installed Java Runtime version is at least Version JRE 1.6 and, if necessary, perform an update of the Java Runtime Environment before the installation. Choose Start • Control Panel • Programs • Java to open the Java Control Panel. When you click the Info button, the system displays the relevant JRE version. If the version is lower than Version 1.6, perform an update of the JRE version.

4.2.2 Installation

SAPUI5 supports the Eclipse Versions Indigo 3.7, Juno 3.8 and Juno 4.2. The current version, Juno 4.2, will be installed ahead. Always use the current version supported by SAP.

Eclipse IDE for Java EE developers

First, download Eclipse IDE for Java EE Developers. Because SAPUI5 Team Provider works only with the 32-bit version, download the 32-bit version. After unpacking the zip file, you can start Eclipse directly by double-clicking eclipse.exe; Eclipse runs in theworking memory and thus does not have to be installed. You can install the additional components in the Eclipse user interface by following the menu path Help • Install New Software (see Figure 4.4).

SAPUI5 Installing Plug-In Components
Figure 4.4. Installing Plug-In Components.

First, install the required standard plug-ins and then the SAPUI5 tools.

Standard plug-ins

First, install the EMF -- Eclipse Modeling Framework.

Start the Installation Wizard via the menu path Help • Install New Software; under Work with, enter the update page for your Eclipse version (in our example in Figure 4.5). From the list in the middle of the screen, select the option EMF -- Eclipse Modeling Framework, and click Next to confirm your selection.

SAPUI5 Selecting the Eclipse Modeling Framework
Figure 4.5. Selecting the EMF: Eclipse Modeling Framework.

Component selection

On the next screen, you will see the components that are installed in this step. Confirm your selection by choosing Next, accept the license agreement on the next screen and start the installation by choosing Finish. For some components, the system displays a warning that you are installing software that contains unsigned content. Confirm the corresponding dialog box by clicking OK (see Figure 4.6), and proceed with the installation.

Eclipse Modeling Framework Security Warning
Figure 4.6. Security Warning.

After the installation, you are prompted to restart Eclipse. Confirm this dialog box by clicking Yes (see Figure 4.7).

SAPUI5 Restarting Eclipse
Figure 4.7. Restarting Eclipse.

Next, you have to install additional standard plug-ins; the ABAP in Eclipse plug-in requires several standard plug-ins and you will need to install these packages. The list provided here is applicable to the ABAP in Eclipse 2.16 version; check which installation requirements apply to your version in the SAP Notes specified ahead.

Start the Installation Wizard via the menu path Help • Install New Software; under Work with, enter the update page of your Eclipse installation (in this example, the Juno update page). From the list in the middle of the screen, select the following components:

  • EclipseRT Target Platform Components • Jetty Target Components
  • Modeling • EMF -- Eclipse Modeling Framework SDK
  • Modeling • EMF Compare SDK
  • Modeling • EMF Validation Framework SDK
  • Modeling • EMF Model Query SDK
  • Modeling • EMF Model Transaction
  • Modeling • \Graphiti SDK (Incubation)

Follow the Installation Wizard in the same manner as you did for the installation of the EMF. After restarting Eclipse, you can proceed with the installation of the SAPUI5 tools.

SAPUI5 tools

SAPUI5 components

After you have installed the necessary standard components, you can then install the SAPUI5 tools. For development, you need the following three components, which you install in the following sequence:

  • ABAP in Eclipse
  • SAPUI5 Tools IDE Plug-in
  • SAPUI5 Team Prov IDE

First, download the two necessary SAPUI5 components SAPUI5 Tools IDE Plug-in 1.00 and SAPUI5 Team Prov IDE 1.00 from SAP Service Marketplace. The files are available in SAP Service Marketplace under Support Packages and Patches • A-Z Index • N • UI Add-On for NetWeaver • <relevant EHP / ERP release>. Add the current version of the two components to your download basket by clicking Add to Download Basket. For the SAPUI5 Team Provider, you will also need the plug-in for ABAP in Eclipse 2.16. The easiest way to find this is to look in the SAP Software Download Center for "ABAP in Eclipse." Add this file to your download basket. Then, download the three zip files through the SAP Download Manager.

After you have downloaded the files from SAP Service Marketplace, you can install them in Eclipse. Because the SAPUI5 tools were stored locally on your hard drive, you must manually include them in the Installation Wizard. Next to the Work with input field, click on the Add button; choose Archive in the following dialog box to select the path to the downloaded zip file (see Figure 4.8).

Selecting SAPUI5 Tools
Figure 4.8. Selecting SAPUI5 Tools.

Choose OK to confirm your selection (see Figure 4.9).

Installing SAPUI5 Components
Figure 4.9. Installing SAPUI5 Components.

Follow the Installation Wizard again, as described previously, and repeat the process for the two remaining components. This completes the installation of Eclipse IDE for Java EE developers.

The current version, SAPUI5 1.00 SP06, requires Version 2.16 of ABAP in Eclipse. To know which versions you have to install, see the following SAP Notes:

  • Note 1747308 (Installation Guide: UI Development Toolkit for HTML5 [SAPUI5])
  • Note 1718399 (ABAP developer tools for SAP NetWeaver)

© 2015 by Rheinwerk Publishing, Inc. Getting Started with SAPUI5 / Miroslav Antolovic. ISBN 978-1-59229-969-0

About the author:
Miroslav Antolovic works as an SAP developer and trainer at bsc solutions GmbH & Co. KG. He studied Pharmacy at the University of Heidelberg and worked as a Java and Web developer. In 1999, he started as an application developer in Product Lifecycle Management at SAP AG, and in 2004 he moved to REALTECH AG, where he developed SAP add-on products. From 2007 onwards, he worked as Head of SAP Development at SEEBURGER AG, until he finally moved to bsc solutions in 2010. You can contact Miroslav at the following email address: [email protected].

Next Steps

What does SAPUI5 replace?

CA Technologies' two-phase approach to SAP mobility

Will Fiori enable SAP to run simple?

Dig Deeper on SAP UX