Skip to Content

How to create SAPUI5 application consuming Gateway service with the help of SAP NW Gateway Plug-in for Eclipse


I strongly recommend you to use Gateway Productivity Accelerator also known as GWPA (Refer New Gateway Tool – SAP NetWeaver Gateway productivity accelerator).

The blog is still relevant, except that SAP NetWeaver Gateway plugin for Eclipse is superseded by Gateway Productivity Accelerator. All the steps mentioned in this blog are still applicable with GWPA. You can find GWPA installation instructions at SAP Development Tools for Eclipse

You can also refer my blog How to create Android Application consuming OData Service with help of Gateway Productivity Accelerator (GWPA)

to know more on how to use GWPA

Introduction –

In this technical blog, I will focus on how we can build SAPUI5 application consuming GW service with the help of SAP NetWeaver Gateway plug-in for Eclipse.

SAP NetWeaver Gateway plug-in for Eclipse –

The SAP NetWeaver Gateway plug-in for Eclipse is an SDK that enables the developer to easily and quickly create applications that consume data from SAP systems via OData services exposed by SAP NetWeaver Gateway

The framework enables developers using Eclipse to do the following:

  • Discover, explore and search SAP services in SAP NetWeaver Gateway
  • Generate semantic proxies for SAP services
  • Leverages templates for generating starter applications based on SAP services.

Prerequisites –

You should have Eclipse IDE with SAP UI development toolkit for HTML5 and access to SAP NetWeaver Gateway system.

You should also need to install SAP NetWeaver Gateway plug-in for Eclipse which can be downloaded at

New_Gateway_plug-in_for_Eclipse Or Gateway Productivity Accelerator at SAP Development Tools for Eclipse

Procedure –

Steps involved for creating simple UI5 application consuming Gateway services with the help of Gateway plugin for Eclipse are as below,

  1. Select Starter Application Project as displayed in below screenshot /wp-content/uploads/2013/05/ui5_gw1_224859.jpg
  2. Give project name and select HTML5


   3. Select List/Details Application (SAPUI5) 


   4. In this step, we want to select Gateway service either from remote location or from File system. We will choose Remote location and connect to SAP Gateway system


   5. Here we can configure connection to SAP NW GW system


  6. Do not select checkbox Use HTTPS. Provide server host name and server port. Provide user credentials and select checkbox Save Password and click on OK.


   7. If you are able to connect to Gateway system then you will be able to see list of all gateway services available in your SAP system. And you can search for services.


   8. Here, we will start searching standard GW service SAMPLEFLIGHT


   9. Select service SAMPLEFLIGHT. This service contains 4 entity set such as BookingCollection, CarrierCollection, FlightCollection and TravelagencyCollection.  Entity Set can be considered as internal table.


   10. Click on Next


   11. Now we can create view of type List for Entity Sets. We will choose Entity Set FlightCollection.


   12. Click on + sign to add fields to the view


  13. As displayed below, Click on Finish and UI5 application will get generated.


Below snap gives details on final project structure generated automatically by the wizard.


  14. We can start testing the application by Run As a Web App Preview


This will open index.html page with URL. As displayed below, this page does not display any information. Now we would like to see what errors occurred.


To troubleshoot, we can use Chrome browser as it comes up with inbuilt tools as shown below.


By pasting the URL in chrome browser and activating developer tools, we will be able to see errors on console. As per below error, /sapui5-1.4 is not loaded.


For this, we need to modify the bootstrap scrip in index.html page


It should be,


After correcting this error, we can reload URL and see the results. Now it is displaying Flight table but with no data and there are errors related to unauthorized access to Gateway service ,i18n_en_US file not found as well as Origin localhost is not allowed by Access-Control-Allow-Origin.


To correct these errors, in web.xml file, we need to add <context-param> tags with < param-value> pointing to SAP Gateway system server host and port.

<!– ============================================================== –>

<!– UI5 proxy servlet –>

<!– ============================================================== –>











<!– <param-value><host>:<port></param-value> –>



Also add below code to index.html

This will add proxy to your URL when we are testing the application locally.


To remove error related to i18n, copy file i18n.propeties and paste under globalization folder and rename it to This should remove error.


Apart from these changes, in controller JS file, we need to add “/” before the entity set name else you will get Bad call error message.

Hence it should be oTable.bindRows(“/FlighCollection”);


Once all these required changes are done in the generated code, you can reload the URL which will display the output as below,

Output –


Closing Remarks –

With the help of SAP Gateway Plugin for Eclipse, we can create starter SAPUI5 application with very minimum efforts.

This step-by-step blog is written to explain how we can,

