Skip to Content
0
Former Member
Dec 27, 2013 at 11:06 PM

Reading a table using an oData Service

546 Views

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>