Skip to Content
Author's profile photo Chandrashekhar Mahajan

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

Update

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

/wp-content/uploads/2013/05/ui5_gw2_224860.jpg

   3. Select List/Details Application (SAPUI5) 

/wp-content/uploads/2013/05/ui5_gw3_224867.jpg

   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

/wp-content/uploads/2013/05/ui5_gw4_224868.jpg


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

/wp-content/uploads/2013/05/ui5_gw5_224869.jpg

  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.

/wp-content/uploads/2013/05/ui5_gw6_224873.jpg


   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.

/wp-content/uploads/2013/05/ui5_gw7_224874.jpg


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

/wp-content/uploads/2013/05/ui5_gw8_224875.jpg

   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.

/wp-content/uploads/2013/05/ui5_gw9_224879.jpg

   10. Click on Next

/wp-content/uploads/2013/05/ui5_gw10_224880.jpg

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

/wp-content/uploads/2013/05/ui5_gw11_224881.jpg

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

/wp-content/uploads/2013/05/ui5_gw12_224882.jpg

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

/wp-content/uploads/2013/05/ui5_gw13_224883.jpg

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

/wp-content/uploads/2013/05/ui5_gw14_224884.jpg

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

/wp-content/uploads/2013/05/ui5_gw15_224885.jpg

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.

/wp-content/uploads/2013/05/ui5_gw16_224886.jpg

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

/wp-content/uploads/2013/05/ui5_gw17_224887.jpg

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.

/wp-content/uploads/2013/05/ui5_gw18_224888.jpg

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

/wp-content/uploads/2013/05/ui5_gw19_224889.jpg

It should be,

src=“resources/sap-ui-core.js”

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.

/wp-content/uploads/2013/05/ui5_gw20_224890.jpg

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 –>

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

<servlet>

<servlet-name>SimpleProxyServlet</servlet-name>

<servlet-class>com.sap.ui5.proxy.SimpleProxyServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>SimpleProxyServlet</servlet-name>