1)     Configure SAP NW GW system,

2)     Search existing gateway services

3)     Create UI5 application consuming gateway service 

4)     Troubleshoot issues with the help of developer tool available in Google chrome browser

5)     And test the application locally

Though we can create very basic application using this plugin,it will help us to understand/learn UI5 application structure and gateway service basics.

Additional Information –

In this blog, I am using our local SAP NetWeaver Gateway system. In case, if you do not have access to Gateway system then you can use SAP NetWeaver Gateway Demo System hosted by SAP.

you need to use below credentials,

Username: GW@ESW

Password: ESW4GW

Before starting building application, you may want to check if the system is up and running. to test it, try to access below URL and provide above credentials,$metadata

if the demo system is up and running, you will see below output


Now, we will try to see if there is data available for entity set CarrierCollection. For that, put below URL in the chrome browser,

you may get output as below,


After confirming that we are getting data from SAMPLEFLIGHT oData service, we will configure connection to demo system as below,


We need to add parameter for REMOTE_LOCATION with host as demo system,


connectivity.js will look as below,


and “/” before CarrierCollection in your_view_name.controller.js so that it will be as below


That’s it !!

Now try to run application and paste the URL into chrome browser, it will display pop up for authentication. Provide credentials as mentioned above.

If everything is fine, you will be able to see output.

