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

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 −

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 Oracle.com 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 www.Eclipse.org/downloads

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 https://tools.hana.ondemand.com/mars

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 −

http://scn.sap.com/community/developer-center/front-end 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.