Skip to Content
Author's profile photo Chandrashekhar Mahajan

How to Deploy and Run SAPUI5 application on ABAP Server

Introduction –


In my earlier blog, we saw how to create SAPUI5 application consuming OData service.

In this technical article, we will see how we can deploy and run SAPUI5 application on SAP ABAP server.


Prerequisite –


To run application on ABAP server, we need to have ABAP Development tools and SAPUI5 ABAP Repository Team Provider plugin installed into your Eclipse IDE.

/wp-content/uploads/2013/06/ui5_abap1_231762.jpg

And on backend SAP system, you need to have below components.

/wp-content/uploads/2013/06/ui5_abap2_231763.jpg

Before deploying this application into SAP ABAP AS, if we see Run As menu, it will display below options. Once it will get successfully deployed, it will show option for testing on ABAP server.

/wp-content/uploads/2013/06/ui5_abap3_231815.jpg

Procedure –

As displayed below, we need to right click on Project and go to menu Team –> Share Project.

/wp-content/uploads/2013/06/ui5_abap4_231816.jpg

Select repository type as SAPUI5 ABAP Repository.

/wp-content/uploads/2013/06/ui5_abap5_231817.jpg

In this step, you need to configure connection to SAP system where you want to deploy your SAPUI5 application.

/wp-content/uploads/2013/06/ui5_abap6_231818.jpg

After successful connection to SAP system, it will display properties of connection.

/wp-content/uploads/2013/06/ui5_abap7_231819.jpg

On click of Next button, logon screen will be displayed. Provide credentials of SAP system.

/wp-content/uploads/2013/06/ui5_abap8_231820.jpg

Now you will be provided with 2 options as below. We will select option to create new BSP application. By default, name of BSP application will be selected as your SAPUI5 project name. But in that case, you will get error message as displayed in below screen.

/wp-content/uploads/2013/06/ui5_abap9_232050.jpg

You need to give Z* name to your BSP application. Also you can browse package and select required package in which you want to save your BSP application.

/wp-content/uploads/2013/06/ui5_abap10_232051.jpg

In this step, you can perform selection of Transport Request. You will be provided with below 3 options.

/wp-content/uploads/2013/06/ui5_abap11_232070.jpg

You will get below kind of popup message for Server Runtime Version Check. Click OK.

/wp-content/uploads/2013/06/ui5_abap12_232071.jpg

Final step of the deployment will be submitting the project. Select option Team –> Submit.

/wp-content/uploads/2013/06/ui5_abap13_232072.jpg

As displayed below, it will ask resources to submit. Click on Finish.

/wp-content/uploads/2013/06/ui5_abap14_232076.jpg

With this step, SAPUI5 application will get deployed to SAP ABAP AS Server and SAPUI5 project structure will look like as below.


Notice the changes between before and after deployment.

/wp-content/uploads/2013/06/ui5_abap15_232077.jpg

Also you will see now Run on ABAP Server option got added as displayed below. By selecting this option, SAPUI5 application will run on ABAP server.

/wp-content/uploads/2013/06/ui5_abap16_232078.jpg

Here you can see URL path which is nothing but the BSP application URL path got created in SICF transaction.

/wp-content/uploads/2013/06/ui5_abap17_232079.jpg

If you see in backed SAP system, BSP application will get created as displayed below.

/wp-content/uploads/2013/06/ui5_abap18_232080.jpg

Also you can see service getting created under the path /sap/bc/ui5_ui5/sap/zflightdemo in SICF transaction.

/wp-content/uploads/2013/06/ui5_abap19_232081.jpg

Closing Remarks –

We can easily deploy and run SAPUI5 application on ABAP server. Basically, in the backend SAP system, BSP application gets created when we share and submit SAPUI5 project.

Updates (Resubmitting UI5 project) –

We can easily resubmit the changes done to the UI5 application. after doing changes in UI5 application, you need to again submit the project. in that case, you will see below screen with operation as Update.

