How to consume Sales Order Demo Gateway using ODataModel and display using SAP UI5 views
Now, you can use SDN’s Demo Gateway to build a Sample Sales Order application using SAP UI5 Views. Below is the snapshot of the view.
SDN Gateway URL : http://scn.sap.com/docs/DOC-31221
Below are the steps to built the application.
Prerequisite to built an application are:
- SAP UI 5 Plugin installed in your eclipse.
- Tomcat 6.x version.
- Java 1.6 or greater versions.
Steps:
- Create a new application, File -> Others -> SAPUI5 Application Development and name it as “SalesOrderService“.
2. Copy below HTML code in index.html file.
<!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.ui.commons, sap.ui.table"
data-sap-ui-theme="sap_platinum" >
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("salesorderservice");
var view = sap.ui.view({id:"idsalesOrderService1", viewName:"salesorderservice.retriveOrder", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
<div id="rContent" style="width:80%"></div>
</body>
</html>3. Copy Below code in your View file “retriveOrder.view.js”.
sap.ui.jsview("salesorderservice.retriveOrder", {
getControllerName : function() {
return "salesorderservice.retriveOrder";
},
createContent : function(oController) {
var layout = new sap.ui.commons.layout.MatrixLayout('layout');
layout.setWidth('80%');
// Search Box starts here
var searchPannel = new sap.ui.commons.Panel('searchPannel');
var sTitle = new sap.ui.commons.Title('sTitle');
sTitle.setText('Search Order ID');
searchPannel.setTitle(sTitle);
var sLayout = new sap.ui.commons.layout.MatrixLayout('sLayout');
sLayout.setWidth('50%');
var lb_search = new sap.ui.commons.Label('lb_search');
lb_search.setText("Order ID:");
var txt_search = new sap.ui.commons.TextField('txt_search');
txt_search.setTooltip('Please provide Order id!..');
var btn_search = new sap.ui.commons.Button("btn_search");
btn_search.setText("Search");
btn_search.attachPress(oController.searchAction);
sLayout.createRow(lb_search, txt_search, btn_search);
searchPannel.addContent(sLayout);
layout.createRow(searchPannel);
// Search Box starts here
// Result Box starts here
var resultPannel = new sap.ui.commons.Panel('resultPannel');
var rTitle = new sap.ui.commons.Title('rTitle');
rTitle.setText('All - Sales Order');
resultPannel.setTitle(rTitle);
var oTable = new sap.ui.table.DataTable();
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "OrderId"}), template: new sap.ui.commons.TextView().bindProperty("text", "OrderId"), sortProperty: "OrderId" }));
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Description"}), template: new sap.ui.commons.TextField().bindProperty("value", "Description"), sortProperty: "Description" }));
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Quantity"}), template: new sap.ui.commons.TextField().bindProperty("value", "Quantity"), sortProperty: "Quantity" }));
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Value"}), template: new sap.ui.commons.TextField().bindProperty("value", "Value"), sortProperty: "Value" }));
var oModel = new sap.ui.model.odata.ODataModel("http://gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS");
oTable.setModel(oModel);
oTable.bindRows("SOItems");
var salesResultPanel, oTitle, rModel;
var rTable = new sap.ui.table.DataTable();
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "OrderId"}), template: new sap.ui.commons.TextView().bindProperty("text", "OrderId"), sortProperty: "OrderId" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Item"}), template: new sap.ui.commons.TextField().bindProperty("value", "Item"), sortProperty: "Item" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Description"}), template: new sap.ui.commons.TextField().bindProperty("value", "Description"), sortProperty: "Description" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Plant"}), template: new sap.ui.commons.TextField().bindProperty("value", "Plant"), sortProperty: "Plant" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Quantity"}), template: new sap.ui.commons.TextField().bindProperty("value", "Quantity"), sortProperty: "Quantity" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "UoM"}), template: new sap.ui.commons.TextField().bindProperty("value", "UoM"), sortProperty: "UoM" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Value"}), template: new sap.ui.commons.TextField().bindProperty("value", "Value"), sortProperty: "Value" }));
rTable.setVisibleRowCount(10);
salesResultPanel = new sap.ui.commons.Panel('salesResultPanel');
oTitle = new sap.ui.commons.Title('oTitle');
oTable.attachRowSelect(function(oEvent)
{
document.getElementById('rContent').innerHTML = "";
var currentRowContext = oEvent.getParameter("rowContext");
var OrderId = oModel.getProperty("OrderId", currentRowContext);
var url = "http://gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/SOHeaders('"+OrderId+"')";
oTitle.setText('Sales Order Details - '+OrderId);
salesResultPanel.setTitle(oTitle);
rModel = new sap.ui.model.odata.ODataModel(url);
rTable.setModel(rModel);
rTable.bindRows("SOItems");
salesResultPanel.addContent(rTable);
salesResultPanel.placeAt('rContent');
rModel = null;
});
resultPannel.addContent(oTable);
layout.createRow(resultPannel);
// Result Box ends here
layout.placeAt('content');
}
});3. Copy below code into your Controller file “retriveOrder.controller.js”
sap.ui.controller("salesorderservice.retriveOrder", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
*/
// onInit: function() {
//
// },
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
*/
// onExit: function() {
//
// }
searchAction: function(){
var OrderId = $("#txt_search").val();
alert('searchKey-->'+OrderId);
var salesResultPanel, oTitle, rModel;
var rTable = new sap.ui.table.DataTable();
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "OrderId"}), template: new sap.ui.commons.TextView().bindProperty("text", "OrderId"), sortProperty: "OrderId" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Item"}), template: new sap.ui.commons.TextField().bindProperty("value", "Item"), sortProperty: "Item" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Description"}), template: new sap.ui.commons.TextField().bindProperty("value", "Description"), sortProperty: "Description" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Plant"}), template: new sap.ui.commons.TextField().bindProperty("value", "Plant"), sortProperty: "Plant" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Quantity"}), template: new sap.ui.commons.TextField().bindProperty("value", "Quantity"), sortProperty: "Quantity" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "UoM"}), template: new sap.ui.commons.TextField().bindProperty("value", "UoM"), sortProperty: "UoM" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Value"}), template: new sap.ui.commons.TextField().bindProperty("value", "Value"), sortProperty: "Value" }));
rTable.setVisibleRowCount(10);
salesResultPanel = new sap.ui.commons.Panel('salesResultPanel_'+OrderId);
oTitle = new sap.ui.commons.Title('oTitle_'+OrderId);
document.getElementById('rContent').innerHTML = "";
var url = "http://gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/SOHeaders('"+OrderId+"')";
alert(url);
oTitle.setText('Sales Order Details - '+OrderId);
salesResultPanel.setTitle(oTitle);
rModel = new sap.ui.model.odata.ODataModel(url);
rTable.setModel(rModel);
rTable.bindRows("SOItems");
salesResultPanel.addContent(rTable);
salesResultPanel.placeAt('rContent');
rModel = null;
}
});4. Final structure of the Project would be as below.
5. Now launch your application in browser http://localhost:8080/SalesOrderService/ and prompts for a Username & Password. Enter them which is provided as in the Demo Gateway . URL : http://scn.sap.com/docs/DOC-31221
Hi Sunil Sharma,
I have all followed your guid in this article.
But the problem is that there is no data in the table, in other word the table is blank.
I also got the same situation with others project.
Some people said it is explorer problem. I also forbidden all sercuirty options of the explorer and still didn't solve the problem.
So could offer me help to handle the problem I met?
That will be very great if u coud give me some guidness.
Don't forget about the "proxy" prefix before the Gateway URL.
"/proxy/http/gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/SOHeaders('"+OrderId+"')";
hi Raul also @ Sunil Sharma
I have tried your solution ,but it still doesn't work.
I followed all the code in this ariticle and my developing environment is as follows:
1. Eclipse Juno
2. SAPUI5 eclipse plugin installed
3. Tomcat in Eclipse
4. SAPUI5 library
IE 8 security internet settings is "Low"
Hi @ Sunil Sharma
When you call the Gateway service, did you pass the user and password to access this?
No, as per my IE8 settings it prompted for Username & Password.
I used IE8 with security internet settings as "Medium" and got the result populated. I too got the same issue with other browser. Try using in the IE8 with above settings.
So it works only for IE8. Any other options?
Thanks
Hi Prabaharan.
It works for all the browsers: IE9, Firefox, Chrome...
Hi... I followed the same steps.. there's is no data in the table...
Im using IE 9
Could you plz help me..
Hi Archana,
Did you get a prompt for Username & Password . If not change your "Local Intranet" settings to Low i.e. IE -> Tools -> Internet Options -> Security -> Local intranet -> Low.
Thanks
Sunil
Hi, Assume that I have a service URL of user Information, I can use "oData.read" statement to read user information from DB. Now I want to implement the change user name function. How can I write the "oData.request" statement to update the information in the DB？Could you give me a short example？Thank you very much!
Hi Sunil,
I had followed all the steps from this tutorial but still no success , I had got a prompt for user ID and password But still didn't got Data in Tables.
Kindly Help
Thanks and Regards,
Ashish Sachdeva
Which browsers are you using ? Use Google Ghrome if you have issues with IE or FF.
Hi Sunil,
Thanks for the Quick Response
The problem is with the SimpleProxyServlet When I am Running the Application on Local Server (local host:8080) it automatically Prefix :
http://localhost:8080/appname/proxy/http://abc.xyz:8000/sap/opu/odata/sap/consumtionmodel/
Due to Which i am not able to get data on the Table.
any clue to remove this error ,
I am using SAPUI5 1.8 , eclipse indigo and tomcat 6 .
Thanks ,
Ashish
Hi Sir,
I follow the above steps as you mentioned above but running the program getting below errors:
the table is empty
I have tried IE 8 and Chrome, and the results are same
It is an Access error.
So serveral solutions I have tried:
1. disable the IE 8 or Chrome Internet security
take Chrom for example
with the command chrome.exe --disable-web-security
-----result is still the same empty table
2. the solution offered by Raul Romero
add prefix so the code is here
var url = "/proxy/http/gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/SOHeaders('"+OrderId+"')";
but the result is here which means the url is not right
GEThttp://localhost:8080/proxy/http/gw.esworkplace.sap.com/sap/opu/odata/sap/SALESORDERS/$metadata404 (Not Found)
Hi ,
did you resolve this ?
Hi Kishore ,
I faced the same issue before .
The fix to the issue in in below link
http://scn.sap.com/community/developer-center/front-end/blog/2013/05/31/how-to-create-sapui5-application-consuming-gateway-service-with-the-help-of-sap-nw-gateway-plugin
Go through the entire blog and comments to fully understand the fix.
Hi Sunil,
thanks for the blog really helpfull , on the other hand we created a odata service based on BEX easy query , my problem is i want to filter a RowId ( similar) to OrderID , i ahve no problem population the oTable , but when it comes to results i have no data and i know the problem is how to bind the databack after adding the RowID (OrderID ) , i see that you use SOitems , but i wonder how to works for you cause i ve been doing almost the same as you did but the result table never shows data, in other words whats the relation between SOHeaders and SOItems and how if i want to bind back to SOHeaders, is it possible and if not why ?
PS: I spent so much time on this i would really appreciate any help
Best Regards
Reda
Hi Sunil,
I have a more important question, when i try to query my odata service i get the following response,
System query options '$orderby,$skip,$top,$skiptoken,$inlinecount,' are not allowed in the requested URI
Ps: the Odata service was created based on a Bex easy query
Best Regards
REda
It's helpful
Hi Sunil,
I tried the same, the table displayed contains no-data. I'm working in Eclipse Kepler with SAPUI5 tools installed in it. I tried running it in HANA SDK local runtime and Chrome.
What might be the problem?
Please guide me through this.
Regards,
Swetha
Hi,
Can any one share code for this operation.I am new in odata model.