on 06-25-2013 3:24 PM
Hi. We are trying to consume oData using SAPUI5. We use the demo Gateway Sales Order. We are trying to create this application on mobile devices.
Below is our index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="../../../resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_mvi">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_mvi" theme -->
<script>
// Tell UI5 where to find application content
sap.ui.localResources("view"); //view is the name of the folder where views are stored
jQuery.sap.registerModulePath('Application', 'Application');
// Launch application
jQuery.sap.require("Application");
var oApp = new Application( {
root : "content"
}); // instantiate your application and mark the HTML element with id "content" as location for the UI
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
This is our Application.js
jQuery.sap.declare("Application");
jQuery.sap.require("sap.ui.app.Application");
//Application is the ID
sap.ui.app.Application.extend("Application", {
init : function() {
// set global models
var oModel = new sap.ui.model.odata.ODataModel("proxy/http/gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/",false,"GW@ESW","ESW4GW");
sap.ui.getCore().setModel(oModel);
},
main : function() {
// create app view and put to html root element
var root = this.getRoot();
sap.ui.jsview("app", "view.App").placeAt(root); //root is div id content
}
});
Tried loading it on Chrome (disabled SOP) but we get this error.
Hi Melanie
Just wanted to explain a bit why you're getting the error in the first place.
Your SAPUI5 bootstrap:
<script src="../../../resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_mvi">
suggests that the runtime is being loaded from somewhere in a different part of the directory tree to the app being served; I would hazard a guess that you're somewhere within the SAPUI5 SDK. This is normally fine.
However, with the "proxy/http/..." prefix to your data URL, you're using a "special" mechanism that is available from projects that are usually built in Eclipse, often via the SAPUI5 Application Development new-project wizard. This special mechanism is a reverse proxy servlet that is defined in the WEB-INF/web.xml resource like this:
<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>
This is how the "proxy/http/..." prefixes are resolved, and the servlet is available from the 'root' of the project being served (e.g. by Tomcat) - in other words, "proxy/http/..." is relative to the project's base URL, such as http://localhost:8080/MyProject/.
So if you're not running in an environment that has the reverse proxy servlet available, when you have the URL
proxy/http/gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/
in your OData model declaration, this will be resolved relative to where you are, which is:
/sapui5/sapui5_app/shoppingCart/WebContent/proxy/http/gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/
In fact, looking at that URL, it does look like you may have an Eclipse project "shoppingCart", so it may also be worth trying to prefix the url with "../" i.e.
../proxy/http/gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/
to see what happens.
cheers
dj
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Dj,
We have tried both
/sapui5/sapui5_app/shoppingCart/WebContent/proxy/http/gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/
and
../proxy/http/gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/
but we are still having error.
http://msaldua:8000/sapui5/sapui5_app/shoppingCart/WebContent/proxy/http/gw.esworkplace.sap.com/sap/... 404 (Not Found)
and
http://msaldua:8000/sapui5/sapui5_app/shoppingCart/proxy/http/gw.esworkplace.sap.com/sap/opu/odata/s... 404 (Not Found)
We even tried this:
../WebContent/proxy/http/gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/
Still an error.
Hi Melanie
We might be able to find out together. What environment are you developing in? Eclipse? If so, are you following a wizard-generated setup? Are you using Tomcat, or some other web server (e.g. Apache)? Can you find the configuration?
If you can give us some of this information we have a chance to help you diagnose.
Cheers!
dj
HI DJ,
Got it to work by adding an SOP Suppress code I got from another forum. It's just weird that the proxy servlet from SAPUI5 doesn't work for me.
//SOP Suppress
var domainString = "document.domain";
domainstring = "*.com";
'Access-Control-Allow-Origin: *.local.com';
'Access-Control-Allow-Headers: X-KEY';
//var oModel = new sap.ui.model.odata.ODataModel("http://gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/",false,"GW@ESW","ESW4GW");
var oModel = new sap.ui.model.odata.ODataModel("https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV",false,"[username]","[password]");
Now, our problems is the code adds $metadata on our oData call. So say we call want to call a sample data from the service using this link
https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/SalesOrders
it gives us https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/SalesOrders/$metadata
which obviously gives us an error.
Any idea how $metadata gets appended to our call?
Thanks!
Hi Melanie,
when using an oData model, the runtime reads the "metadata" document for the specified oData service. In the example above, when you create the model with the URL "https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV" the metadata document should be requested with the URL "https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/$metadata" which is working fine on my side.
But you are saying that the system tries to follow the link "
https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/SalesOrders/$metadata" which produces an error on my side too. Could you please recheck the URL you are using when you instantiate the model?
Regards, Frank
P.S.: Here is a very brief example for accessing sales orders:
var result = new sap.ui.model.odata.ODataModel("proxy/https/sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV");
sap.ui.getCore().setModel(result);
// Create the column templates
var nameColumnTemplate = new sap.ui.commons.TextField({
value: "{CustomerName}"
});
var sumColumnTemplate = new sap.ui.commons.TextField({
value: "{TotalSum}"
});
var oTable = new sap.ui.table.Table({ // create Table UI
columns : [
{label: "Name", template: nameColumnTemplate },
{label: "Sum", template: sumColumnTemplate }
]
});
oTable.setModel(result); // bind JSON model to Table
oTable.bindRows({path: "/SalesOrders"} ); // bind the table rows to an array
oTable.placeAt("content"); // place Table onto UI
Message was edited by: Frank Welz Example added.
Hi Frank
I was able to get some data from the
https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV link also. Upon checking my network console, my code adds a $metadata on my call. So technically the above link will work since there is an existing https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/$metadata call. But when I'm calling specific calls like https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/SalesOrders or https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/SalesOrders('0500000000')/Sale...
I'm getting an error since my code adds $metadata at the end of each call.
I'm not sure if this is really how to instantiate these calls.
Regards,
Melanie
Hi Frank,
Seems like my problem is that I still bind the data on the same table row. Just need to bind it to another table row and put that table row on a different page.
I just realized that disabling web security is not the best workaround. So now I'm kinda back to to my initial problem of complying to SOP via proxy servlet. Do you have any experience on this?
Thanks.
-melanie
Hi All,
I have followed some suggested steps to deploy my app in Android Platform .
The below is the link from which i have done the deployment.
Now my issue is am able to see the android application view but am unable to see my ui5 applicaation in that android .Can any body please help me solve my issue
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Melanie Saldua,
Im facing the same issue. Where do i have to add this header 'Access-Control-Allow-Origin' in odatamodel?
i have tried this in oDataModel with setheaders method.
var oModel = new sap.ui.model.odata.ODataModel(serviceUrl,false,"userID","Password");
mheaders='{"Access-Control-Allow-Origin":"*"}';
oModel.setHeaders(mheaders);
sap.ui.getCore().setModel(oModel);
This code is not working. Can you share the solution? where exactly do i have to add this Access control header?
Thanks in Advance
yokesvaran Kumarasamy
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi,
I think you have to replace sap.ui.getCore().setModel(oModel) line with sap.ui.getCore().setModel(oModel,"mymodel")
where mymodel is the name of your model.
After that you can use your model by following line
sap.ui.getCore().getModel("mymodel")
Hope it will help you.
Regards,
Umesh Singhal.
Hi Melanie,
I have a query and i hope to get an answer from you for that .
I need to take a name as input and search for the related records and from those records i need to fetch the details of its master table and display it on the screen . hope you could give a solution for that
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Guys,
I am facing a Problem with OData Model. At the moment I am using JSON Model which is working fine. But when I try to use OData Model as in the following statement:
var oModel = new sap.ui.model.odata.ODataModel("http://abcdefcs1p.int.abc.poc:8000/sap/opu/odata/sap/ZTDS_APP_CRM_SRV/BUPASET");
Then I am getting the following error:
GET http://abcdefcs1p.int.abc.poc:8000/sap/opu/odata/sap/ZTDS_APP_CRM_SRV/BUPASET/$metadata 400 (Bad Request)
Resource not found for the segment '$metadata'
I am not getting this error when I remove BUPASET from the end of URI but then I am also not getting the results
var oModel = new sap.ui.model.odata.ODataModel(http://abcdefcs1p.int.abc.poc:8000/sap/opu/odata/sap/ZTDS_APP_CRM_SRV);
Please some one tell me the solution to this problem.
Thanks and best regards.
Fahad
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Try putting the /BUPASET in the binding statement as the path and leaving it off the Model Definition.
The Model just needs the base server URL and the binding can then use whatever path you want to access within the service, in your case /BUPASET
The application will make a service call with the $metadata first after which your binding statement with the /BUPASET path can then retrieve the data.
This message was moderated.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Guys,
Finally made it to work. I needed reverse proxy my Apache Server.
Thank you for all the people who helped.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Melanie,
I am trying to build salesorder application using oData service url https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/ and when i am running the app on apache-tomcat server through eclipse getting blank screen..and in my company we are all using proxy network...
I followed your discussion but could not find the solution..Can you please give me the steps how you made it to work...thanks in advance...
Ramprasad.V
Hi Ramprasad,
You can do reverse proxy your apache server. You can search the internet regarding how to reverse proxy https. Basically you need to have to install a certificate in your browser. If you are going to use reverse proxy, you need to get out of your company's proxy network though.
The simplest way is to disable your browser's web security via cmd i.e. chrome.exe --disable-web-security. Though you can only do this using a desktop's browser...not a mobile browser.
Hi Melanie,
Glad to hear that you resolved the error..... I'm facing the same problem (already configured the Reverse Proxy et al with URL rewrite Rule)....... Could you please help me by providing the info of httpd.conf file (in case any special configuration is required).
Thanking you,
~ Mahendra
Hi,
Refer http://scn.sap.com/community/developer-center/front-end/blog/2013/06/29/solving-same-origin-policy-i... for SOP problem.
Regards,
Chandra
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Chandra,
The link above maybe not applicable to me. It says that I can
1. Use JSONP to make cross-domain Ajax requests
- not possible since NWGW does not support JSONP
2. Establish a Reverse Proxy with Apache HTTP Server
- not sure if we are allowed to touch our server configs. Need a tutorial on how to reverse proxy https though
3. Cross-origin resource sharing
- can't see a "Access-Control-Allow-Origin" on my header response
Thanks for this link though.
-Melanie
Hi Melanie, please have a look at our UI5 on Gateway end-to-end tutorial . It shows how to ...
I hope the tutorial document answers your question. Regards, Bertram
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Bertram,
I followed your tutorial.I'm having problems still on complying with SOP. Although I have successfully fetch some data already by disabling the web security of my browser. This is not the ideal workaround. Seems like SAPUI5 SimpleProxyServlet is the way to go.
Here is my web.xml code
<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>https://sapes1.sapdevcenter.com:443</param-value>
</context-param>
and here is my js file
jQuery.sap.declare("Application");
jQuery.sap.require("sap.ui.app.Application"); //dont erase
//Application is the ID
sap.ui.app.Application.extend("Application", {
init : function() {
var sServiceUrl = "sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV";
var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, false,
"username", "password");
sap.ui.getCore().setModel(oModel);
},
main : function() {
// create app view and put to html root element
var root = this.getRoot();
sap.ui.jsview("app", "view.App").placeAt(root); //root is div id content
}
});
Below is the error.
- sap-ui-core.js:41
GET http://localhost:8000/salesOrder/WebContent/resources/sap/m/messagebundle_en_US.properties 404 (Not Found) sap-ui-core.js:25
GET http://username:password@localhost:8000/salesOrder/WebContent/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/... 404 (Not Found) sap-ui-core.js:25
GET http://username:password@localhost:8000/salesOrder/WebContent/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/... 404 (Not Found) resources/sap/ui/thirdparty/datajs.js:17
2013-07-09 00:22:47 The following problem occurred: HTTP request failed404,Not Found,404 Not Found Not Found
The requested URL /salesOrder/WebContent/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/SalesOrders was not found on this server.
Additionally, a 406 Not Acceptable
error was encountered while trying to use an ErrorDocument to handle the request.
Apache/2.4.3 (Win32) OpenSSL/1.0.1c PHP/5.4.7 Server at localhostPort 8000 - sap-ui-core.js:41
Hope you can help me. Thanks.
- melanie
var sServiceUrl = "proxy/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV";
<context-param> <param-name>com.sap.ui5.proxy.REMOTE_LOCATION</param-name></context-param>
var sServiceUrl = "proxy/https/sapes1.sapdevcenter.com:443/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV";
Hi Frank,
I'm still having an error.
Failed to load resource: the server responded with a status of 404 (Not Found) http://username:password@localhost:8000/salesOrder/WebContent/proxy/https/sapes1.sapdevcenter.com:44...
Hallo Melanie,
for accessing HTTPS-systems via the ResourceServlet or the SimpleProxyServlet it might be necessary to import the root certificate into the Java keystore. I've not tested it on my own machine and actually lack more details, but there are other forum threads related to the same topic (e.g. ), they might help to solve your problem.
Regards, Bertram
Hi Melanie,
The error shows that the model is taking up the proxy/... URL as a file path and hence its searching in the application directory. Try removing the proxy and directly giving http://
--Tufale
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Tufale,
When we tried doing that we still get an error. See below:
Failed to load resource: Origin http://127.0.0.1 is not allowed by Access-Control-Allow-Origin. http://gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/$metadata
XMLHttpRequest cannot load http://gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/$metadata. Origin http://127.0.0.1 is not allowed by Access-Control-Allow-Origin. 127.0.0.1/:1
Think this is because we are running the app on our localhost and not hosted on the same server as the gateway demo.
User | Count |
---|---|
80 | |
24 | |
11 | |
9 | |
7 | |
6 | |
5 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.