Insert row into table in SAPUI5

[jakob_steen-petersen]

HI

I have af Table bound to a oData Association

        		<Table
        			id="costDistribution"
        			class="sapUiResponsiveMargin"
        			width="400px"
        			items="{ReservationToCost}"
        			>

...

When displaying existing data it works ok. But how do i add an empty row in order to provide the user the option to extend data? I have tried this without luck (itemData is not referenced...):

            var oModelCost = Fragment.byId("popoverFrag", "costDistribution").getModel();
            Log.info("Modelcost:");
            Log.info(oModelCost);
            
            var itemData = oModelCost.getProperty("ReservationToCost");


            Log.info("Itemdata:");
            Log.info(itemData);
            
            var newRec = {
               Resid: "",
               Aufnr: "",
               Disprc: "" };


            itemData.push(newRec);               
            oModelCost.setData({ data: itemData});


            }	    
	    
		

[Sharathmg]

If I would propose, maintain a copy of Odata model and hind that to table. It's rrecommended to maintain immutability as one of principle of js.

So, use object.assign and create a copy...and update that with a new entry.

Regards,

Sharath

[jakob_steen-petersen]

Hi Sharath

Okay i tried it and basically it works ok. I use this:

            var newRow = ( [{ "Resid" : "", 
			                  "Aufnr" : "", 
			                  "Disprc" : "100" }]);
            
            Log.info(newRow);
            var newList = this.getView().getModel("localCostModel").getProperty("/CostDistList").concat(newRow);
        
            this.getView().getModel("localCostModel").setProperty("/CostDistList", newList);
            Log.info("onAddCost called");
            },	

As you see i add value 100 as default in Disprc. But for some reason input field is empty anyway?

<Input id="costAufnrPercentage" value="{Disprc}" editable="true" required="true" placeholder="F .....

What do i do wrong?

[Sharathmg]

Check the value of property /CostDistList in the log info. ex: this.getView().getModel("localCostModel").getProperty

[dhiraj_more]

Hi,

You can try using createEntry method of ODATA model to add new record.

Thanks,

Dhiraj M

[jakob_steen-petersen]

The createEntry method triggers a call to Backend.

And as i wrote: the Table contains data of a Association which means that i need the table to be filled on Frontend only and then later (when user has provided all data) save to Backend with a Save button....

[Sharathmg]

Hi,

Refer the Stackoverflow link. It is similar to your requirement.

https://stackoverflow.com/questions/48475197/button-to-add-new-row-in-sapui5-table

Regards,

Sharath

[jakob_steen-petersen]

I have read that. But the createEntry method triggers a call to Backend.

And as i wrote: the Table contains data of a Association which means that i need the table to be fill on Frontend only and then later (when user has provided all data) save to Backend with a Save button....