Skip to Content
Author's profile photo Kemin Li

How to export UI5 development program from SAP WEB EDI to Eclipse

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


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


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


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


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


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


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/”


_initODataModel: function(sServiceUrl) {“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);




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



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

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      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.


      Author's profile photo Kemin Li
      Kemin Li
      Blog Post Author

      Hi Jeremy,

        1. did you make the change as described in step 8.?

        2. did you configure a web server like tomcat to run the UI5?

        3. probably you need to change src="resources/sap-ui-core.js" in the index.html to  src=""

      Author's profile photo Former Member
      Former Member

      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


      Author's profile photo Former Member
      Former Member

      By the way the service url path is to be defined in the manifest.json :

      Screen Shot 2016-02-20 at 21.14.28.png

      Yo get rid of this error  :

      Screen Shot 2016-02-20 at 21.13.57.png


      Author's profile photo Former Member
      Former Member

      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,


      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      what is the issue?

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Jayakrishnan Chandramohan
      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

      Author's profile photo Kemin Li
      Kemin Li
      Blog 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.



      Author's profile photo zongjie zhang
      zongjie zhang

      Hi kemin,

          I follow your step ,but it had this error:   Uncaught ReferenceError: sap is not defined How can I fix this ?

      Author's profile photo Kemin Li
      Kemin Li
      Blog Post Author

      Check if sap library is put in below folder.

      <script id="sap-ui-bootstrap" src="resources/sap-ui-core.js"
      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan

      Yes what Kemin mentioning is correct, check your index.html and resources section

      Author's profile photo Matthias Schmalz
      Matthias Schmalz


      please note that the SAPUI5 Eclipse tools are deprecated and not recommended since they are highly outdated and missing important functionality like static code checks, packaging of preload bundles and many more. Support for Eclipse tools is reduced to a minimum and the clear recommendation is to move to Web IDE.

      In fact setting up a Cloud Connector and doing the necessary configuration is about 30 minutes of work (unless you don't need Single-Sign-On or principal propagation).

      Additionally Web IDE meanwhile offers a personal edition which does not require cloud connector at all. See for details.

      Best regards