Dec 27, 2013 at 11:06 PM
Reading a table using an oData Service
Hi All,
I'm trying to make an application similar to Sample UME Application using SAPUI5 and SAP Gateway
Here's what's supposed to happen.
When I click on an "ID", the fields below the main table are supposed to get populated. There seems to be some issue accessing the table, but I'm not sure how to fix it.
Here's a screenshot of the application.
Here's the error i get from FireBug, when I try selecting an ID.
This is my oData Service (selections.xsodata)
service namespace "i840407.xsapp.services" {
"SAP_RDS_PA_FIN"."FCT_PRODUCT_DATA" as "ProductData";
}
This is the entire code for the application.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>XS Application</title>
<script src="/sap/ui5/1/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3"
data-sap-ui-theme="sap_platinum">
</script>
<script>
var oModel = new sap.ui.model.odata.ODataModel("../../../services/selections.xsodata");
//var arrayHeaders = new Array();
//var oControl;
//CREATE TABLE
oTable = new sap.ui.table.DataTable({
title: "Product Data",
selectionMode : sap.ui.table.SelectionMode.Single,
visibleRowCount: 20,
editable : false
//enableColumnReordering:true,
});
//ADD COLUMNS
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text:"ID"}),
template: new sap.ui.commons.TextField().bindProperty("value","ID"),
sortProperty: "ID",
filterProperty: "ID",
width: "125px" }));
oTable.addColumn(new sap.ui.table.Column({
label:new sap.ui.commons.Label({text:"COUNTRY"}),
template: new sap.ui.commons.TextField().bindProperty("value","COUNTRY"),
sortProperty: "COUNTRY",
filterProperty: "COUNTRY",
width: "125px" }));
oTable.addColumn(new sap.ui.table.Column({
label:new sap.ui.commons.Label({text:"REGION"}),
template: new sap.ui.commons.TextField().bindProperty("value","REGION"),
sortProperty: "REGION",
filterProperty: "REGION",
width: "125px" }));
oTable.addColumn(new sap.ui.table.Column({
label:new sap.ui.commons.Label({text:"CITY"}),
template: new sap.ui.commons.TextField().bindProperty("value","CITY"),
sortProperty: "CITY",
filterProperty: "CITY",
width: "125px" }));
oTable.addColumn(new sap.ui.table.Column({
label:new sap.ui.commons.Label({text:"YEAR"}),
template: new sap.ui.commons.TextField().bindProperty("value","YEAR"),
sortProperty: "YEAR",
filterProperty: "YEAR",
width: "125px" }));
oTable.addColumn(new sap.ui.table.Column({
label:new sap.ui.commons.Label({text:"MONTH"}),
template: new sap.ui.commons.TextField().bindProperty("value","MONTH"),
sortProperty: "MONTH",
filterProperty: "MONTH",
width: "125px" }));
oTable.addColumn(new sap.ui.table.Column({
label:new sap.ui.commons.Label({text:"PRODUCT"}),
template: new sap.ui.commons.TextField().bindProperty("value","PRODUCT"),
sortProperty: "PRODUCT",
filterProperty: "PRODUCT",
width: "125px" }));
oTable.addColumn(new sap.ui.table.Column({
label:new sap.ui.commons.Label({text:"CUSTOMER"}),
template: new sap.ui.commons.TextField().bindProperty("value","CUSTOMER"),
sortProperty: "CUSTOMER",
filterProperty: "CUSTOMER",
width: "125px" }));
oTable.addColumn(new sap.ui.table.Column({
label:new sap.ui.commons.Label({text:"PROFIT"}),
template: new sap.ui.commons.TextField().bindProperty("value","PROFIT"),
sortProperty: "CITY",
filterProperty: "CITY",
width: "125px" }));
oTable.addColumn(new sap.ui.table.Column({
label:new sap.ui.commons.Label({text:"MARGIN"}),
template: new sap.ui.commons.TextField().bindProperty("value","MARGIN"),
sortProperty: "MARGIN",
filterProperty: "MARGIN",
width: "125px" }));
oTable.addColumn(new sap.ui.table.Column({
label:new sap.ui.commons.Label({text:"REVENUE"}),
template: new sap.ui.commons.TextField().bindProperty("value","REVENUE"),
sortProperty: "REVENUE",
filterProperty: "REVENUE",
width: "125px" }));
oTable.addColumn(new sap.ui.table.Column({
label:new sap.ui.commons.Label({text:"PLAN"}),
template: new sap.ui.commons.TextField().bindProperty("value","PLAN"),
sortProperty: "PLAN",
filterProperty: "PLAN",
width: "125px" }));
oTable.addColumn(new sap.ui.table.Column({
label:new sap.ui.commons.Label({text:"FORECAST"}),
template: new sap.ui.commons.TextField().bindProperty("value","FORECAST"),
sortProperty: "FORECAST",
filterProperty: "FORECAST",
width: "125px" }));
//EVENT OF SELECTING A PARTICULAR ID
oTable.attachRowSelect(function(oEvent)
{
var currentRowContext = oEvent.getParameter("rowContext");
var selectedProductID = oModel.getProperty("ID", currentRowContext);
OData.read("../../../services/selections/ProductData('"+selectedProductID+"')", //THIS IS WHERE MY PROBLEM IS
function (response)
{
sap.ui.getCore().getControl("Id_m").setValue(response.ID);
sap.ui.getCore().getControl("Country_m").setValue(response.COUNTRY);
sap.ui.getCore().getControl("Region_m").setValue(response.REGION);
sap.ui.getCore().getControl("City_m").setValue(response.CITY);
sap.ui.getCore().getControl("Year_m").setValue(response.YEAR);
sap.ui.getCore().getControl("Month_m").setValue(response.MONTH);
sap.ui.getCore().getControl("Product_m").setValue(response.PRODUCT);
sap.ui.getCore().getControl("Customer_m").setValue(response.CUSTOMER);
sap.ui.getCore().getControl("Profit_m").setValue(response.PROFIT);
sap.ui.getCore().getControl("Margin_m").setValue(response.MARGIN);
sap.ui.getCore().getControl("Revenue_m").setValue(response.REVENUE);
sap.ui.getCore().getControl("Plan_m").setValue(response.PLAN);
sap.ui.getCore().getControl("Forecast_m").setValue(response.FORECAST);
});
});
//BINDING
oTable.setModel(oModel);
var sort1 = new sap.ui.model.Sorter("ID");
oTable.bindRows("/ProductData",sort1);
var productDetailsTableLayout = new sap.ui.commons.layout.MatrixLayout();
productDetailsTableLayout.createRow(oTable);
productDetailsTableLayout.placeAt("content");
//DISPLAY SELECTED DATA
var showDetailsLayout = new sap.ui.commons.layout.MatrixLayout();
showDetailsLayout.setLayoutFixed(false);
showDetailsLayout.createRow(
new sap.ui.commons.Label({text:"ID", width:"100px"}),
new sap.ui.commons.TextField("Id_m",{editable:false, width:"150px", value:"{ID}", required : true}));
showDetailsLayout.createRow(
new sap.ui.commons.Label({text:"COUNTRY", width:"100px"}),
new sap.ui.commons.TextField("Country_m",{editable:true, width:"150px", value : "{COUNTRY}"}));
showDetailsLayout.createRow(
new sap.ui.commons.Label({text:"REGION", width:"100px"}),
new sap.ui.commons.TextField("Region_m",{editable:true, width:"150px", value : "{REGION}"}));
showDetailsLayout.createRow(
new sap.ui.commons.Label({text:"CITY", width:"100px"}),
new sap.ui.commons.TextField("City_m",{editable:true, width:"150px", value : "{CITY}"}));
showDetailsLayout.createRow(
new sap.ui.commons.Label({text:"YEAR", width:"100px"}),
new sap.ui.commons.TextField("Year_m",{editable:true, width:"150px", value : "{YEAR}"}));
showDetailsLayout.createRow(
new sap.ui.commons.Label({text:"MONTH", width:"100px"}),
new sap.ui.commons.TextField("Month_m",{editable:true, width:"150px", value : "{MONTH}"}));
showDetailsLayout.createRow(
new sap.ui.commons.Label({text:"PRODUCT", width:"100px"}),
new sap.ui.commons.TextField("Product_m",{editable:true, width:"150px", value : "{PRODUCT}"}));
showDetailsLayout.createRow(
new sap.ui.commons.Label({text:"CUSTOMER", width:"100px"}),
new sap.ui.commons.TextField("Customer_m",{editable:true, width:"150px", value : "{CUSTOMER}"}));
showDetailsLayout.createRow(
new sap.ui.commons.Label({text:"PROFIT", width:"100px"}),
new sap.ui.commons.TextField("Profit_m",{editable:true, width:"150px", value : "{PROFIT}"}));
showDetailsLayout.createRow(
new sap.ui.commons.Label({text:"MARGIN", width:"100px"}),
new sap.ui.commons.TextField("Margin_m",{editable:true, width:"150px", value : "{MARGIN}"}));
showDetailsLayout.createRow(
new sap.ui.commons.Label({text:"REVENUE", width:"100px"}),
new sap.ui.commons.TextField("Revenue_m",{editable:true, width:"150px", value : "{REVENUE}"}));
showDetailsLayout.createRow(
new sap.ui.commons.Label({text:"PLAN", width:"100px"}),
new sap.ui.commons.TextField("Plan_m",{editable:true, width:"150px", value : "{PLAN}"}));
showDetailsLayout.createRow(
new sap.ui.commons.Label({text:"FORECAST", width:"100px"}),
new sap.ui.commons.TextField("Forecast_m",{editable:true, width:"150px", value : "{FORECAST}"}));
var productTab = new sap.ui.commons.Tab().setText("Product").addContent(showDetailsLayout);
var tabStrip = new sap.ui.commons.TabStrip({width:"25%"}).addTab(productTab);
productDetailsTableLayout.createRow(tabStrip);
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>