How to deploy SAPUI5 application into ABAP NetWeaver Gateway System

10
13003

Hello everyone, in this tutorial, we will learn How to deploy SAPUI5 application into ABAP NetWeaver Gateway System.

Prerequisites

  • You should have access to SAP Netweaver Gateway System (or) Front-end server in which UI Add-on installed.
  • You should have developed a SAPUI5 application in Eclipse IDE (or) SAP Web IDE.

Step-by-Step Procedure

1. Fire up the Eclipse IDE and test the SAPUI5 application and make sure that the application is working fine. For example, I have created a simple column chart SAPUI5 application. Output and structure of the SAPUI5 application looks like below.

BarChart_SAPUI5
BarChart_SAPUI5

BarChart_SAPUI52. Now right click on the application in Eclipse IDE and choose Export and then Export.

Export
Export

3. In the Export Window, choose File System under General and click Next.

Export Window4. In File System window, select the SAPUI5 application which we want to export and choose the folder in your local desktop in which you want to save the application and click on Finish.

File System
File System

5. Application will be successfully saved.

6. Now log on to the SAP Netweaver Gateway system/Front-end server and go to transaction SE38 and provide the program name as /UI5/UI5_REPOSITORY_LOAD and click on execute. You will see the below screen.

SAP UI5 Repository Load
/UI5/UI5_REPOSITORY_LOAD

7. Provide the name of the SAPUI5 Application and choose Upload, now execute the report.

SAPUI5 Application Repository Upload8. You will see a popup to choose the folder in which you have saved the SAPUI5 application in the Step-4. Once have selected the folder, click on OK.

Choose the SAPUI5 application9. You will see a report displayed like below, which contains all the files which are going to create.Please verify all the files which are going to create and click on Upload

Load SAPUI5 Application10. A popup window will appear like below. Enter the parameters in the window and click OK.These parameters are not mandatory.

Enter Parameters11. On successful upload, you will be re-directed to initial screen with a success message like below.

Successfully Deployed12. Now we need to test the SAPUI5 application which is deployed. Go to the transaction code SICF and enter the Service Path as below. You may need to adjust the path to your needs.

SICF13. You will be navigated to below screen, on this screen right click on the SAPUI5 application and choose Test Service.

Test Service14. SAPUI5 application will be opened in a browser and should see the output.

SAPUI5 Application Output

Congrats, you have successfully deployed SAPUI5 application into SAP Netweaver Gateway System.
Please stay tuned to us for more SAPUI5 tutorials.Please feel free to comment and let us know your feedback. You feedback will keep us alive.
like-128

10 COMMENTS

    • Hi Pavan,

      Thanks for your comments.Please let us know how we can help you more.

      Thanks,
      Admin

  1. Thanks for this turorial 🙂
    But after “test service” I get the error “File sap/zhelloworld/index.html NOT found!”

    All the other stuff just worked fine.
    But i recognized, my index.html is in a webapp folder, not in a webcontent. But I think, that’s just a newer naming convention. I am working on Gateway 7.5.

  2. Thank you for this tutorial.
    What if I wish to update code in SAPUI5 application and want my service to be updated?
    Now I upload my application with new name and new service is created. This is appropriate for learning but not for production usage.
    Please advice

    • Hi Svetlana Shlapak,

      SAPUI5 application and OData service development are different. We develop OData service in SEGW transaction and if you want to create/change any service you have to do it here(SEGW).
      Updating SAPUI5 application will not have any impact on backend OData service.

      I hope this answers your question.

      Thanks,
      Prakash

  3. Hi,
    First thanks for your tutorial.
    Question: How is this different from doing a Team/Share project via Eclipse ? Is there any difference at all?

    Thank you.

    Regards.

  4. Hi again,

    I succeed uploading the project using your tutorial.
    I named it for the purpose ZTESTUI5_1.
    In sicf, it is activated.
    When I test it, I get a 404 HTTP error.

    Any guess?

    Thanks.

    • Hi,
      I found the problem.
      When I exported the project to the folder, it created a folder ZTESTUI5_1 under another ZTESTUI5_1.
      It should not be like that.
      That was my mistake.

      Hope it helps.

      Thanks.

Comments are closed.