Quantcast
Channel: SCN : All Content - All Communities
Viewing all articles
Browse latest Browse all 3167

Unable to create dynamic table in sap ui5

$
0
0

Hello,

 

I have written xsjs services(which are up and running) and are returning the data in the below format :

 

service returning column name for a table :

[{"COLUMN_NAME":"PRODUCT_ID"},

{"COLUMN_NAME":"PRODUCT_NAME"},

{"COLUMN_NAME":"REGION_ID"},

{"COLUMN_NAME":"SALES_AMOUNT"}]

 

 

service returning row data for a table :

[{"PRODUCT_NAME":"Shirts","PRODUCT_ID":1,"REGION_ID":1,"SALES_AMOUNT":100},{"PRODUCT_NAME":"Coats","PRODUCT_ID":4,"REGION_ID":4,"SALES_AMOUNT":75},{"PRODUCT_NAME":"Shirts","PRODUCT_ID":1,"REGION_ID":5,"SALES_AMOUNT":65},{"PRODUCT_NAME":"Jackets","PRODUCT_ID":2,"REGION_ID":5,"SALES_AMOUNT":65},{"PRODUCT_NAME":"Jackets","PRODUCT_ID":2,"REGION_ID":3,"SALES_AMOUNT":1270}]

 

 

 

Now, I want to use this data for displaying a table dynamically in UI. I am able to create the columns and rows dynamically, but its not fetching the data i.e. column names and row values.

 

Below is the code I have written in view. Please help me to fix this issue.

 

var columnData;

  var rowData;

 

 

  var oModel = new sap.ui.model.json.JSONModel();

  var submitButton = new sap.ui.commons.Button({

  id : "btnSubmit",

  text : "Submit",

  press : buttonPressed

  });

  function buttonPressed() {

  var data = null;

  columnData = null;

  var url1 = path to service ;

 

  jQuery.ajax({

  url : url1,

  type : "GET",

  contentType : "application/json;charset=utf-8",

  dataType : "json",

 

 

  success : function(data) {

 

 

  console.log(data);

 

 

  oModel.setData({

  columns : data

  });

 

 

  },

  error : function(e) {

  console.log(e);

  }

 

 

  });

 

 

  var data = null;

  var url2 = path to row service;

  jQuery.ajax({

  //async:false,

  url : url2,

  type : "GET",

  contentType : "application/json;charset=utf-8",

 

dataType : "json",

success : function(data) {

oModel.setData({

  rows : data

  });

 

 

  },

  error : function(e) {

  console.log(e);

  }

 

 

  });

}

  ;

 

 

var oTable = new sap.ui.table.Table({

  visibleRowCount : 20

  });

 

 

  oTable.setModel(oModel);

 

 

  oTable.bindColumns("/columns", function(sId, oContext) {

  var columnName = oContext.getObject().columnName;

  return new sap.ui.table.Column({

  label : columnName,

  template : columnName,

  });

  });

 

 

  oTable.bindRows("/rows");

 

 

table.PNG

 

Thanks,

Shama


Viewing all articles
Browse latest Browse all 3167

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>