Skip to Content
Author's profile photo Wouter Lemaire

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:

Part1: Installation

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…

install new software.png


In the Install dialog, enter the following update site URL in the Work with entry field:

  • https://tools.hana.ondemand.com/kepler for Eclipse Kepler (4.3)
  • https://tools.hana.ondemand.com/juno for Eclipse Juno (4.2)
  • Press Enter to display the available features.

    Select the desired features under UI Development Toolkit for HTML5 and choose Next.

    select software.png

    On the next wizard page, you get an overview of the features to be installed. Choose Next.

    install details.png

    Confirm the license agreements and choose Finish to start the installation

    /wp-content/uploads/2013/11/license_319443.png

    Installation

    /wp-content/uploads/2013/11/installation_319444.png

    Restart Eclipse:

    /wp-content/uploads/2013/11/restart_319445.png

    Download the SAPUI5 SDK

    After installing SAPUI5, you can download the SAPUI5 SDK at http://scn.sap.com/community/developer-center/front-end.

    /wp-content/uploads/2013/11/sapui5sdkdownload_319313.png

    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)

    /wp-content/uploads/2013/11/example_319446.png

    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

    Assigned Tags

        27 Comments
        You must be Logged on to comment or reply to a post.
        Author's profile photo L. van Hengel
        L. van Hengel

        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

        Author's profile photo Wouter Lemaire
        Wouter Lemaire
        Blog Post Author

        Thanks! See you there!

        Kind regards,

        Wouter

        Author's profile photo Johannes Schnatz
        Johannes Schnatz

        Nice blog series Wouter, thanks.

        Author's profile photo Former Member
        Former Member

        Thank you very much !! I look forward to be able to help people with UI5 development like you just did to me ! 🙂

        Author's profile photo Syam Babu
        Syam Babu

        Excellent stuff wouter.

        Thanks,

        Syam

        Author's profile photo Adnan Maqbool
        Adnan Maqbool

        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.

        Author's profile photo Wouter Lemaire
        Wouter Lemaire
        Blog Post Author

        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

        Author's profile photo Adnan Maqbool
        Adnan Maqbool

        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

        Author's profile photo Former Member
        Former Member

        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 🙂

        Author's profile photo Former Member
        Former Member

        Thanks Wouter. This is a cool blog to get started with.

        Author's profile photo Hemendra Sabharwal
        Hemendra Sabharwal

        Hi Wouter,

        Great stuff to kick off SAPUI5 developments for beginners like me.

        Thanks,

        Hemendra

        Author's profile photo Wouter Lemaire
        Wouter Lemaire
        Blog Post Author

        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

        Author's profile photo Former Member
        Former Member

        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

        Author's profile photo Wouter Lemaire
        Wouter Lemaire
        Blog Post Author

        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

        Author's profile photo Rui Nogueira
        Rui Nogueira

        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

        Author's profile photo Rama Sudhakar
        Rama Sudhakar

        Excellent work friend,

        let me know how much effort i put on learning SAP UI5,

        Thanks and Regards

        Sudhakar

        Author's profile photo Former Member
        Former Member

        Hi Wouter,

        It's really great blog for SAPUI5 starter and looking forward for more update on SAPUI5.

        regards,

        Barnendu

        Author's profile photo Former Member
        Former Member

        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

        Author's profile photo Wouter Lemaire
        Wouter Lemaire
        Blog Post Author

        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

        Author's profile photo Thomas Knobloch
        Thomas Knobloch

        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

        Author's profile photo Wouter Lemaire
        Wouter Lemaire
        Blog Post Author

        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

        Author's profile photo Manjunatha Kanakuppi
        Manjunatha Kanakuppi

        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

        Author's profile photo T Fdo
        T Fdo

        thanks for uploading

        Author's profile photo Former Member
        Former Member

        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 /wp-content/uploads/2015/01/hh_626338.png

        kindly solve my problem

        Thanks in advance..

        Regards, Niraj 🙂

        Author's profile photo Rami Reddy
        Rami Reddy

        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

        Author's profile photo Wolfram Knan
        Wolfram Knan

        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

         

        Author's profile photo Wouter Lemaire
        Wouter Lemaire
        Blog Post Author

        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