add input row at the beginning ui5

Question

I'm having problems concerning adding a row with input field to add item to the table. I'm trying to use this example

addEntry : function(oEvent) {
var path = oEvent.getSource().getBindingContext().getPath();
var obj = {
  fname: null,
  lname: null, 
  desc: null,
  createNew: false,
  removeNew: false,
  saveNew: true
};

var oModel = this.getView().getModel();

oModel.setProperty(path, obj);

},

The only difference that i want is for the row to be visible from the start (without the + icon) so that the user can directly add fields and when OK is clicked, a new row needs to be added.

Thank you

Answer 1

You should remove the addEntry() function as it is just triggering from the Add Icon and instead create the object on your onInit() function.

It will look like this:

    onInit : function() {
        var dummyData = [{"fname": "",
          "lname": "", 
          "desc": "",
          "removeNew": false,
          "saveNew": true}];

        var oModel = new sap.ui.model.json.JSONModel({data : dummyData});
        this.getView().setModel(oModel);   
   }

When you click on the save button, the saveEntry() function will be triggered and the new entry will be pushed to the model.

A new form will show up by calling the addEmptyObject() function at the end of it.

Here is a working example: https://jsbin.com/wutefaz/edit?html,js,output