You must be Logged on to comment or reply to a post.
  • This is pretty helpful info.  However, the missing piece, and I apologize if I missed it in your blog above, is how to get a developer's access to the Gateway.  I noticed that the actual URL for data consumption is blacked out. 

    I have signed up for the Gateway demo where I am able to view the 'GW Consumption Model' of the flight data model.  But the URL to view the xml and metadata doesn't seem to work; and I have a separate question regarding that.  So what I thought getting this demo account would be an access way for me to write apps with AppBuilder and UI5, added more to my confusion.

    So in order to complete the link and your quick tutorial to be at 100% helpful, can you maybe shed light on how others can attain a developer access to the gateway, if there is such access for developers? 

    Thanks again for the post as this is very helpful.


    • Hello Jay,

      Thanks for your comments! I added section Additional Information at the end of my blog. you will be able to find the details on how to access GW services from SAP NetWeaver Gateway Demo System and build applications on top of it.

      Let me know if you still need any more information.



  • HI Midhun,

    This blog is really helpful and I was able to run the application in chrome,mozilla,ie . But when tried to run the application in safari browser i am getting following error -

    2013-06-13 12:18:34 The following problem occurred: NETWORK_ERR: XMLHttpRequest Exception 101 -

    and i have no clue why this is coming.

    Any idea why this error comes when running the application in safari.


    Ritushree Saha

  • Hi Chandrashekhar,

    I am able to create the project and i m getting screen as shown in above example.

    I am unable to get data and giving me HTTP request failed and in JS console below exception i m getting.2013-06-17 23:29:02 message: HTTP request failed Response Text: <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"/> <title>Error 404 Not Found</title> </head> <body> <h2>HTTP ERROR: 404</h2> <p>Problem accessing /sap/opu/odata/iwcnt/CUSTOMER/CustomersAddressDetailsCollection. Reason: <pre>    Not Found</pre></p> <hr /><i><small>Powered by Jetty://</small></i>

    Could you please help me out.



    • Hi Rajeev,

      are you able to get data by executing OData service in separate browser session? to which system are you trying to connect? please elaborate more details.



    • You have a mistake in the URL /sap/opu/odata/iwcnt/CUSTOMER/CustomersAddressDetailsCollection

      you spelled iwcnt, i think it should be iwfnd. Please verify.

      • Hi Chandra,

        I did followed exactly your steps, now I am getting below error... any idea please..

        1. GET http://localhost:52469/SampleFlight/proxy/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/$metadata 500 (unknown protocol: sap) resources/sap/ui/thirdparty/datajs.js:17
        2. 2013-06-19 08:58:12 The following problem occurred: HTTP request failed500,unknown protocol: sap,<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <title>Error 500 unknown protocol: sap</title> </head> <body><h2>HTTP ERROR 500</h2> <p>Problem accessing /SampleFlight/proxy/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/$metadata. Reason: <pre>    unknown protocol: sap</pre></p><h3>Caused by:</h3><pre> unknown protocol: sap at;init&gt;(Unknown Source) at;init&gt;(Unknown Source) at;init&gt;(Unknown Source) at at javax.servlet.http.HttpServlet.service( at org.eclipse.jetty.servlet.ServletHolder.handle( at org.eclipse.jetty.servlet.ServletHandler.doHandle( at org.eclipse.jetty.server.handler.ScopedHandler.handle( at at org.eclipse.jetty.server.session.SessionHandler.doHandle( at org.eclipse.jetty.server.handler.ContextHandler.doHandle( at org.eclipse.jetty.servlet.ServletHandler.doScope( at org.eclipse.jetty.server.session.SessionHandler.doScope( at org.eclipse.jetty.server.handler.ContextHandler.doScope( at org.eclipse.jetty.server.handler.ScopedHandler.handle( at org.eclipse.jetty.server.handler.HandlerWrapper.handle( at org.eclipse.jetty.server.Server.handle( at org.eclipse.jetty.server.AbstractHttpConnection.handleRequest( at org.eclipse.jetty.server.AbstractHttpConnection.headerComplete( at org.eclipse.jetty.server.AbstractHttpConnection$RequestHandler.headerComplete( at org.eclipse.jetty.http.HttpParser.parseNext( at org.eclipse.jetty.http.HttpParser.parseAvailable( at org.eclipse.jetty.server.AsyncHttpConnection.handle( at at$ at org.eclipse.jetty.util.thread.QueuedThreadPool.runJob( at org.eclipse.jetty.util.thread.QueuedThreadPool$ at Source) </pre> <hr /><i><small>Powered by Jetty://</small></i><br/>              
  • Hi ,

    This blog is really helpful for building a starter app for SAP UI 5.

    I followed all the steps on how to build a SAP UI 5 using gateway plugin for eclipse.

    But the last step in this blog is not working .

    Even after adding the entries for REMOTE LOCATION in the web.xml, there is no data in the table.

    I am getting


    Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

    Please help

    • please update your host name in web.xml file  at UI5 proxy servlet  area,



                    <param-value>your host name </param-value>


        and put below script at connectivity.js file.

      function getUrl(sUrl) {

                            if (sUrl == "")

                                      return sUrl;

                            if (window.location.hostname == "localhost"

                                                || window.location.hostname == "") {

                                      return "proxy" + sUrl;

                            } else {

                                      return sUrl;




                  var serviceUrl = getUrl( '/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/');

  • Hi Chandrashekar ,

    Your blog was extremely useful .

    The example you have discussed in your blog, the Odata service you have invoked does not require any input from user or any filter.

    Is it possible to use the gateway plug-in to develop a UI 5 application consuming odata services which need dynamic input to be passed to the Odata service ?

  • Thanks for the blog.

    I have done all steps in this example, but when I run the application and paste the url in chrome browser, entered the username and password, I get the following error and the page keeps on trying to request the service, but i dont get any data, just blank page. can anyone help me with this? I have firewall off and connected to SAP internet.

    Aug 6, 2013 2:48:24 PM service

    INFO: GET http://localhost:8080/MySampleFlight/proxy/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/FlightCollection/$count

      - target:$count

      - request headers:

        => user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/534.57.7 (KHTML, like Gecko) Safari/522.0

        => accept: */*

        => x-requested-with: XMLHttpRequest

        => accept-language: en-us

        => accept-encoding: gzip, deflate

        => connection: keep-alive

    - response-status: 401

      - response headers:

        => content-type: text/html; charset=utf-8

        => www-authenticate: Basic realm="SAP NetWeaver Application Server [ES1/520]"

        => server: SAP NetWeaver Application Server / ABAP 702

        => sap-system: ES1

        => cteonnt-length: 1988

    Aug 6, 2013 2:48:24 PM service

    INFO: GET http://localhost:8080/MySampleFlight/proxy/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/FlightCollection/$count

      - target:$count

      - request headers:

        => user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/534.57.7 (KHTML, like Gecko) Safari/522.0

        => accept: */*

        => x-requested-with: XMLHttpRequest

        => accept-language: en-us

        => accept-encoding: gzip, deflate

        => authorization: Basic aTgzMTA3OTpTcmlBc2h3aTck

        => connection: keep-alive

    - response-status: 200

      - response headers:

        => content-type: text/plain; charset=utf-8


        => x-sap-odata-extension-version: 0.9

        => Content-Length: 24

        => Content-Encoding: gzip

        => server: SAP NetWeaver Application Server / ABAP 702

        => ntcoent-length: 4

        => dataserviceversion: 2.0

        => Cache-Control: private



  • Hi Chandra,

    Thanks for the nice info. I followed all the steps but still not getting the data, instead below error

    2Failed to load resource: the server responded with a status of 401 (Unauthorized)$metadata
    Failed to load resource: Origin http://localhost:64526 is not allowed by Access-Control-Allow-Origin.$metadata
    XMLHttpRequest cannot load$metadata. Origin http://localhost:64526 is not allowed by Access-Control-Allow-Origin. index.html:1
    1. 2013-09-24 15:37:12 The following problem occurred: A network error occurred. -   sap-ui-core.js:41




  • Hi Chandra,

    I am not able to install NW Add on for Eclipse . I have Eclipse Kepler version . But when i tried to install the NW Add on (Which I downloaded from your site), I am getting the below error.


    Cannot complete the install because one or more required items could not be found.

      Software being installed: SAP NetWeaver Gateway – Framework (Required) 2.6.400.201211111622 ( 2.6.400.201211111622)

      Missing requirement: Component List 2.6.400.201211111622 ( 2.6.400.201211111622) requires 'bundle org.junit4 4.8.1' but it could not be found

      Cannot satisfy dependency:

        From: SAP NetWeaver Gateway – Framework (Required) 2.6.400.201211111622 ( 2.6.400.201211111622)

        To: [2.6.400.201211111622]




  • Is the Sample flight data being modified/ Removed ?. I see : All the columns are labeled as Airline  &

    No data was retrieved by service: proxy/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/FlightCollection?$skip=0&$top=13&$inlinecount=allpages -.

    I can see my metadata working fine .is there anything else to be updated or installed?



  • Hi Chandrashekhar,

    I am getting the network error, while creating the connection in Netweaver (from eclipse)

    How can i find the host name.

    Please help.

    Thanks & regards.


  • Amazing Blog! Thanks!

    After resolving all the errors above, I am getting this error : 

    Uncaught TypeError: Cannot read property 'dataServices' of undefined

    Any idea why this is happening? Thanks,


      • Hi Amina,

        If you are using Eclipse or any other IDE,

        1. Just find your Project and Expand the node.

        2. Expand its sub-folder "WebContent".

        3. Expand its sub-folder "WEB-INF".

        4. Double Click "web.xml".

        5. In the right hand side pane, find "context-param".

        6. Expand it and it "param-name", put "".

            And in "param-value", put your server details as "http://xxxx.xxxx.xxxx:port".


        Hope this helps...


        Ismail MAC

  • hi ,

    i tried  this example in own project....... But data is not coming  in the table and one error is there......

    The following problem occurred: No data was retrieved by service: proxy/http/$skip=0&$top=7&$inlinecount=allpages -

    please help me ..................

    • Remove Proxy, maintain the normal http link.

      Go to your Eclipse project(If you are using Eclipse), Expand WebContent->WEB-INF->Web.xml.

      Open Web.xml

      Expand context-param

      Enter param-name =

               param-value = http://xxxx.xxxx.xxxx:portnumber

      xxxx.xxxx.xxxx is your server

      portnumber is your portnumber.

      This will solve your problem... Use IE8 or Google Chrome.

  • Hello everyone,

    I create application by this instructions and it's working, but

    I want to add another OData service (from the same system) to my application. Is it possible??

    Please help me.

    Thanks in advance,


  • Hello,

    im using GWPA and

    i have followed the steps in the example which you describe. (Some of the steps are not needed because they are already fixed by GWPA). When i run the application the following error occures:

    (I'm using sap server:

    Message: '' is null or not an object

    Line: 3

    Char: 1

    Code: 0

    URI: http://localhost:4256/ZH1/index.html

    Message: failed to load 'Application.js' from Application.js: TypeError: '' is null or not an object

    Line: 80

    Char: 14287

    Code: 0

    URI: http://localhost:4256/ZH1/resources/sap-ui-core.js

    This is the contents of the index.html file:

    <!-- Auto-Generated by SAP NetWeaver Gateway Productivity Accelerator, Version 1.1.1 -->




        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <link rel="stylesheet" href="app/css/MobileStyles.css">

        <!-- src Location of SAP UI5 libraries need to be changed to refer to right location -->        















    <body class="sapUiBody" role="application">

        <div id="content"></div>



    Do you have an idea how could i fix this?



  • Hi,

    Despite the details, I have managed to get some errors. I am developing in Eclipse. I test in the local eclipse plug-in and then publish on tomcat 7. I am getting following errors. Following screenshots show the message and my code for service.

    One more query is, I have created connectivity.js, but if I declare it in index.html with <Script> tags, I get resource not found error. I think the path is correct. It is ./resources/utils/connectivity.js.

    Finally, do I have to call that function from somewhere? It is not clear to me.

    Thanks for your help



    Err1.PNGService code.PNG

  • Hi Chandrashekhar,

    Its a very nice blog. It really helped me a lot specifically the part which resolves the Same Origin Policy issue as i was stuck with that issue for the past 2 days continuously. Really appreciate your work. Thanks again.


    Sumit Jindal

  • Hi,

    I created a starter application and followed your steps. I am getting an error

    Uncaught Error: failed to load 'Application.js' from Application.js: TypeError: Cannot read property 'Application' of undefined

    I am not sure why I am getting this. Please help. Thanks in advance.

    • There is a syntax error in your javascript file "Application.js". This is a runtime issue.

      So go through your file Application.js. Find the word "Application", check where it is wrong. Should be a simple typo error or something.

      Best Regards,

      Seyed Ismail MAC

  • Hi Chandra,

    I am also getting error: Uncaught Error: failed to load 'Application.js' from Application.js: TypeError: Cannot read property 'Application' of undefined

    Also, there is one more thing, while referring to jQuery JS file, I have to refer it with URL -

    I am not able to get it referenced with /resource/sap-ui-core.js

    I keep on getting resource not found if I use this way of referring the JS.

    Is my UI5 library corrupt? What should I do here to resolve the error? Please help.


        • /
          • Hi Peter,

            You didin't have application.js. Check pls. it should have the below content:



  "Application", {

              init : function() {

              // set global models

              /*var imgModel = new sap.ui.model.json.JSONModel("model/img.json");

              var langModel = new sap.ui.model.resource.ResourceModel({bundleName:"i18n.i18n", bundleLocale:"en"});

              sap.ui.getCore().setModel(imgModel, "img");

              sap.ui.getCore().setModel(langModel, "i18n");*/


              main : function() {

              // create app view and put to html root element

              var root = this.getRoot();

              sap.ui.jsview("app", "view.App").placeAt(root);



        • Hi Ameya,

          i get exactly the same error.

          My Application.js looks lik this:



"Application", {

              init : function() {





               //Call the method that created the model - login dialog will popup as no credantial where given



              main : function() {



              var root = this.getRoot();

              sap.ui.jsview("app.App", "app.App").placeAt(root);



          How did you solve this?

          Thanks in advance


  • Hi Chandrashekhar,

    Thnx for this wonderful blog.

    I followed every step but i am struck at the final step.

    At last i removed that i18n error as well as modified the bootstrap script in index.html, but now i am getting this 'Internal Server Error', and after execution i get 'No Data' on browser....attaching the screenshots of two herewith...

    Please Help....

    final error1.JPG

    browser screen.JPG

    • Hello All

      I changed the <param-value> accordingly to my local server, now the browser tools are not showing any error but still 'No Data' is displayed on the browser....why ??

      Please Help..

      no error final.JPG

      no error final.JPG
  • Hi Chandrashekhar,

    Your sharing helped me a lot.

    Could you also please share me how to create and send a request to manager as well the steps for approve/reject the same request by the manager


  • Hi all,

    How do i do it for Luna version. i also tried connecting the Kepler version but not able to connect the server

    I have put my server name

    port 443 because of HTTPS

    used my username password. but no got network connection error.



  • Hi,

    I also need to pass some parameters in the URL during the OData service call in the SAP UI5 application. How can this be done in SAPUI5?



  • Hi,

    I have followed the steps given in the blog and executed it and i am getting the following errors in the error log could anyone please suggest what are the following changes need to be done to avoid the below error log.



  • Hi...

    Can anyone help me out this issue

    What was the procedure to install SAP NetWeaver Gateway plug-in for Eclipse...

    i am using Eclipse LUNA and Eclipse Mars??

    Thanks in advance!!!!!!

  • Hi Chandra,

    In eclipse i already install all new software in that hierarchy i get all directory but i doesn't get ...

    SAP NetWeaver Gateway Option when i cresting new project....



    Umesh Kadlag

    • Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question.  The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable.  Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem.  If a blog or document is related, put in a link.  Read the Getting Started documents (link at the top right) including the Rules of Engagement. 

      NOTE: Getting the link is easy enough for both the author and Blog.  Simply MouseOver the item, Right Click, and select Copy Shortcut.  Paste it into your Discussion.  You can also click on the url after pasting.  Click on the A to expand the options and select T (on the right) to Auto-Title the url.

      Thanks, Mike (Moderator)

      SAP Technology RIG

  • The below settings worked for me while trying from eclipse.

    • web.xml:
            <!-- ============================================================== -->
    	<!-- UI5 proxy servlet -->
    	<!-- ============================================================== -->


    • manifest file data source:
    "dataSources": {
    			"ds_employee_xs": {
    				"uri": "../proxy/dev_pkg/services/myservice.xsodata",
    				"type": "OData",
    				"settings": {
    					"odataVersion": "2.0"