SAP UI5 Training Sessions

Developing Sample SAP UI5

Application
Step-by-step Guide

January 2014

SAP UI5 Training Sessions

January 2014

Step 1: Download Eclipse 4.2 or higher version from www.eclipse.org. Below is the
direct link to download eclipse 4.2 JUNOs.
http://www.eclipse.org/downloads/packages/release/juno/sr2
You can download below package based on your operating system:

Eclipse will be used to develop client side code for SAP UI5 application. In addition
to that, you can do ABAP development within Eclipse (will be explained in later
steps of this document). For more details about eclipse, please check
http://www.eclipse.org/org/

Step 2: Extract downloaded eclipse files to your C:/ drive.

SAP UI5 Training Sessions

Step 3: Click on .exe file to open eclipse

Select workspace to store your projects.

January 2014

SAP UI5 Training Sessions

January 2014

We can see below typical options on the home of eclipse

For further options and home screen customization, we can rely on below menu
options

SAP UI5 Training Sessions

January 2014

Step 4: Install required plug-ins for UI5 application development and ABAP
development. Click on Install New Software as shown below to install plug-ins

Enter https://tools.hana.ondemand.com/juno at Work with input options and hit

enter to see available plug-ins.

SAP UI5 Training Sessions

January 2014

Select all and click on Next> to validate and install these plug-ins. You can see
plug-ins related to ABAP Development, UI5 Development, HANA Cloud Integration
and oData etc..,
If you are trying to update versions then you can proceed with below option instead
of above:

(Now, after installing these plug-ins, you will be able to develop UI5 application
from your eclipse, deploy UI5 project on your ABAP system, ABAP on eclipse and
also access HANA Cloud Integration Tools. For more details on HANA Cloud
Integration Tools and SDK, please check https://tools.hana.ondemand.com/#cloud)
Step 5: Your system is now ready to create SAP UI5 application. Before doing that,
review various controls and scope of SAP UI5 library at
https://sapui5.netweaver.ondemand.com/sdk/

SAP UI5 Training Sessions

January 2014

Step 6: Click on File->New->Project in your eclipse

Select Application Project under SAP UI5 Application Development and click on Next
button

SAP UI5 Training Sessions

January 2014

Enter your project name (any unique name) at Project Name, as shown below and
click on Next.

Enter View Name (any name) as shown below and click on Next or Finish. You can
see your project name, folder where your view is going to store and development
model mentioned on the same screen.

SAP UI5 Training Sessions

January 2014

You can check below summary on your project creation if you click on Next button
on previous screen. Click on Finish to proceed further.

SAP UI5 Training Sessions

January 2014

You can see new folder created under your project explorer window.

Step 7: Understanding default code generated Project creation Wizard.

HTML Page (or Index.HTML):

Controller:
Default controller will be created under WebContent folder as shown below with
various events (ex: Initialization, onBeforeRendering etc..,). We can compare this
development pattern with traditional MVC architecture. We can leverage
advantages of MVC patterns in UI5 application development.

SAP UI5 Training Sessions

January 2014

View:
View will be generated with very less amount of code i.e. to connect with Controller
and to build the content. Green shaded function can be used to build the content.

Summary: Index.HTML page will be home page for your application that internally
call/refer to view.js to load content. Check API reference for more details about
view, controller.
https://sapui5.netweaver.ondemand.com/sdk/#docs/api/symbols/sap.ui.core.mvc.
html

SAP UI5 Training Sessions

January 2014

Step 8: Develop sample application. Go to SAP UI5 library as described in Step 5.

Select Application Header under Controls section and understand various sections
about this control.

Click on Show Source link and copy this code. Note that, each control will have
example and show source link under each example.

SAP UI5 Training Sessions

January 2014

Paste above code under Create Content function of the View.JS in your eclipse
project.
As shown below, we made one minor change to copied code i.e. replace sample1
with content as we are referring content in HTML page. You can also use
return(oAppHeader) which works fine in this case.

SAP UI5 Training Sessions

Save this application.

Run this application as shown below.

January 2014

SAP UI5 Training Sessions

January 2014

As shown below, we can see result/output of the application in new session. You
can click on below button to open same in browser.

You can go back to view and add other controls. You can use PlaceAt keyword to
append one by one control on the same page.
Hint: Controls under layout section are useful to design webpage or application with
complete control on various screen elements.
Step 9: Sending UI5 application to SAP NetWeaver AS. (Your eclipse should have
ABAP Development plug-ins, Team Provider Plug-ins to perform this action). Please
check this link to understand system requirement to enable SAP connection.
https://tools.hana.ondemand.com/#abap
Click on Share Project option as shown below.

SAP UI5 Training Sessions

Click on Next

Click on Browse to select your SAP system.

January 2014

SAP UI5 Training Sessions

Click on Next after selecting SAP system.

this

Contact your system administrator if you are facing any issues with this.

January 2014

SAP UI5 Training Sessions

January 2014

Enter user name and password to access selected system. Click on Next button.

Contact your System Admin/Security team if you any Authorization related errors
here.

SAP UI5 Training Sessions

January 2014

Enter BSP Name (starting with Z), BSP Description and Package Name. Click on
Next.

As we are not pointed to any package, you just need to click on Finish in the next
screen (otherwise, if we proceed with Package, we need to select transport number
for same).

SAP UI5 Training Sessions

Step 10: Submit UI5 Application to BSP that we created in Step 9.

Click on below Submit

Select everything and click on Finish Button.

You can see progress of the submission process in progress window.

January 2014

SAP UI5 Training Sessions

January 2014

Now, you can go and check your BSP in your SAP system. Also, run this UI5
application on SAP server as shown below.

Conclusion: To develop simple application, like above, with HTML5 toolkit or SAP
UI5 requires basic understanding on HTML, JavaScript and Eclipse Development
Studio with UI5 related plug-ins installed in it. However, having better
understanding on SAP UI5 SDK controls and its API reference will help to come up
with desired outcome in your real time applications.
As part of this training, I am going to publish another document which will explain
how we can perform CRUD operations on server with Gateway Services.
References:
SAP Development Tools for Eclipse
https://tools.hana.ondemand.com/#
UI development toolkit for HTML5
https://sapui5.netweaver.ondemand.com/sdk/
Eclipse Download Center
http://www.eclipse.org/downloads/
UI Development Toolkit for HTML5 Developer Center on SCN
http://scn.sap.com/community/developer-center/front-end

(IF YOU HAVE ANY QUESTIONS ON CONTENT OF THIS DOCUMENT THEN PLEASE CONTACT ME AT

ninuganti@deloitte.com)

Naveen Inuganti