Hello All,
I am just starting to work on SAPUI5 and pardon me if I am asking basic questions. I am trying to add 2 Text Fields and button to a Form and then on clicking of this button I need to add the values to the table. I have seen the basic examples where they have defined a model already and populated with few values. When clicking on the button we can just use the push() statement to move the details into the existing model.
How can I define an empty model and then add details to the model and bind to the table. Please find below my code for details.
In the createcontent method of the view I have this code in place. In the button action I am setting the model data which puts the value in the table but the next time it overwrites.
var tvfname = new sap.ui.commons.TextView(this.createId("firstname"), { text: "First Name" }); var tvlname = new sap.ui.commons.TextView(this.createId("lastname"), { text: "Last Name" }); var ipfname = new sap.ui.commons.TextField(this.createId("ipfname")); var iplname = new sap.ui.commons.TextField(this.createId("iplname")); var button = new sap.ui.commons.Button(this.createId("button"), {text: "Add Data", press: addDetails}); var table = new sap.ui.table.Table(this.createId("EmpDetails"),{ title: "Employee Details", editable: false }); table.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "First Name" }), template: new sap.ui.commons.TextField().bindProperty("value","firstname")})); table.addColumn(new sap.ui.table.Column({ label: new sap.ui.commons.Label({text: "Last Name" }), template: new sap.ui.commons.TextField().bindProperty("value","lastname")})); // Define a Layout for the Form var oGridLayout = new sap.ui.commons.form.GridLayout("GridLayout"); // Define Form and its Header Details var oForm = new sap.ui.commons.form.Form("Form"); oForm.setTitle("Personal Details"); oForm.setTooltip("PD Tooltip"); oForm.setLayout(oGridLayout); // Define a Form Container var oFormContainer = new sap.ui.commons.form.FormContainer("FormContainer"); oFormContainer.setTitle("User Details"); oForm.addFormContainer(oFormContainer); // Define a Form Element var oFormElement = new sap.ui.commons.form.FormElement("formElement"); oFormContainer.addFormElement(oFormElement); oFormElement.addField(tvfname); oFormElement.addField(ipfname); oFormElement = new sap.ui.commons.form.FormElement("formElement1"); oFormContainer.addFormElement(oFormElement); oFormElement.addField(tvlname); oFormElement.addField(iplname); oFormElement = new sap.ui.commons.form.FormElement("formElement2"); oFormContainer.addFormElement(oFormElement); oFormElement.addField(button); // Define a Grid Element Data var oGridElement = new sap.ui.commons.form.GridElementData("oGridElements"); oGridElement.setHCells("2"); tvfname.setLayoutData(oGridElement); oGridElement = new sap.ui.commons.form.GridElementData("oGridElements1"); oGridElement.setHCells("4"); ipfname.setLayoutData(oGridElement); oGridElement = new sap.ui.commons.form.GridElementData("oGridElements2"); oGridElement.setHCells("2"); tvlname.setLayoutData(oGridElement); oGridElement = new sap.ui.commons.form.GridElementData("oGridElements3"); oGridElement.setHCells("4"); iplname.setLayoutData(oGridElement); oGridElement = new sap.ui.commons.form.GridElementData("oGridElements4"); oGridElement.setHCells("4"); button.setLayoutData(oGridElement); oForm.placeAt("content"); table.placeAt("content"); function addDetails(){ // Get the Input Field Values var fname = ipfname.getValue(); var lname = iplname.getValue(); // Set Data for Model var oModel = new sap.ui.model.json.JSONModel(); oModel.setData({mData: [{ "firstname":fname,"lastname":lname }]}); sap.ui.getCore().setModel(oModel); // Set Table with Model Details table.setModel(oModel); table.bindRows("/mData");Can someone please help here? Can we define an empty model and assign to the table? In that case how to add data to the model?
Thanks,
Nagarajan.