SAP UI5 - Development Kit

SAP UI5 development kit for HTML5 provides you an environment for the development of web-based applications and it provides an application with one consistent user experience. Web apps that you develop with SAP UI5 are responsive across browsers and devices, and they can run on smartphones, tablets, and desktops.

The UI controls automatically adapt themselves to the capabilities of each device.

You can use SAP UI5 on the following platforms −

  • SAP HANA Cloud Platform
  • SAP NetWeaver for SAP NetWeaver 7.4 or higher
  • User interface add-on for SAP NetWeaver for SAP NetWeaver Application Server 7.3x

You can deploy the application on the server that includes storing the libraries and getting data from the database. You can use the NetWeaver Application server or HANA Cloud platform for application deployment, and data can be accessed by a business application using the OData model using Gateway. Take a look at the following illustration.

Development Kit

When a user sends a client request from his mobile/laptop, a request is sent to the server to load the application in a browser, and data is accessed via database and the relevant libraries are accessed.

To build a UI5 application, you can download the SAP UI5 developer’s tools of Eclipse. Once you download, you can unzip the file and deploy on the web server. For ABAP, you can install a UI Add-On for SAP NetWeaver and this also includes UI5 Theme Designer.

Prerequisites for SAP UI5

To install and update UI5 development toolkit for HTML5, you should meet the following prerequisites −

Eclipse Platform Mars (4.5)
Operating System Windows OS (XP, Vista, 7 or 8/8.1)
Java Runtime JRE Version 1.6 or higher, 32-Bit or 64-Bit

Only relevant when installing the SAP UI5 ABAP Repository Team Provider

  • For Windows OS: SAP GUI for Windows 7.30/7.40

Only relevant when installing the SAP UI5 ABAP Repository Team Provider

For Windows OS: DLLs VS2010 for communication with the back-end system is required

Note: Install either the x86 or the x64 variant, accordingly to your 32 or 64-Bit Eclipse installation

Let us now proceed and discuss how you can install the SAP UI5 Development Kit in your system.

Step 1 − To install JDK, go to and search for the required JDK version.

Java SE Development Kit

Step 2 − Download and run the setup. You will get a message as shown in the following screenshot.

Java SE

Step 3 − To install Eclipse, go to

Eclipse IDE

Step 4 − Extract the file as shown in the following screenshot.

Extra Compressed

Step 5 − To run the installation, go to the extracted folder and run the application file as shown in the following screenshot.

Eclipse Data Created

Step 6 − To install SAPUI5 tools, go to Eclipse → Help → Install New software.

You can install directly using the URL or by entering the path of UI5 demo kit.

Step 7 − Next, enter the URL in install dialog


Step 8 − To see the available features. Press the ENTER key. You can select the features and click on Next. It will display the list of features to be installed → Click Next.

Step 9 − Accept the license agreement and click Finish to start the installation.

License Agreement SAP Development Tools

Step 10 − Download UI Development Kit for HTML 5 from the following link − and extract the content in the same folder.

SAP UI5 Developer

Step 11 − Start the Eclipse environment. Go to Help → Install New Software.


Step 12 − Click Add → Local.

Step 13 − Next, navigate to the local update site location and select the tool-update site folder with the folder where you extracted the HTML5 Development toolkit as the update source.

Step 14 − Select all plugins and features for installation.


Step 15 − Select the dialog to “Contact all update sites” during the installation to find the required software.

Contact Updates

Step 16 − Click the Finish button to complete the setup. Restart Eclipse.

Java EE

Step 17 − You can verify the installation by creating a new SAPUI5 Application Project via Eclipse menu File → New → Other at the bottom. Select SAP UI5 Application Development folder and expand to create a new project.


Step 18 − Enter the project name, select library and you can check the box to create an initial view.

Project Name

Step 19 − Create a view using some sample code in the project. Enter the name of the view and click the Next button.

Create New View

Step 20 − Select the development paradigm and click on Finish. You will see a new SAPUI5 development project in a new window as shown in the following screenshot.

Development Paradigm

Now, to present your application or run it in production, you can deploy your SAPUI5 application on the tomcat server. If you don’t have a tool like MAVEN, in that you can use the export option to export the project manually. Right-click on Project → Export.

Step 21 − Enter the destination path where you want to place the war file.

WAR Export

Next, copy the war-File to webapps directory of your apache tomcat. You can access your application by going to this path - http://localhost:8080/<your_app>/

Note − In a normal scenario, many SAP projects run in Internet Explorer but for SAPUI5 development it is recommended to use Google Chrome or Firefox with firebug plugin as both systems allow the use of tools and plugins to debug JavaScript, as well as use HTML and CSS.