Skip to Content

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

To report this post you need to login first.

47 Comments

You must be Logged on to comment or reply to a post.

  1. 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

    (0) 
    1. Chandrashekhar Mahajan 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

      (0) 
      1. 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

        (0) 
      2. Neeta Thankachan

        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

        (0) 
      3. Neeta Thankachan

        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

        (0) 
        1. Chandrashekhar Mahajan 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

          (0) 
          1. Neeta Thankachan

            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

            (0) 
            1. 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.

              (0) 
          2. Neeta Thankachan

            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

            (0) 
    2. 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

      (0) 
  2. Robbe Wuyts

    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

    (0) 
    1. Chandrashekhar Mahajan 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

      (0) 
    1. 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

      (0) 
      1. 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

        (0) 
  3. Eric Young

    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

    (0) 
    1. Chandrashekhar Mahajan 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

      (0) 
  4. Vidya Goruganthu

    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

    (0) 
    1. Chandrashekhar Mahajan 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

      (0) 
      1. Vidya Goruganthu

        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

        (0) 
        1. Vidya Goruganthu

          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

          (0) 
          1. Chandrashekhar Mahajan 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

            (0) 
  5. 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

    (0) 
  6. 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.

    (0) 
    1. 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

      (0) 
  7. 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

    (0) 
  8. 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

    (0) 
    1. 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

      (0) 
      1. 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

        (0) 
  9. 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”

    (0) 
  10. 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

    (0) 
    1. 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

      (0) 
  11. 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.

     

    (0) 
  12. Abderraouf Amri

    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,

     

    (0) 
  13. Deepa Kalyani

     

    Hello,

     

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

     

    Best Regards

    Deepa Kalyani

    (0) 

Leave a Reply