SAPUI5 project setup for beginners with HTML views – Part1: Installation
Hi all,
Starting SAPUI5 development isn’t that straightforward as it is for WD ( for example) as an ABAP developer. First of all, developments are in other language called javascript and another environment called eclipse. This is new for most ABAP developers and a basic example of how to setup an SAPUI5 project will boost you all to start with SAPUI5. My intension of this blog is to have one place with all needed information to start developing SAPUI5. This blog will exists out of four parts:
Part2: Navigation and storing data with a global model – full project https://github.com/lemaiwo/SAPUI5-part1
Part3: Navigation and storing data with different models – full project https://github.com/lemaiwo/SAPUI5-part2
Part4: Testing your application
Part1: Installation
- Install Eclipse
- Install SAPUI5
- Download the SAPUI5 SDK
- Find examples
Install Eclipse
To start developing in SAPUI5, you need some new software. First you need to download eclipse Juno or Kepler:
Juno: http://www.eclipse.org/juno/
Kepler: http://www.eclipse.org/kepler/
Install SAPUI5
The next step is to install SAPUI5 in your eclipse. You can find these steps on: https://tools.hana.ondemand.com/#sapui5
In Eclipse, choose in the menu bar Help > Install New Software…
In the Install dialog, enter the following update site URL in the Work with entry field:
Press Enter to display the available features.
Select the desired features under UI Development Toolkit for HTML5 and choose Next.
On the next wizard page, you get an overview of the features to be installed. Choose Next.
Confirm the license agreements and choose Finish to start the installation
Installation
Restart Eclipse:
Download the SAPUI5 SDK
After installing SAPUI5, you can download the SAPUI5 SDK at http://scn.sap.com/community/developer-center/front-end.
Find examples
This is not required for developing SAPUI5 but it has some examples which is very helpful! For example, you have a look a like Fiori application under “test-resources\sap\m\demokit\inbox”. (if you are getting errors by testing the example, check part 3. In part3 will be explained how to test a SAPUI5 application)
You can find the “test-resources” after unzipping HTML5Evaluation_complete_1.16.3_1 and afterworths unzipping the “sapui5-sdk-static” folder. It is possible to browse through all the examples and investigate the source code.
Another reason why I prefer downloading the SDK, the application doesn’t need to send a network request to SAP to load the SDK and just uses my local version. Also when SAP upgrades his online SDK, this has no influence on your application.
You can find more helpful information about the SAPUI5 SDK at https://sapui5.hana.ondemand.com/sdk/. This documentation is mostly about JS Views, for HTML views you can find more in the “test-resources”.
After everything is installed you can go to the next step and start development!
Next step: Part2: Navigation and storing data with a global model
Kind regards,
Wouter
Hi Wouter,
Great blog series on how to start a SAPUI5 project and use the navigation capabilities provided by the framework. Thanks for sharing and see you at SAP Inside Track Netherlands!
Cheers,
Leo
Thanks! See you there!
Kind regards,
Wouter
Nice blog series Wouter, thanks.
Thank you very much !! I look forward to be able to help people with UI5 development like you just did to me ! 🙂
Excellent stuff wouter.
Thanks,
Syam
Dear All
I am using Version NWDS SAP NetWeaver 7.3 SP10 PAT0001.
I have tried both of below mentioned links but giving error at the end.
Please let me know, how to install it for above mentioned version.
Hi Adnan,
The url's are specific for Eclipse Kepler or Juno. When using NWDS, you could be missing some plugins. Probably you should first install some dependancies.
Can you send an error message?
Kind regards,
Wouter
Got the solution.
Go to https://service.sap.com -> SAP Support Portal -> SAP Software Download Center -> Support Packages and Patches -> A - Z index -> N -> UI ADD-ON FOR SAP NETWEAVER -> UI ADD-ON 1.0 FOR NW 7.03 -> Support Package Stack Download. The file that you need is at the bottom of the list: SAPUI5 TOOLS IDE PLUGIN 1.00. Make sure you pick the latest version (currently this is SPS 02).
Download Only -> SAPUI5 Tool PlugIn
http://scn.sap.com/community/bpm/blog/2013/01/13/developing-sap-ui5-applications-in-netweaver-developer-studio-nwds
Hi Adnan,
it is not possible to install the SAP HANA tools or ABAP tools in NWDS as they require Eclipse 4.2-3. NWDS is 3.x but the NWDS plugin you proposed helps 🙂
Thanks Wouter. This is a cool blog to get started with.
Hi Wouter,
Great stuff to kick off SAPUI5 developments for beginners like me.
Thanks,
Hemendra
Thanks!
Also check the tutorial with routing: http://scn.sap.com/community/developer-center/front-end/blog/2014/05/04/get-started-with-sapui5-and-routing
Routing is a better way to navigate. You'll still need the models for passing data.
Enjoy!
Kind regards,
Wouter
Hi Wouter,
Its very useful for me, thanks a lot.
I just followed your steps, i have faced some issues below:
1. jre-6 is not supported for this SAPUI5 application project when i am using Tomcat server 7 to run this app.
2. i installed jre7, after i am getting the error like as "sap.ui5.properties file not found" and "JSR 356 WebSocket (Java WebSocket 1.0) support is not available when running on Java 6. To suppress this message, run Tomcat on Java 7, remove the WebSocket JARs from $CATALINA_HOME/lib or add the WebSocketJARs to the tomcat.util.scan.DefaultJarScanner.jarsToSkip property in $CATALINA_BASE/conf/catalina.properties. Note that the deprecated Tomcat 7 WebSocket API will be available. "
Kindly help me out how to proceed on further.
My system details:
OS: Windows 7 64 bit
JRE : 6 and 7
Eclipse : Kepler V4.3
Regards,
Santhosh K
Hi Santosh,
I haven't used tomcat for running SAPUI5 applications so I have no experience with this issue.
What you could do is use XAMPP, as I described in step4:
SAPUI5 project setup for beginners with HTML views - Part4: Testing your application
Kind regards,
Wouter
Nice blog post!
Next step: bring it to the cloud with SAP HANA Cloud Platform: http://scn.sap.com/community/developer-center/cloud-platform/blog/2014/05/07/lightweight-html5-apps-and-git-on-sap-hana-cloud-platform
Best,
Rui
Excellent work friend,
let me know how much effort i put on learning SAP UI5,
Thanks and Regards
Sudhakar
Hi Wouter,
It's really great blog for SAPUI5 starter and looking forward for more update on SAPUI5.
regards,
Barnendu
Hi Wouter
Excellent Blog!! Very Exciting for the starters.
I have a question I would like to make a app of the particular book, such that the book would be readable with additional features for notes or comments. Is this possible using OpenUI5? If yest please suggest me the steps?
Thanks
Hi Batish,
First of all thanks for the feedback!
I think everything is possible in UI5 🙂 It's a HTML5/javascript framework. You'll have to think how you could use the default layout controls. But I think that you'll have to create some custom controls that will fit your needs.
I suggest that you start looking in the SAPUI5 explorer to find the controls to build your app:
SAPUI5 Explored
Or look for controls to start from and extend these.
Kind regards,
Wouter
Hi Wouter,
thanks for this BLOG. I downloaded the SDK, but how can I embed it into Eclipse, beause I want to start it from there for debugging reasons.
Or in another way: what do I have to do after downloading the SDK? Maybe I dont't have to import it in Eclipse.
Thanks, Thomas
Hi Thomas,
I downloaded the SDK and stored it on my localhost XAMPP. In my UI5 project, I change the SAPUI5 bootstrap to the SDK on my localhost. My eclipse workspace is also stored on my XAMPP folder so all my projects are immediately on my localhost and accessible from the browser.
Kind regards,
Wouter
Hi Wouter Lemaire
Thanks for summing up all the details in a single blog and sharing it with us.Best asset for SAPUI5 Beginners.
Regards,
Manju
thanks for uploading
Hello Sir,
I have a problem while installing a software of ui5 html, when i click next after check on ui5 for html then its take some time to install software but its encountered a problem
kindly solve my problem
Thanks in advance..
Regards, Niraj 🙂
Hi Niraj,
I was also getting same error but now it is working. initially JDK compiler was set 1.4 but in my system 1.6 was there. so just i have made JDK compiler 1.6.
Please follow the below steps for correct setting-
Window Menu->Preference ->Compiler->JDK Compiler
Choose the compiler version as you have installed in system
Regards,
Rami
Hello Wouter,
I saw the video"ABAP to Fiori and back using OO" from the UI5con 2016 on YoutTube.
The example in the video with ABAP Classes, Gateway Implementation and UI5.
Is the project available on GitHub or could please you send it to me by E-Mail?
Many Regards,
Wolfram
Only the UI5 code is available online, it's explained in this blog with some code examples:Â https://blogs.sap.com/2015/12/28/ui5-classes-and-objects/
Gr,
Wouter