In this blog post we will show how you can migrate ui5 app that was developed in Eclipse into Web IDE.

Web IDE is the recommended tool for developing/extending/deploying UI5 apps either to the cloud or to your on-premise network. More details about WebIDE can be found here: Getting Started with SAP Web IDE

Prerequisites

• SAP Web IDE instance – either trial or production (you can get one here: SAP HANA Cloud Platform )
• Eclipse with UI5 Development tools SAPUI5 SDK – Demo Kit
• UI5 app that was written in eclipse (if you can’t find one you can download and import an example from here: GitHub – ranhsd/MyLastEclipseUIApp)
• Access to SAP NetWeaver Gateway System. In this blog we will use ES4 system. You can create new account here: Sign up and get started with the SAP Gateway – Demo Consumption System

Let’s get started!

The app that we will migrated is a very simple one. This app will contain only one table elements which display data from ES4 backend system. The service that we will use is GWDEMO http://sapes4.sapdevcenter.com/sap/opu/odata/IWBEP/gwdemo and our app will output the list of sales order items which are exists under the SalesOrderCollection.

Eclipse project structure vs. WebIDE project structure

Our eclipse project structure looks like the following:

While the structure for the same project in Web IDE will look like the following:

From the images above we can immediately see the differences. A new project in eclipse contains very basic files of view, controller and index.html while a new project in WebIDE contains more artifacts which are relevant like Component.js, manifest.json etc.

It is possible to create the same structure in eclipse but it will require some effort, something that WebIDE can give us for “free”.

Note! UI5 project structure is influence by the UI5 runtime version. The project structure that we see above is the project structure for the latest and greatest version of UI5.

In this blog we will show how you can import an app that was developed in eclipse to WebIDE and run it without changing the project structure.

Export from eclipse and import to WebIDE

In eclipse

• Select the WebContent folder under the root folder
• Right click > Export

  

• In the dialog select Archive File and click Next
• Uncheck the WebContent folder, expand it and select only the mylasteclipseui5app folder and index.html file which appear on the right side. Also make sure that Save in zip format is selected.
• Specify under To archive file the path where the zip file will be saved. Make sure that the name of the zip file is MyLastEclipseUI5App.zip (relevant for this blog post)

  

• Click on Finish

In Web IDE

• Right click on Workspace folder > Import > From File System
• In the dialog browse for the file MyLastEclipseUI5App.zip (the one that was exported from eclipse) and make sure that Extract archive option is checked then click on OK

  

• A new folder with the name MyLastEclipseUI5App will be created under your workspace
• Expand the root folder of the project until you see the index.html file

  

• Next we will cut all the content (files and folders) which exist under the WebContent folder and then paste it under the project root folder

  

  

• Then delete all the unnecessary folders under the root folder (make sure that you delete the MyLastEclipseUI5App folder which exist under the root folder and not the root folder itself)

  

• At the end our app structure in WebIDE should look like the following:

  

Add WebIDE artifacts

• First we will need to create cloud connectivity configuration file in our project. this file will allow HCP front-end server to run our app with all the necessary resources (ui5 resources, our oData service etc.)
• To  create the cloud connectivity configuration files, go trough the following steps:
  • Select the root folder
  • Right click > New > Cloud Connectivity Configuration

    

  • A new file with the name neo-app.json will be created under our project root folder
• Next we will need to create a destination in HCP cockpit that will point to ES4 system. We will not explain how to create a new destination here but we will show how you can import a new one to your HCP cockpit. To import a new destination into your HCP cockpit, go trough the following steps:
  • Download the ES4 file which attached to this blog post
  • Open your HCP cockpit by clicking on the following link: Cloud Cockpit
  • Select Destinations and then click on Import Destination button
  • Select the destination file that you download and then click on the Save button at the bottom of the page to save it

    

• Next we will need to add the destination to our cloud connectivity configuration file. To do so please go trough the following steps:
  • Double click on neo-app.json file to open it in the text editor
  • Add the following objects under the routes array

    

  • The full neo-app.json file structure is attached to this blog post so please feel free to download it and compare it with yours.

Modify and run the app

The last thing that left now is to do some minor modification to our controller in order to run it on HCP. To do so please go trough the following steps:

• Double click on SalesOrders.controller.js file to open it in the text editor
• Go to the row where you initiate a new oDataModel object
• replace proxy/sap/opu/odata/IWBEP/gwdemo/ with /sap/opu/odata/IWBEP/gwdemo (just remove the proxy at the beginning)
• Change user and password parameters to your user and password

  

• Save the file
• Select the index.html file and click on the Run button (at the top) to run the app

  

• If everything went well, you should see the same app but this time runs on HCP. From here you can deploy your app either to on-premise or to the cloud, use WYSIWYG to build your UI using a simple and intuitive drag and drop editor, write your code with WebIDE code editor which provide fast auto complete and syntax validation for both JavaScript and XML files, use GIT as your source control and more… and more…

That’s it 🙂