Skip to Content
Jun 09 at 07:15 PM

Add row to table on button click in UI5

89 Views Last edit Jun 09 at 11:35 PM 6 rev


I am building a Master detail app. The Master list is of type sap.m.List. This displays a list of material. When the user selects a particular material, the details of the material are displayed as a Table row in the Detail Page. I need to add a button "ADD Row" in the detail page which when clicked will create a new row and copy the material number from the first row.

I have got the below code:

var selectedItem = listMaster.getSelectedItem(); "get the selected Item
var oContext = selectedItem.getBindingContext(); "Get the binding context of the selected item
var data = oContext.getObject();           "Get the object of the context/details of the Selected item
var matnr = data.MATNR;                    "Get the material Number
var oPath = oContext.getPath();            "Get the index of the selected item
var oIndex = parseInt(oPath.slice(1, oPath.length)); "Format the index
var newRec = {                             "Get the data for the new record in JSON
    matnr: matnr,
    likesku: "",
    weight: ""
var oModel = this.getModel();             "Get the model object
var oData = oModel.getProperty("/");      "Get the model Property
oData.splice(oIndex + 1, 0, newRec);      "add the new record to the OData
oModel.setProperty("/", oData);           "pass the new value as new row to the model from the oData

The above code does not work. please let me know how to resolve this.