You are on page 1of 21

SAP UI5 Training Sessions

Developing Sample SAP UI5
Step-by-step Guide

January 2014

SAP UI5 Training Sessions

January 2014

Step 1: Download Eclipse 4.2 or higher version from Below is the
direct link to download eclipse 4.2 JUNOs.
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

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 .

we can rely on below menu options .SAP UI5 Training Sessions January 2014 We can see below typical options on the home of eclipse For further options and home screen customization.

hana. Click on Install New Software as shown below to install plug-ins Enter https://tools. .com/juno at Work with input options and hit enter to see available plug-ins.ondemand.SAP UI5 Training Sessions January 2014 Step 4: Install required plug-ins for UI5 application development and ABAP development.

netweaver. Before doing that.hana. HANA Cloud Integration and oData etc. you will be able to develop UI5 application from your Step 5: Your system is now ready to create SAP UI5 application. deploy UI5 project on your ABAP system. please check . after installing these plug-ins.. UI5 Development. If you are trying to update versions then you can proceed with below option instead of above: (Now. ABAP on eclipse and also access HANA Cloud Integration Tools.SAP UI5 Training Sessions January 2014 Select all and click on Next> to validate and install these plug-ins.ondemand. You can see plug-ins related to ABAP Development..ondemand. review various controls and scope of SAP UI5 library at https://sapui5. For more details on HANA Cloud Integration Tools and 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 .

Enter View Name (any name) as shown below and click on Next or Finish. folder where your view is going to store and development model mentioned on the same screen. You can see your project name.SAP UI5 Training Sessions January 2014 Enter your project name (any unique name) at Project Name. . as shown below and click on Next.

Click on Finish to proceed further. .SAP UI5 Training Sessions January 2014 You can check below summary on your project creation if you click on Next button on previous screen.

HTML): Controller: Default controller will be created under WebContent folder as shown below with various events (ex: Initialization. We can compare this development pattern with traditional MVC architecture. HTML Page (or Index.SAP UI5 Training Sessions January 2014 You can see new folder created under your project explorer window.. onBeforeRendering etc. Step 7: Understanding default code generated Project creation Wizard. .).. We can leverage advantages of MVC patterns in UI5 application development.

js to load content. https://sapui5.mvc.SAP UI5 Training Sessions January 2014 View: View will be generated with very less amount of code i. Summary: Index.ondemand. Green shaded function can be used to build the content.core.e.ui. to connect with Controller and to build the content. Check API reference for more details about view. html .netweaver.HTML page will be home page for your application that internally call/refer to view.

Select Application Header under Controls section and understand various sections about this control. Click on Show Source link and copy this code. Go to SAP UI5 library as described in Step 5. . Note that.SAP UI5 Training Sessions January 2014 Step 8: Develop sample application. each control will have example and show source link under each example.

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

January 2014 . Run this application as shown below.SAP UI5 Training Sessions Save this application.

we can see result/output of the application in new session. Please check this link to understand system requirement to enable SAP connection. Click on Share Project option as shown below. (Your eclipse should have ABAP Development plug-ins. 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. You can use PlaceAt keyword to append one by one control on the same page.ondemand. Team Provider Plug-ins to perform this action). You can go back to view and add other controls.SAP UI5 Training Sessions January 2014 As shown below.hana. You can click on below button to open same in browser. .

SAP UI5 Training Sessions Click on Next Click on Browse to select your SAP system. January 2014 .

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.

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.

BSP Description and Package Name. we need to select transport number for same). Click on Next. As we are not pointed to any package. if we proceed with Package. you just need to click on Finish in the next screen (otherwise.SAP UI5 Training Sessions January 2014 Enter BSP Name (starting with Z). .

You can see progress of the submission process in progress window. January 2014 . Click on below Submit Select everything and click on Finish Button.SAP UI5 Training Sessions Step 10: Submit UI5 Application to BSP that we created in Step 9.

like above. Eclipse Download Center http://www. with HTML5 toolkit or SAP UI5 requires basic understanding on UI Development Toolkit for HTML5 Developer Center on SCN http://scn. JavaScript and Eclipse Development Studio with UI5 related plug-ins installed in it. Conclusion: To develop simple application. run this UI5 application on SAP server as shown below. you can go and check your BSP in your SAP system. I am going to publish another document which will explain how we can perform CRUD operations on server with Gateway (IF YOU HAVE ANY QUESTIONS ON CONTENT OF THIS DOCUMENT THEN PLEASE CONTACT ME AT ninuganti@deloitte.hana. 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.SAP UI5 Training Sessions January 2014 Now. n Naveen Inuganti UI development toolkit for HTML5 https://sapui5. As part of this training. References: SAP Development Tools for Eclipse https://tools.ondemand.