SAP UI5 Development Kit - SAP UI5

What is SAP UI5 - Development Kit?

SAP UI5 development kit for HTML5 creates 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 immediately automatically adjust 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
Here you can install application on the server which 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. Here’s the illustration.
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.
Download the SAP UI5 developer’s tools of Eclipse to build a UI5 application. Once you download, you can unzip the file and deploy on the web server. You can install a UI Add-On for SAP NetWeaver and this also includes UI5 Theme Designer in ABAP.

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,
Note: Install either the x86 or the x64 variant, accordingly to your 32 or 64-Bit Eclipse installation
Here’s the process explains 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.
Step 2 − Download and run the setup. You will get a message as shown in the following screenshot.
Step 3 − To install Eclipse, go to
Step 4 − Extract the file as shown in the following screenshot.
Step 5 − To run the installation, go to the extracted folder and run the application file as shown in the following screenshot.
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.
Step 10 − Download UI Development Kit for HTML 5 from the following link − and extract the content in the same folder.
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.
Step 16 − Click the Finish button to complete the setup. Restart Eclipse.
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.
Step 19 − Create a view using some sample code in the project. Enter the name of the view and click the Next button.

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

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

SAP UI5 Topics