Skip to Content

Insert row into table in SAPUI5

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});


            }	    
	    
		
Add a comment
10|10000 characters needed characters exceeded

  • 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

  • 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?

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

Assigned Tags

Related questions

2 Answers

  • Posted on Aug 20 at 12:31 PM

    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

    Add a comment
    10|10000 characters needed characters exceeded

    • 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....

  • Posted on Aug 20 at 02:25 PM

    Hi,

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

    Thanks,

    Dhiraj M

    Add a comment
    10|10000 characters needed characters exceeded

    • 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....

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.