hi ,
We are trying to do Purchase Order Details in SAP Hana Development Studio using UI5.
We got stuck in binding the rows to the table.
Please check the code below.
poview.controller.js :
sap.ui.controller("podetails.poview", {
/**
* 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.
* @memberOf podetails.poview
*/
// 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!).
* @memberOf podetails.poview
*/
// 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.
* @memberOf podetails.poview
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf podetails.poview
*/
// 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: "PurchaseOrderId"}), template: new sap.ui.commons.TextView().bindProperty("text", "PurchaseOrderId"), sortProperty: "PurchaseOrderId" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "PurchaseOrderItem"}), template: new sap.ui.commons.TextView().bindProperty("text", "PurchaseOrderItem"), sortProperty: "PurchaseOrderItem" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "ProductId"}), template: new sap.ui.commons.TextField().bindProperty("value", "ProductId"), sortProperty: "ProductId" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Currency"}), template: new sap.ui.commons.TextField().bindProperty("value", "Currency"), sortProperty: "Currency" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "NetAmount"}), template: new sap.ui.commons.TextField().bindProperty("value", "NetAmount"), sortProperty: "NetAmount" }));
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://imdbhdb:8000/workshop/sessiona/po/services/poWorklistJoin.xsodata/PurchaseOrderHeader('"+OrderId+"')";
alert(url);
Here the url is Appending $metadata Automatically So Im Getting Error.
oTitle.setText('Purchase Order Details - '+OrderId);
salesResultPanel.setTitle(oTitle);
rModel = new sap.ui.model.odata.ODataModel(url);
rTable.setModel(rModel);
rTable.bindRows("PO_Item");
salesResultPanel.addContent(rTable);
salesResultPanel.placeAt('rContent');
rModel = null;
}
});
--------------------------------------------------------------------------------------------------------------------------------------------------------------
poview.view.js :
sap.ui.jsview("podetails.poview", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf podetails.poview
*/
getControllerName : function() {
return "podetails.poview";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf podetails.poview
*/
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 PO 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 - Purchase 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: "PurchaseOrderId"}), template: new sap.ui.commons.TextView().bindProperty("text", "PurchaseOrderId"), sortProperty: "PurchaseOrderId" }));
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "PartnerId"}), template: new sap.ui.commons.TextField().bindProperty("value", "PartnerId"), sortProperty: "PartnerId" }));
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Currency"}), template: new sap.ui.commons.TextField().bindProperty("value", "Currency"), sortProperty: "Currency" }));
oTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "NetAmount"}), template: new sap.ui.commons.TextField().bindProperty("value", "NetAmount"), sortProperty: "NetAmount" }));
var oModel = new sap.ui.model.odata.ODataModel("http://imdbhdb:8000/workshop/sessiona/po/services/poWorklistJoin.xsodata");
oTable.setModel(oModel);
oTable.bindRows("PO_Item");
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: "PurchaseOrderId"}), template: new sap.ui.commons.TextView().bindProperty("text", "PurchaseOrderId"), sortProperty: "PurchaseOrderId" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "PurchaseOrderItem"}), template: new sap.ui.commons.TextView().bindProperty("text", "PurchaseOrderItem"), sortProperty: "PurchaseOrderItem" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "ProductId"}), template: new sap.ui.commons.TextField().bindProperty("value", "ProductId"), sortProperty: "ProductId" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Currency"}), template: new sap.ui.commons.TextField().bindProperty("value", "Currency"), sortProperty: "Currency" }));
rTable.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "NetAmount"}), template: new sap.ui.commons.TextField().bindProperty("value", "NetAmount"), sortProperty: "NetAmount" }));
rTable.setVisibleRowCount(10);
salesResultPanel = new sap.ui.commons.Panel('PurchaseResultPanel');
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://imdbhdb:8000/workshop/sessiona/po/services/poWorklistJoin.xsodata/PurchaseOrderHeader('"+OrderId+"')";
Here also the url is Appending $metadata Automatically So Im Getting Error.
oTitle.setText('Purchase Order Details - '+OrderId);
salesResultPanel.setTitle(oTitle);
rModel = new sap.ui.model.odata.ODataModel(url);
rTable.setModel(rModel);
rTable.bindRows("PO_Item");
salesResultPanel.addContent(rTable);
salesResultPanel.placeAt('rContent');
rModel = null;
});
resultPannel.addContent(oTable);
layout.createRow(resultPannel);
// Result Box ends here
layout.placeAt('content');
}
});
-------------------------------------------------------------------------------------------------------------------------------------------
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.ui.commons, sap.ui.table"
data-sap-ui-theme="sap_ux">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("podetails");
var view = sap.ui.view({id:"idpoview1", viewName:"podetails.poview", 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>
---------------------------------------------------------------------------------------------------------------------------------
Hence it displays NO DATA in the screen. The browser that we use is google chrome. Please guide me with solution.
thanks and regards,
Prakash S