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

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