Add row to UI5 table from other table

[saumya_govil]

Dear Experts,

I am new the SAP UI5 so excuse me if my question is a bit trivial.

I have a functionality where I have a table with an 'Add' button. On press of the button I want to display another table to choose a data row. Once the user selects a row he wants, I want a button on the second table to return the data back to the first table and insert as a row there.

I found one link: JS Bin - Collaborative JavaScript Debugging</title> <link rel="icon" href="h...

It helps but is not exactly what I need.

Any pointers will be appreciated.

Kind Regards,

Saumya Govil

[former_member182862 · Accepted solution]

Hi Samuya

Here is an example. There are many ways to do it though

Thanks

-D

[saumya_govil · Accepted solution]

Thanks a lot Dennis and Frank for the help!

The answers helped me solve the issue.

I know the question was a bit basic, but is probable just a part of my learning process.

Thanks again!

Regards,

Saumya

[former_member293602]

Hi Govil,

if you follow the Model View Controller contept (see OpenUI5 SDK - Demo Kit), you just need to add the row which has been selected by the user, to the model data which is bound to the main table.

More information on Models and Data Binding in Applications can be found here: OpenUI5 SDK - Demo Kit.

Regards, Frank

[saumya_govil]

Hi Frank,

Thanks for the prompt reply.

I have bound the main table to the model (as I learnt from the link in my post) but am not sure how to push data in the model from a separate table.

Do you have any examples that I can refer to?

Regards,

Saumya Govil

[former_member293602]

Hi Saumya,

here is a very basic example.

Regards, Frank

var result = new sap.ui.model.json.JSONModel();
sap.ui.getCore().setModel(result);
oJsonData = {
  Category_Sales_for_1997 : [
   { CategoryName : "Beverages", CategorySales : "11.11"},
   { CategoryName : "Something", CategorySales : "33.33"},
   { CategoryName : "Confections", CategorySales : "22.22"}
  ] 
};
result.setData(oJsonData);
// Create the column templates
var nameColumnTemplate = new sap.ui.commons.TextField({
 value: "{CategoryName}"
});
var salesColumnTemplate = new sap.ui.commons.TextField({
 value: "{CategorySales}"
});
var oButton = new sap.ui.commons.Button({
 text: "Add a Row",
 press: function(){
  var oModel = sap.ui.getCore().getModel();
  var oData = oModel.getData();
  oData.Category_Sales_for_1997.push({
   CategoryName : "New Row", CategorySales : "12.34"
  });
  oModel.updateBindings();
 }
})
var oTable = new sap.ui.table.Table({ // create Table UI 
 extension : [oButton],
 columns : [ 
  {label: "Name", template: nameColumnTemplate  },   
  {label: "Sales", template: salesColumnTemplate }
 ]
});

oTable.setModel(result); // bind JSON model to Table        
oTable.bindRows({path: "/Category_Sales_for_1997"} ); // bind the table rows to an array
oTable.placeAt("content"); // place Table onto UI