cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Reading a table using an oData Service

Go to solution
Former Member

on ‎12-27-2013 11:06 PM

0 Kudos

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>
Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

surendra_pamidi
Contributor
‎12-28-2013 8:35 AM
0 Kudos

Hi Saneth,

The problem should be in these two lines.

  1. var selectedProductID = oModel.getProperty("ID", currentRowContext); 
  2.       OData.read("../../../services/selections/ProductData('"+selectedProductID+"')


Watch 'selectedProductID', whether you are getting it on selection of row.

And check the path "../../../services/selections/ProductData('"+selectedProductID+"') also once again, whether you are getting the values with the path by giving directly the 'selectedProductID' value.


The problem must be in these two.


Regards,

Surendra.

Show replies
Show replies
Former Member
‎01-07-2014 9:48 PM
0 Kudos

Hi Surendra,

There was a problem with the quotes!

Here's the fixed line of code;



OData.read("../../services/carbon.xsodata/CarbonData("+selectedProductID+")"

Thank you for the help!

Answers (1)

Answers (1)

Former Member
‎12-30-2013 5:25 AM
0 Kudos

Hi Saneth,

You can check this blog written by me. Here i have used ajax to read data from an oData service and display in SAPUI5 table.

Hope this helps.

Regards,

Sharique

Show replies
Show replies
Former Member
‎01-07-2014 9:50 PM
0 Kudos

Thanks for your help Sharique,

Great blog!

Ask a Question