Skip to Content

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

    To report this post you need to login first.

    25 Comments

    You must be Logged on to comment or reply to a post.

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

      (0) 
      1. Wouter Lemaire 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

        (0) 
        1. 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

          (0) 
      2. Oliver Buschmann

        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 🙂

        (0) 
    2. Santhosh K

      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

      (0) 
    3. Batish Momin

      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

      (0) 
      1. Wouter Lemaire 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

        (0) 
    4. 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

      (0) 
      1. Wouter Lemaire 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

        (0) 
    5. Niraj Sinha

      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 🙂

      (0) 
      1. 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

        (0) 

    Leave a Reply