/wp-content/uploads/2013/06/resubmit_254763.png

I created UI5 application with input field and submitted as explained in this technical article. below is the screen of BSP application executed which I created for UI5 application.

/wp-content/uploads/2013/06/before_resubmit_254764.png

After that, I added TextView UI element and again submitted the project. I again executed BSP application which reflected back the changes I did to my UI5 application.

/wp-content/uploads/2013/06/after_resubmit_254780.png

Assigned tags

      50 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Naveen Inuganti
      Naveen Inuganti

      Hey.. I am not getting "Run on ABAP server". Any idea? Do we need to manually add it?

      I can still see my BSP in SAP system and I can get the link from there.

       

      Thanks,

      Naveen.I

      Author's profile photo Chandrashekhar Mahajan
      Chandrashekhar Mahajan
      Blog Post Author

      We need not to add it manually. It came automatically once i submitted the project.

       

      I am not sure why it is not displaying this option for you.

       

      Regards,

      Chandra

      Author's profile photo Naveen Inuganti
      Naveen Inuganti

      Okay, I will figure it out.

       

      I have one more question, when I re-submit my project from UI5 to SAP BSP, latest code changes are not working as expected.

       

      For example,

      1. Create a page with on input field

      2. Submitted project to SAP server

      3. BSP created and I can run this BSP to see the page that I created

      4. Applied some changes to UI5 project, let's say added second input field.

      5. This code change is working as expected when I test in local host

      6. Submitted this project to SAP sever

      7. I can see my new code lines in BSP view/coontroller

      8. Execution of this BSP is taking me into first screen where I have single input field

       

      I tried this in all browsers... by clearing history, cookies.

      Also, deleted cache in my SAP system.. still not working..

       

      Now, If I create new BSP, I mean if I submit this project to new BSP.. it's working there. Same story repeats if I apply further changes.

       

      Thanks,

      Naveeen. I

      Author's profile photo Chandrashekhar Mahajan
      Chandrashekhar Mahajan
      Blog Post Author

      Hi Naveen,

       

      I did the exact steps and able to re-submit changes. Please see the updates section of this article for more information.

       

      Regards,

      Chandra

      Author's profile photo Former Member
      Former Member

      Hi Chandrashekar,

       

      Thanks very much for the blog.It was really helpful.

       

      Once i complete my SAPui5 development ,if i have to ship the SAP ui5 application as a package is it that we need to first deploy it in abap server from eclipse and then package it from the abap server ?

       

      I am not aware of what to do inorder to ship the application to customer.Please guide me here.

       

      Thanks and Regards

      Neeta

      Author's profile photo Former Member
      Former Member

      Hi Chandarshekar,

       

      We have two separate system,gateway components in one system to act as gateway server and iw_bep components on the SAP backend system.Now i would like to know the SAPUi5 application needs to be deployed into backend sap system with iw_bep component or to the gateway system?

      Kindly provide your valuable input here .

      Thanks and Regards

      Neeta

      Author's profile photo Chandrashekhar Mahajan
      Chandrashekhar Mahajan
      Blog Post Author

      Hi Neeta,

       

      It means you are having Hub Deployment architecture (SAP Gateway deployment options in a nutshell)

       

      In your case, you need to deploy SAPUI5 application on Gateway Hub system also known as frontend server.

       

      So typically the development of OData services will happen in backend sap system(iw_bep) and then these services will be registered on Gateway Hub system. In UI5 application, these services will be consumed and then you need to deploy the application on this Hub system.

       

      Regards,

      Chandra

      Author's profile photo Former Member
      Former Member

      Hi Chandra ,

       

      Thanks a lot for your response

       

      In SAP netweaver gateway system is there any other way to deploy the sapui5 application manually other than with the eclipse team provider plugin.Can i use the report

      /UI5/UI5_REPOSITORY_LOAD? to upload the project into sap system?In that case whts the format of the file i need to upload  ?


      What are the other components i require in gateway system if i am uploading manully?


      How can i make sure all my ui5 libraries are available in sap gateway system?So once after creation of the BSP the application will run smoothly .




      Thanks and Regards

      Neeta

      Author's profile photo Joao Sousa
      Joao Sousa

      In that report you select the base folder of the project, not a specific file. I use that report a lot, since I don't use eclipse for SAPUI5.

      Author's profile photo Former Member
      Former Member

      Hi Chandra,

       

      When i tried deploying my sapui5 application from eclipse to the sap gateway system version 7.4 i get the followiing error

       

       

      System failure: "Screen output without connection to user." (For detailed information, check the generated short dump in transaction ST22 of system XD1)


       

      When i checked in ST22 i get the

      or analysis
      Attempt made to send an image to a user during background processing.

      Current screen: "SAPLSTRD                                " 0353.

       

      Kindly guide me here .

       

      Thanks and Regards

      Neeta

      Author's profile photo Hans-Joerg Alles
      Hans-Joerg Alles

      Hello Naveen,

       

      i am using Eclipse Kepler with the SAP Plugins. I can deploy the SAPUI5-Projekt on the SAP AS Server, but i don't see 'RUN ON ABAP Server' as you told. Did you already find the solution ?

       

      Regards

      Hans-Jörg

      Author's profile photo Former Member
      Former Member

      Hi,

       

      Everything works, until I try to test my application. When I test my BSP application in the Repository Browser in the SAP backend, I get the same error as when I try to run in in eclipse.

       

      Service cannot be reached

      What has happened?

      URL call was terminated because the corresponding service is not available.

      Note
      The termination occurred in system with error code 403 and for the reason Forbidden.

       

      What can I do?

      Please select a valid URL.

       

      HTTP 403 - Forbidden

      Your SAP Internet Communication Framework Team

       

       

      Anyone who can help me?

       

      Thanks

      Author's profile photo Chandrashekhar Mahajan
      Chandrashekhar Mahajan
      Blog Post Author

      Hi,

       

      This error means that your service is not active. Please check the service in SICF transaction and check if it is active or not. Activate it and then retest it.

       

      Regards,

      Chandra

      Author's profile photo Former Member
      Former Member

      Thanks C.M., it works now!

      Author's profile photo Silke Arians
      Silke Arians

      Thanks for this nice blog - I hope you can also find all needed information about the topic in our Demo Kit documentation under https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/UI5BSPRepository.html

       

      Best regards

      Silke (UI5 Tools)

      Author's profile photo Chandrashekhar Mahajan
      Chandrashekhar Mahajan
      Blog Post Author

      Thanks for the UI5 docu link !

      Author's profile photo Naveen Inuganti
      Naveen Inuganti

      Hi Silke Arians,

       

      Do you have any inputs on my below question.. I am using 7.31 version!

       

      When I re-submit my project from UI5 to SAP BSP, latest code changes are not working as expected.

       

      For example,

      1. Create a page with on input field

      2. Submitted project to SAP server

      3. BSP created and I can run this BSP to see the page that I created

      4. Applied some changes to UI5 project, let's say added second input field.

      5. This code change is working as expected when I test in local host

      6. Submitted this project to SAP sever

      7. I can see my new code lines in BSP view/coontroller

      8. Execution of this BSP is taking me into first screen where I have single input field

       

      I tried this in all browsers... by clearing history, cookies.

      Also, deleted cache in my SAP system.. still not working..

       

      Now, If I create new BSP, I mean if I submit this project to new BSP.. it's working there. Same story

      Author's profile photo Silke Arians
      Silke Arians

      Hello Naveen,

       

      Please see mentioned Demo Kit docu above under sub chapter "Testing the SAPUI5 Application Project on the ABAP Server" and "Cache Behavior for Application Resources" regarding caching.

      After deleting the browser cache you should see the latest changes.

       

      Best regards

      Silke

      Author's profile photo Naveen Inuganti
      Naveen Inuganti

      ah! I was not doing this from developer tools... yes, after CTRL + R from IE, it's working fine.

       

      Thank you!

      Author's profile photo Former Member
      Former Member

      Hello,

       

      Our environment currently uses CTS Plus to manage transports. Was wondering how you would take care of the change in the service URI once the application has been transported to a different environment? For example, the gateway service URI would be different from Dev to QA to Production.

       

      I was thinking of using the JavaScript function document.URL to retrieve and parse the URI from within the application. Is this a viable solution or does SAPUI5 provide a more elegant solution?

       

      Thanks,

      Eric

      Author's profile photo Chandrashekhar Mahajan
      Chandrashekhar Mahajan
      Blog Post Author

      Hi Eric,

       

      Sorry for replying so late. Somehow I missed your comment.

       

      Answer to your question is, we should always use relative OData service URI as it will not cause any issue while transporting application to Dev to QA to production.

       

      Regards,

      Chandra

      Author's profile photo Former Member
      Former Member

      Hi Chandrashekar,

       

      Thanks for the detailed description .

       

      When I try to test the BSP application , I cant see data coming through the table.

       

      My application runs fine on local host and not on the ABAP server. Please advice.

       

      Thanks,

      Vidya

      Author's profile photo Chandrashekhar Mahajan
      Chandrashekhar Mahajan
      Blog Post Author

      Hi Vidya,

       

      Please check if your are getting any error while running application on ABAP server.

       

      open the application in chrome browser and then press function key F12 to open the developer console. There you can check if you are getting any errors.

       

      Regards,

      Chandra

      Author's profile photo Former Member
      Former Member

      Hi Chandra,

       

      I did test in chrome and found

       

      Uncaught Error: failed to load 'Flightres/resources/list.view.js' from ./Flightres/resources/list.view.js: Error: failed to load 'Flightres/resources/utils/utility.js' from ./Flightres/resources/utils/utility.js: SyntaxError: Unexpected token ILLEGAL . Adjusted code accordingly.Not sure why it is failing.Please advide.


      Regards,

      Vidya

      Author's profile photo Former Member
      Former Member

      Hi Chandra,

       

      I figured out why it was failing. I did couple of changes in view.js and utility.js thinking on ABAP coding path. So I reverted these changes. But the main thing was the service URL which was denying to display service in connectivity.js

       

      localhost in eclipse contains

       

       

      var serviceUrl = "proxy/https/server/sap/opu/odata/sap/Z_Flight_res"

       

      Where as BSP Application should contain

       

      //Root URL for the service

       

      var serviceUrl = "/sap/opu/odata/sap/Z_Flight_res/";

       

      Hope this helps others!!

       

      Regards,

      Vidya

      Author's profile photo Chandrashekhar Mahajan
      Chandrashekhar Mahajan
      Blog Post Author

      yes when we deploy the code to ABAP AS (basically GW server and also known as front end server), the service URL should be relative url to gateway server and not to be started with proxy/

       

      you can refer this SAPUI5 SDK - Demo Kit for configuring SimpleProxyServlet to test the application locally.

       

      Regards,

      Chandra

      Author's profile photo Christian Schuff
      Christian Schuff

      Where can I find a similar guide for the Java stack?

       

      BR
      Chris

      Author's profile photo Markus Reich
      Markus Reich

      When I try to share with an ABAP System I get the error message

      Selected system does not support the Team Provider feature

      in Eclipse Wizard?

      Author's profile photo Former Member
      Former Member

      Markus,

       

      That's probably because your system version is lower than 7.31.

      Author's profile photo Guillaume GARCIA
      Guillaume GARCIA

      Hi,

       

      Is there any documentation about the other available options:

      - SAP HANA Repository

      - Semantic File System

       

      Besides, when a project is shared using an option, is it required to always disconnect before changing the share option. For instance, I want to push my project to ab ABAP Repository but also use GitHub for versioning.

       

      Last but not least, how do I force "Disconnect", when Semantic File System is chosen, this action ("Disconnect") is no longer available and I'm stuck with it...

       

      Thanks in advance.

       

      Best regards,

      Guillaume

      Author's profile photo Avinash Chilukuri
      Avinash Chilukuri

      Hi,

       

      I have deployed SAPUI5 application on ABAP Server and while I try to test my application on browser its says

       

      File sap/z_bp_sapui5_ac1/webcontent/index.html NOT found!


      can any one help me


      Best Regards,

      Avinash.

      Author's profile photo Santhosh Gowda
      Santhosh Gowda

      Hi Avinash,

      It clearly shows your ui5 application doesn't content index.html. open your web.xml and check for

      <welcome-file-list>
      <welcome-file>index.html</welcome-file>

          </welcome-file-list>

      if 1st you need to display any other html file, please give that name in welcome- file list.

       

      regards,

      santhosh

      Author's profile photo Avinash Chilukuri
      Avinash Chilukuri

      Hi Santhosh,

       

      Thanks for the reply, I have checked for welcome-file-list and I found it, what do you mean by (1st you need to display any other html file, please give that name in welcome- file list.) can you help me with this.

       

      Regards,

      Avinash

      Author's profile photo chetna dabra
      chetna dabra

      Hie chandra,

      What all components do we require at  SAP Netweaver 7.40 ABAP server (backend) in order to deploy SAPUI5 application?

      Do we require any components at all for this new version??

      If yes then from where to get them or how to access them at backend?

      You may find this question a little out of place or may be inappropriate, but being new to this platform, i am not able to figure out even simple things sometimes.

       

      Thank you so much for writing such a great blog,

      Best regards,

      Chetna

      Author's profile photo Silke Arians
      Silke Arians

      Hi Chetna,

       

      please refer to the SAP Help Portal under http://help.sap.de/saphelp_nw74/helpdata/en/91/f346786f4d1014b6dd926db0e91070/content.htm where the following is mentioned:

      As of SAP NetWeaver 7.4 SP1 all required SAPUI5 parts are already part of software component SAP_UI, so you do not need any additional backend component in 7.40.

      Installation Guide for the Eclipse Plugins can also be found under in SAP Help Portal under http://help.sap.de/saphelp_nw74/helpdata/en/f2/5b203ec8254605a3bcbc07734b3c20/content.htm

       

      Instead of Eclipse we now also offer a web based development tool called "SAP Web IDE" running on the SAP HANA Cloud Platform which also has a deploy to ABAP feature. For more information about SAP Web IDE please refer to http://scn.sap.com/docs/DOC-55465/. In case of questions about SAP Web IDE please use their SCN page.

       

      Best regards

      Silke

      Author's profile photo chetna dabra
      chetna dabra

      A very helpful article. Each and everything included.

      Thank you for sharing

      Best Regards,

      Chetna

      Author's profile photo Former Member
      Former Member

      Hello !

      I am getting an error in step "Logon to System". After I introduce my usr/pssw the next message popup appears:

       

      errorMsg.png

       

      Any idea ?

      Thankyou

      Author's profile photo Former Member
      Former Member

      Hello again !

       

      The above error appears when using NWDS7.5 SP3. Trying to fix this issue in this IDE might be hard. If anyone manage to fix this, I hope to see the solution here!!

       

      Anyway, with a Eclipse Mars2 the problem does not appears and deploying the app works fine. Ofcourse you will need to "Install New Software" first.

      With Eclipse Mars2 this url "https://tools.hana.ondemand.com/mars" also works.

      Author's profile photo Matthias Schmalz
      Matthias Schmalz

      Hi,

      could you please compare the version of the installed plugin com.sap.adt.communication of both Eclipse installations. Maybe one of them is newer and solves problems. It is unlikely that the Eclipse version itself is causing the problems.

      Regards Matthias

      Author's profile photo Simone Milesi
      Simone Milesi

      Great great great!

      Thanks for the article, really clear and useful.

       

      A little tip: add the note to convert to the correct end of file character to avoid error in submit (File -> Convert line delimiter to -> Windows) to avoid the error "wrong EOF, should be CR+LF"

      Author's profile photo Ram k
      Ram k

      It was really nice article.... Thanks for sharing such a nice one!!!

      Author's profile photo Daniel Su
      Daniel Su

      Hi Chandrashekhar,

       

      First, thank you for your blog, it's very useful.

       

      But I occur the following problems

      1. When I Team -> Submit on my project, have error message.

      2016-7-16 下午 05-05-59.png

       

      2. I have no menu: Run As -> Run on ABAP Server

      2016-7-16 下午 05-16-53.png

       

       

      Can anyone help me resolve this issue.

      Thank you very much.

       

       

      Best Regards,

      Daniel

      Author's profile photo Matthias Schmalz
      Matthias Schmalz

      Hi Daniel,

      as specified in the error message there's a missconfiguration of the virus scan profiles on your ABAP backend system. It looks like the used virus scan profile has been activated but not configured properly. Either disable the virus scan profile (don't delete it) or fix the configuration.

      As no files could be submitted, there's no URL to run on the ABAP server yet.

       

      Best regards

      Matthias

      Author's profile photo Bhavin A Shah
      Bhavin A Shah

      Hi Chandrashekhar,

      I have added following question related to the sharing a project with UI5 repository on SCN and I am not able to do find the solution for the same.

      https://answers.sap.com/questions/48470/eclipse-neon-logon-to-system-failed.html

      Could you please help on the same if possible.

      Regards,
      Bhavin

      Author's profile photo Karthik S
      Karthik S

      Hi Chandra,

      I had developed one UI5 project in eclipse. I have not deployed on ABAP server. Now my query is shall i able to consume the odata from gateway server in my undeployed ui5 application. Because when I run the odata url in browser, I am getting a xml data. Similarly when i try to read the data from serviceurl in ui5 app, its not showing anything. I have passed the relevant parameters in odata read operation. Still odata is unavailable.

       

      Author's profile photo Former Member
      Former Member

      Thank you for sharing.

      I have followed all steps introduced here for deploying a simple HelloWorld SAPUI5 application on my IDES Server.

      But when I arrived to login on my System, an error was introduced “javax/activation/MimeTypeParseException ”

      Could you please help me if possible.

      Regards,

       

      Author's profile photo Former Member
      Former Member

       

      Hello,

       

      While running the BSP application I am getting page can not be displayed error in chrome browse. Kindly help.

       

      Best Regards

      Deepa Kalyani

      Author's profile photo Miroslav Sedlar
      Miroslav Sedlar

      Hello, please, is it possible to set up the deployment like in the article and then share the project to another repository such as SVN?

      The target is to share project over SVN and when the version is to be ready to be productive, upload it to the ABAP server.

      Is it somehow possible in Eclipse please?

      Thanks!

      Author's profile photo Aditya Mishra
      Aditya Mishra

      Hi Chandra,

      thanks for sharing.

      1. I am working in SAPUI5 application and now I need to deploy it on a server from where user can access my application globally, but I have no idea how to and where I can deploy/ publish my application. I used eclipse for the development of application.

      2. If I deploy my application in SAP ABAP server then is it accessible from the anywhere in web?

      Please guide me accordingly.

      Thank you

       

      Author's profile photo Marco Beier
      Marco Beier

      Hello Mahajan,

      I'm well aware of how 'old' this blog is by now. However I still have one question to ask ...

       

      What do I have to take care of when changing the namespace in which the SAPUI5 Application has been deployed?

       

      Kind Regards,

      Marco