Skip to Content

SAP WEB IDE has became a useful tool to develop Fiori UI5 APP program. But currently WEB IDE development environment requires SAP HANA cloud connector to be installed on either customer premise or SAP Hana cloud platform, which makes many customers and companies hard to build a WEB IDE development enviroment. As WEB IDE incorporates a lot of user-friendly and userful UI5 development features, many developers tend to use WEB IDE as a tool to generate a Fiori UI5 program then export the program to eclipse, then modify the program in eclipse, finally deploy the program in SAP ABAP server.

In this blog I will use north wind odata to generate a UI5 program in WEB IDE, export it to eclipse and then modify the program and run the UI5 program on Apache tomcat test server.

Prerequisities:  set up northwind odata destination on SAP Hana trial cloud platform link

 

1. create a new project in WEB IDE and choose SAP Fiori full screen Application

/wp-content/uploads/2015/08/1_777284.jpg

2. specify project name ‘zproductdemo’

3. in data connection screen, choose ‘service URL’ and ‘Northwind Odata service’, specify /V3/northwind/northwind.svc in the input field

/wp-content/uploads/2015/08/2_777286.jpg

4 choose properties of products odata collection to be displayed in Main page and second page.

/wp-content/uploads/2015/08/3_777314.jpg

5. After the project is generated, export the project to a zip file

/wp-content/uploads/2015/08/4_777315.jpg

6. Open Eclipse and create empty UI5 application project with the name “zproductdemo”

/wp-content/uploads/2015/08/5_777316.jpg

7. import the UI5 program from the zip file and make sure into folder is ‘zproductdemo/WebContent’ and overwriting the existing file

/wp-content/uploads/2015/08/7_777331.jpg

8. After I import the project, open Component.js. Change serviceUrl as below and remove V2 at odatamodule method

serviceConfig: {

  name: “NorthwindModel”,

  serviceUrl: “proxy/http/services.odata.org/V3/Northwind/Northwind.svc/”

  }

_initODataModel: function(sServiceUrl) {

  jQuery.sap.require(“zproductdemo.util.messages”);

  var oConfig = {

  metadataUrlParams: {},

  json: true,

  // loadMetadataAsync : true,

  defaultBindingMode: “TwoWay”,

  defaultCountMode: “Inline”,

  useBatch: true

  };

  var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, oConfig);

  oModel.attachRequestFailed(null, zproductdemo.util.messages.showErrorMessage);

  this.setModel(oModel);

  }

});

9. add the UI5 program to apache tomcat server and run it on server. On firefox you can get below products list UI5 APP

/wp-content/uploads/2015/08/9_777342.jpg

/wp-content/uploads/2015/08/10_777343.jpg

Then based on the WEB IDE UI5 program, you can develop further functions in eclipse.

I hope this blog is useful for you and Good Luck

To report this post you need to login first.

12 Comments

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

  1. Lauraire Jérémy

    Thanks Kemin LI! Very useful.

    I am trying to do exactly the same process with the master-detail application template in WebIDE. Basically :

    1 – Generate code from WebIDE based on Master-details template -> OK

    2 – Import zip file -> OK

    3 – Create empty SAPUI5 application in Eclipse -> OK

    4 – Import in Eclipse zip file -> work but can not run the app (it gives an empty screen and no console error).

    Any thoughts? A tutorial would be awesome.

    Jérémy.

    (0) 
  2. Lauraire Jérémy

    Hi Kemin and all,

    Thanks for your help. I have finally managed to make it work… but I must admit that I can not explain exactly why. 😕

    I have :

    • fully reinstalled Eclipse with Mars 4.5 version (I had Luna so far) with its SAP HANA Cloud Platform Tools,
    • defined a new SapUI5 project and imported the WebIde Master-details sources,
    • on a different computer……….,
    • and no I have not make the change as described in step 8.

    I have also imported the source directly into the project’s root instead of the WebContent folder as you can see on the pic below.

    And “voilà”! 😎

    Screen Shot 2016-02-20 at 20.54.23.png

    J.

    (0) 
  3. Kenzi Sibuma

    Hi Kemin Li, Lauraire Jérémy,

    I need your help on this. I followed the steps but I’m still stuck on the running of the app.

    Still cannot run the app.

    Thank you,

    Kenz

    (0) 
      1. Kenzi Sibuma

        Hi JK,

        I tried to develop using SAP Web IDE on HANA Cloud Platform using my laptop. Then export the Fiori App.

        Then transfer the ZIP file to client laptop then using eclipse import the new file app.

        The issue is the new ZIP file has a different file structure than the one shown here. There is no index.html. Component.js does not contain the URI, it is in manifest.json. This maybe due to different version of SAP web IDE on the screenshot versus what I used in the Export of ZIP file.This new version is now using mock server and not mock data.

        With this new version of SAP web IDE. I don’t know what to adjust to make it work on eclipse.

        (0) 
        1. Jayakrishnan Chandramohan

          Actually it depends what type of application you have chosen in Web IDE. and if you are connecting with any back-end data, then you need to specify that in your web.xml file.

          But if you don`t have any server info, First you create one new project in your eclipse without an initial view. then you just do the extract the web IDE project and copy the files inside the web app folder and paste those files inside the web content on your eclipse.

          it will work

          (0) 
        2. Kemin Li Post author

          Hi Kenzi,

             Could you please create a general project(not SAP UI5  Application project) without any sub folder? then import the web ide program to the project. you should not have any issue with this process.

          Regards,

          Kemin

          (0) 
    1. Kemin Li Post author

      Check if sap library is put in below folder.

      <script id=”sap-ui-bootstrap” src=”resources/sap-ui-core.js”
      (0) 

Leave a Reply