<url-pattern>/proxy/*</url-pattern>

</servlet-mapping>

<context-param>

<param-name>com.sap.ui5.proxy.REMOTE_LOCATION</param-name>

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

<param-value>http://hostname.com</param-value>

</context-param>

Also add below code to index.html

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

/wp-content/uploads/2013/05/ui5_gw21_224894.jpg

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

/wp-content/uploads/2013/05/ui5_gw22_224895.jpg

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”);

/wp-content/uploads/2013/05/ui5_gw23_224896.jpg

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

Output –

/wp-content/uploads/2013/05/ui5_gw24_224900.jpg

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,

http://gw.esworkplace.sap.com/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/$metadata

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

/wp-content/uploads/2013/05/ui5_gw25_225646.jpg

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

http://gw.esworkplace.sap.com/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/CarrierCollection

you may get output as below,

/wp-content/uploads/2013/05/ui5_gw26_225677.jpg

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

/wp-content/uploads/2013/05/ui5_gw27_225678.jpg

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

/wp-content/uploads/2013/05/ui5_gw28_225679.jpg

connectivity.js will look as below,

/wp-content/uploads/2013/05/ui5_gw29_225686.jpg

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

oTable.bindRows(“/CarrierCollection”);

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.


Assigned Tags

      97 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      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.

      J

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

      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.

      Regards,

      Chandra

      Author's profile photo Former Member
      Former Member

      Hi Chandra.  Thank you for the additional information.  This is definitely helpful. Thanks again.

      Author's profile photo Midhun VP
      Midhun VP

      Thanks. Good job. It is very useful.

      - Midhun VP

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

      Thanks Midhun !

      Author's profile photo Former Member
      Former Member

      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.

      Thanks

      Ritushree Saha

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

      Hi Ritushree,

      I do not have much idea about the error you are getting in safari browser. you can check https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/BrowserSupport.html for browser support. also you may want to see Note 1716423 - SAPUI5 Browser Support for Mobile and Desktop Applications for additional information.

      Thanks,

      Chandra

      Author's profile photo Vijay Vegesana
      Vijay Vegesana

      Hi Chandra,

      Good document,very helpful...

      but after opening in the chrome..i can see the same error which u posted, when i click on

      index.html.16, for the first time it has shown the same code asyou showed in your  screen shot..but from the second time iamnot able to see the code itself...

      can you please help me?

      regards,

      Vijay

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

      Hi Vijay,

      Error unknown protocol:sap comes when your path to SAPUI5 (src="./sapui5-1.4/resources/sap-ui-core.js") is not correct.

      you need to replace the text in quotation marks by a link to the location where the files for SAPUI5 version 1.4 are located.

      generally you can have below path in you index.html

      src="resources/sap-ui-core.js"

      Please do this correction and again check the logs in chrome JS console/developer tool.

      additionally check if you are able to make connection to OData service as mentioned in my blog.

      Regards,

      Chandra

      Author's profile photo Vijay Vegesana
      Vijay Vegesana

      Hi Chandra,

      Thatks for quick reply,  can you just say me how to edit the code..

      Author's profile photo Vijay Vegesana
      Vijay Vegesana

      Hi  Chandra,

      I installed SAPUI5 from eclipse itself..please say how to edit the path and where to save the path..

      i did it my project in eclipse..but it is not getting reflected..

      Thanks Once Again,

      Vijay

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

      I assume that you are getting error from index.html. As mentioned in this blog, you need to edit the path in index.html

      Author's profile photo Vijay Vegesana
      Vijay Vegesana

      I am not able to edit the code..i need to edit in the browser itself right?

      how to got to edit mode?

      Author's profile photo Former Member
      Former Member

      Thank you very much. Nice blog and very useful indeed.

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

      Thanks ! 🙂

      Author's profile photo Rajeev Goswami
      Rajeev Goswami

      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.

      Thanks

      RG

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

      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.

      Regards,

      Chandra

      Author's profile photo Ali Chalhoub
      Ali Chalhoub

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

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

      Author's profile photo Dheerendra Shukla
      Dheerendra Shukla

      nice blog, with additional information...which help to run the application in one go...

      Thank Chandrashekhar Mahajan..

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

      Thanks Dheerendra !

      Author's profile photo Former Member
      Former Member

      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>java.net.MalformedURLException: unknown protocol: sap at java.net.URL.&lt;init&gt;(Unknown Source) at java.net.URL.&lt;init&gt;(Unknown Source) at java.net.URL.&lt;init&gt;(Unknown Source) at com.sap.ui5.proxy.SimpleProxyServlet.service(SimpleProxyServlet.java:182) at javax.servlet.http.HttpServlet.service(HttpServlet.java:848) at org.eclipse.jetty.servlet.ServletHolder.handle(ServletHolder.java:598) at org.eclipse.jetty.servlet.ServletHandler.doHandle(ServletHandler.java:486) at org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:119) at org.eclipse.jetty.security.SecurityHandler.handle(SecurityHandler.java:524) at org.eclipse.jetty.server.session.SessionHandler.doHandle(SessionHandler.java:233) at org.eclipse.jetty.server.handler.ContextHandler.doHandle(ContextHandler.java:1065) at org.eclipse.jetty.servlet.ServletHandler.doScope(ServletHandler.java:413) at org.eclipse.jetty.server.session.SessionHandler.doScope(SessionHandler.java:192) at org.eclipse.jetty.server.handler.ContextHandler.doScope(ContextHandler.java:999) at org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:117) at org.eclipse.jetty.server.handler.HandlerWrapper.handle(HandlerWrapper.java:111) at org.eclipse.jetty.server.Server.handle(Server.java:350) at org.eclipse.jetty.server.AbstractHttpConnection.handleRequest(AbstractHttpConnection.java:454) at org.eclipse.jetty.server.AbstractHttpConnection.headerComplete(AbstractHttpConnection.java:890) at org.eclipse.jetty.server.AbstractHttpConnection$RequestHandler.headerComplete(AbstractHttpConnection.java:944) at org.eclipse.jetty.http.HttpParser.parseNext(HttpParser.java:630) at org.eclipse.jetty.http.HttpParser.parseAvailable(HttpParser.java:230) at org.eclipse.jetty.server.AsyncHttpConnection.handle(AsyncHttpConnection.java:77) at org.eclipse.jetty.io.nio.SelectChannelEndPoint.handle(SelectChannelEndPoint.java:606) at org.eclipse.jetty.io.nio.SelectChannelEndPoint$1.run(SelectChannelEndPoint.java:46) at org.eclipse.jetty.util.thread.QueuedThreadPool.runJob(QueuedThreadPool.java:603) at org.eclipse.jetty.util.thread.QueuedThreadPool$3.run(QueuedThreadPool.java:538) at java.lang.Thread.run(Unknown Source) </pre> <hr /><i><small>Powered by Jetty://</small></i><br/>              
      Author's profile photo Chandrashekhar Mahajan
      Chandrashekhar Mahajan
      Blog Post Author

      Hi Venkat,

      Error unknown protocol:sap comes when your path to SAPUI5 (src="./sapui5-1.4/resources/sap-ui-core.js") is not correct.

      you need to replace the text in quotation marks by a link to the location where the files for SAPUI5 version 1.4 are located.

      generally you can have below path in you index.html

      src="resources/sap-ui-core.js"

      Please do this correction and again check the logs in chrome JS console/developer tool.

      additionally check if you are able to make connection to OData service as mentioned in my blog.

      Regards,

      Chandra

      Author's profile photo Former Member
      Former Member

      Hi Chandrashekhar Mahajan,

          I am getting the same error even after i modify this src in index.html. And one more thing can you please tell me how to set data on a text which is inside simle form.

         thanks.

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

      Hi Gaurav,

      May be you can run your application by cloud based ui5 runtime by setting src to https://sapui5.hana.ondemand.com/resources/sap-ui-core.js and to set data inside form, you can refer SAPUI5 SDK - Demo Kit

      Regards,

      Chandra

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

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

        <context-param>

                          <param-name>com.sap.ui5.proxy.REMOTE_LOCATION</param-name>

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

         </context-param>

        and put below script at connectivity.js file.

      function getUrl(sUrl) {

                            if (sUrl == "")

                                      return sUrl;

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

                                                || window.location.hostname == "https://sapes1.sapdevcenter.com") {

                                      return "proxy" + sUrl;

                            } else {

                                      return sUrl;

                            }

                 

                  }

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

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

      Hi Venkat,

      I have already done what you have suggested but it still says the below error in javascript console

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

      Can you please help me on how i should debug further

      Author's profile photo Former Member
      Former Member

      please send your web.xml and connectivity .js code.....

      Author's profile photo Former Member
      Former Member

      Venkat ,

      can you give me your mail id so that i can send the code.(I am not able to attach files)

      Also can you tell me how to debug further ie

      how to verify whether the proxy servlet has properly constructed the Odata service url

      Author's profile photo Former Member
      Former Member

      please send to me  at

      venkat at hrksolutions dot com

      Author's profile photo Former Member
      Former Member

      Venkat,

      I pointed to another Odata service of another Gateway server.The solution you suggested is working.

      Thanks for your prompt reply

      Author's profile photo Former Member
      Former Member

      Hi venkat,

          I am also having the same proble. No data in table. Can you share the solution with all of us.

      BR,

      Deepak

      Author's profile photo Former Member
      Former Member

      Hi Venkat,

      Just curious on your suggested solution to the problem, is this by adding the following entry?

      $.response.headers.set('access-control-allow-origin', '*');

      Thanks.

      Author's profile photo Former Member
      Former Member

      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 ?

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

      Hi,

      Yes we can develop UI5 application with user inputs and with filter. you can use oData service RMTSAMPLEFLIGHT.

      Refer my blog http://scn.sap.com/community/netweaver-gateway/blog/2013/06/11/how-to-create-android-application-consuming-odata-service-with-help-of-gateway-productivity-accelerator-gwpa where I am using this service to develop android application. you can simply use it to develop UI5 application.

      Regards,

      Chandra

      Author's profile photo Balloni Nicola
      Balloni Nicola

      Good job!!!!

      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      superb job man.

      very useful blog. 🙂

      thanks fo sharing.

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

      Thanks !

      Author's profile photo Former Member
      Former Member

      Brilliant Blog! Thanks 🙂

      Author's profile photo Mona Rahul
      Mona Rahul

      Great blog. Thanks for explaining each step in detail. I could work it out with no issues. Thanks a lot, and keep posting.

      Author's profile photo Former Member
      Former Member

      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 com.sap.ui5.proxy.SimpleProxyServlet service

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

        - target: https://sapes1.sapdevcenter.com:443/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/FlightCollection/$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 com.sap.ui5.proxy.SimpleProxyServlet service

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

        - target: https://sapes1.sapdevcenter.com:443/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/FlightCollection/$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

          => set-cookie: MYSAPSSO2=AjQxMDMBABhJADgAMwAxADAANwA5ACAAIAAgACAAIAACAAY1ADIAMAADABBFAFMAMQAgACAAIAAgACAABAAYMgAwADEAMwAwADgAMAA2ADIAMQAzADQABQAEAAAACAYAAlgACQACRQD%2fAVYwggFSBgkqhkiG9w0BBwKgggFDMIIBPwIBATELMAkGBSsOAwIaBQAwCwYJKoZIhvcNAQcBMYIBHjCCARoCAQEwbzBkMQswCQYDVQQGEwJERTEcMBoGA1UEChMTU0FQIFRydXN0IENvbW11bml0eTETMBEGA1UECxMKU0FQIFdlYiBBUzEUMBIGA1UECxMLSTAxMjAwMDM0MTExDDAKBgNVBAMTA0U2NAIHIBECFAgjUTAJBgUrDgMCGgUAoF0wGAYJKoZIhvcNAQkDMQsGCSqGSIb3DQEHATAcBgkqhkiG9w0BCQUxDxcNMTMwODA2MjEzNDQ2WjAjBgkqhkiG9w0BCQQxFgQUwdb9wdl5AmYAzIOBU%2fR%21213usMUwCQYHKoZIzjgEAwQvMC0CFC%2fLef0sAPuREwuFD5q1TcLQpQ88AhUA0%21xEaKoe0iwN5aDMunu6d5nKcBA%3d;  path=/; domain=.sapdevcenter.com

          => 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

      Regards,

      Sri

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

      I do not think there is any issue with the gateway service because i am able to get the data for url https://sapes1.sapdevcenter.com/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/FlightCollection

      Can you try to run the application in chrome browser? ans share the error details which will get displayed in developer tool (cntl + shift + i)

      Regards,

      Chandra

      Author's profile photo Former Member
      Former Member

      Hi Chandra,

      There are no errors on the console. On the chrome browser http://localhost:8080/MySampleFlight/ is repeatedly requesting the service for data.

      I already fixed Access-Control-Allow-Origin error.

      My web.xml has the following:

      <context-param>

      <param-name>com.sap.ui5.proxy.REMOTE_LOCATION</param-name>

      <param-value>https://sapes1.sapdevcenter.com:443</param-value>

      </context-param>

      My connectivity.js:

      function getUrl(sUrl)

      {

             if(sUrl == "")

                 return;

             if(window.location.hostname = "localhost" || window.location.hostname == "https://sapes1.sapdevcenter.com")

                 return "proxy" + sUrl;

             else

                 return sUrl;

      }

      var serviceUrl = getUrl('/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/');

      My flights.controller.js

      oTable.bindRows("/FlightCollection");

      Also I can able to access the service from the browser:

      http://localhost:8080/MySampleFlight/proxy/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/FlightCollection/

      https://sapes1.sapdevcenter.com:443/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/FlightCollection/

      The only errors that I get is on the Eclipse console which I pasted above.

      Regards,

      Sri

      Author's profile photo Former Member
      Former Member

      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) https://sapes1.sapdevcenter.com/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/$metadata
      Failed to load resource: Origin http://localhost:64526 is not allowed by Access-Control-Allow-Origin. https://sapes1.sapdevcenter.com/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/$metadata
      XMLHttpRequest cannot load https://sapes1.sapdevcenter.com/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/$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

      http://localhost:64484/MySampleFlight/resources/sap-ui-core.js

      Regards,

      Madhu

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

      As per error log, it seems that you do not have authorization to SAP demo gateway system. Please get the proper access and try again.

      Regards,

      Chandra

      Author's profile photo Ebinezar Munnangi
      Ebinezar Munnangi

      Hi Chandrashekhar,

      I have followed every step from the above blog..and getting the authorization error as same as Madhuyukta.

      I believe I have given the correct login details which I got from ES1 system and I am able to see the XML file(https://sapes1.sapdevcenter.com/sap/opu/sdata/iwfnd/SAMPLEFLIGHT/$metadata) by providing my credentials and also able to login to ES1 system.(Logon).

      Could you please tell me what else i required to consume the Odata from the SAP ES1 demo system.

      Thanks in Advance,

      Regards,

      Ebinezar.

      Author's profile photo Arshad Ansary
      Arshad Ansary

      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 (com.sap.iw.gw.oc.eclipse.feature.feature.group 2.6.400.201211111622)

        Missing requirement: Component List 2.6.400.201211111622 (com.sap.iw.gw.oc.eclipse.component.list 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 (com.sap.iw.gw.oc.eclipse.feature.feature.group 2.6.400.201211111622)

          To: com.sap.iw.gw.oc.eclipse.component.list [2.6.400.201211111622]

      **************************************************************

      Regards

      Arshad

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

      Hi Arshad,

      Refer this thread http://scn.sap.com/thread/3149134

      It seems that you are missing dependent plugins.

      Regards,

      Chandra

      Author's profile photo Ebinezar Munnangi
      Ebinezar Munnangi

      Hi,

      Could you please tell me how do I log out from SAP Development system in Eclipse.

      Thanks & Regards,

      Ebinezar.

      Author's profile photo Former Member
      Former Member

      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?

      Regards,

      Vida

      Author's profile photo Praveer Kumar Sen
      Praveer Kumar Sen

      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.

      Praveer.

      Author's profile photo Ramkumar Krishnasamy
      Ramkumar Krishnasamy

      Great Work!!!

      Author's profile photo Former Member
      Former Member

      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,

      Amina

      Author's profile photo Seyed Ismail
      Seyed Ismail

      Solved?

      Otherwise, check your Entity Type properties.

      Author's profile photo Seyed Ismail
      Seyed Ismail

      Only <param-name>com.sap.ui5.proxy.REMOTE_LOCATION</param-name> solved my issue!

      Thanks, I was suffering with it.

      Author's profile photo Former Member
      Former Member

      Hi Seyed,

      Which file did you put this code in?

      <param-name>com.sap.ui5.proxy.REMOTE_LOCATION</param-name>


      Thanks

      Amina

      Author's profile photo Seyed Ismail
      Seyed Ismail

      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 "com.sap.ui5.proxy.REMOTE_LOCATION".

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

      Webxml.jpg

      Hope this helps...

      Thanks,

      Ismail MAC

      Author's profile photo Seyed Ismail
      Seyed Ismail

      If it is not solved yet, Please clear you browser cache and try.

      Ismail MAC

      Author's profile photo Former Member
      Former Member

      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/xxxxx.com:xxxxxx/sap/opu/sdata/sap/Y_xxxx_GET_xxxxxxx_SVC_REPORTS/y_xxxxx_get_xxxxx_reCollection?$skip=0&$top=7&$inlinecount=allpages -

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

      Author's profile photo Seyed Ismail
      Seyed Ismail

      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 = com.sap.ui5.proxy.REMOTE_LOCATION

               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.

      Author's profile photo Former Member
      Former Member

      Thnx Chandrashekar

      Very Useful Info, keep coming with more such docs..

      Cheers 😉

      Pradyp

      Author's profile photo Former Member
      Former Member

      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,

      Katya

      Author's profile photo Seyed Ismail
      Seyed Ismail

      Hi Katya,

      Repeat the process accordingly with your new Service Link...

      Regards,

      Ismail MAC

      Author's profile photo Former Member
      Former Member

      Hi Ismail,

      But how could I open wizard for choosing Service without creating new project?

      Regards,

      Katya

      Author's profile photo Seyed Ismail
      Seyed Ismail

      No need for that in fact!

      1. If your new service is going to return data of same structure(say name, age, class), You can reuse the same view.

      2. Otherwise if both are different(say it has additional one more column name, age, class, town), you can add one more more view and then switch between the views accordingly or you can alter the same data table in the same view.

      For switching between views, Please refer this link JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;icon&quot; href=&quot;http://static.jsbin.…

      Please get back to me(macismail2003@gmail.com) if you more doubt.

      Thanks,

      Ismail MAC

      Author's profile photo Former Member
      Former Member

      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: https://sapes1.sapdevcenter.com/)

      Message: 'sap.ui.app.Application' 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: 'sap.ui.app.Application' 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 -->

      <!DOCTYPE HTML>

      <html>

      <head>

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

          <script

              src="resources/sap-ui-core.js"

              id="sap-ui-bootstrap"   

              type="text/javascript"

              data-sap-ui-libs="sap.m">

          </script>

          <script>

              sap.ui.localResources("Authentication");

              jQuery.sap.require("Authentication.Authentication");

              $(document).ready(function(){

                  authenticate();

              });

          </script>

      </head>

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

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

      </body>

      </html>

      Do you have an idea how could i fix this?

      Regards,

      Rosen

      Author's profile photo Mani Kothapalli
      Mani Kothapalli

      Good Blog

      Author's profile photo Former Member
      Former Member

      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

      Regards

      Abhi

      Err1.PNGService code.PNG

      Author's profile photo Sumit Jindal
      Sumit Jindal

      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.

      Regards,

      Sumit Jindal

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

      Thanks 🙂

      Regards,

      Chandra

      Author's profile photo Sumit Jindal
      Sumit Jindal

      Hi Chandra,

      I have a doubt. Although i am using the wizard to create the SAP UI5 List/Details view in my app, compared to the browser output shown in your case, i am getting the sales order or the item level details in vertical manner. Please see the below outputs & help me rectify the same asap:

      SalesOrder.JPG

      SalesOrderItems.JPG

      Regards,

      Sumit Jindal

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

      Hi,

      Please see my answers in thread How to make the UI5 application responsive ?

      Regards,

      Chandra

      Author's profile photo Bharath Srinivas
      Bharath Srinivas

      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.

      Author's profile photo Seyed Ismail
      Seyed Ismail

      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

      Author's profile photo Ameya Pimpalgaonkar
      Ameya Pimpalgaonkar

      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 - https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js

      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.

      Ameya

      Author's profile photo Sumit Jindal
      Sumit Jindal

      Hi Ameya,

      Can you please post the code of the file where you are getting the error. Thanks.

      Regards,

      Sumit Jindal

      Author's profile photo Ameya Pimpalgaonkar
      Ameya Pimpalgaonkar

      Hi Sumit,

      I have managed to fix the error. I was getting uncaught exception and it was from connection.js.

      Ameya

      Author's profile photo Former Member
      Former Member

      Hi, How did you solve the problem ?

      I am getting this error :

      Thanks.

      Author's profile photo Seyed Ismail
      Seyed Ismail

      Hi Peter,

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

      jQuery.sap.declare("Application");

      jQuery.sap.require("sap.ui.app.Application");

      sap.ui.app.Application.extend("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);

        }

      });

      Author's profile photo Sebastian Hellmann
      Sebastian Hellmann

      Hi Ameya,

      i get exactly the same error.

      My Application.js looks lik this:

      jQuery.sap.declare("Application");

      sap.ui.localResources("util");

      sap.ui.app.Application.extend("Application", {

          init : function() {

        jQuery.sap.require("util.Utility");

        jQuery.sap.require("util.Formatter");

        jQuery.sap.require("util.Connectivity");

        jQuery.sap.require("util.BusyDialogHandler");

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

        createModel();

          },

          main : function() {

        loadTheme("sap_bluecrystal");

        sap.ui.localResources("app");

          var root = this.getRoot();

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

        }

      });

      How did you solve this?

      Thanks in advance

      Sebastian

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo BHARANIDHARAN S P M
      BHARANIDHARAN S P M

      Hi,

      I am also getting blank page upon executing the demo UI5 application using eclipse.

      Kindly let me know the solution.

      Regards,

      Bharani

      Author's profile photo Former Member
      Former Member

      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

      Thanks!!!

      Author's profile photo Former Member
      Former Member

      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.

      Regards

      Arun

      Author's profile photo Former Member
      Former Member

      Hi Arun,

      Try it out with Juno Version, its working fine

      Author's profile photo Kaan Ozdogan
      Kaan Ozdogan

      Hi,

      Try it step by step but I have get error 404.

      Help me pls

      Author's profile photo Former Member
      Former Member

      Hi,

      Have you deployed your application to server?

      Author's profile photo Nitesh Jain
      Nitesh Jain

      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?

      regards

      Nitesh

      Author's profile photo Avinash Ayanala
      Avinash Ayanala

      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.

      Regards,

      Avinash

      Author's profile photo Former Member
      Former Member

      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!!!!!!


      Author's profile photo Former Member
      Former Member

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

      snw.JPG

      Regards

      Umesh Kadlag

      Author's profile photo Amel Saidani
      Amel Saidani

      Hi

      Have u found a solution to your problem im facing the same issue

      Author's profile photo Former Member
      Former Member

      Hi...

      I trying to access remote server from eclipse what was steps to configure remote server in eclipse ...

      Thanks in Adv..

      Author's profile photo Michael Appleby
      Michael Appleby

      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

      Author's profile photo Ekansh Saxena
      Ekansh Saxena

      The below settings worked for me while trying from eclipse.

      • web.xml:
              <!-- ============================================================== -->
      	<!-- UI5 proxy servlet -->
      	<!-- ============================================================== -->
      
      	<servlet>
      		<servlet-name>SimpleProxyServlet</servlet-name>
      		<servlet-class>com.sap.ui5.proxy.SimpleProxyServlet</servlet-class>
      		<init-param>
      			<param-name>com.sap.ui5.proxy.REMOTE_LOCATION</param-name>
      			<param-value>https://mydbpXXXXXXtrial.hanatrial.ondemand.com</param-value>
      		</init-param>
      	</servlet>
      	<servlet-mapping>
      		<servlet-name>SimpleProxyServlet</servlet-name>
      		<url-pattern>/proxy/*</url-pattern>
      	</servlet-mapping>

       

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