Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

How to do Table input validation and mark a cell as changed in the model?

I would like to know how to add js code to validate table cell input. I get that there is a methodologies for simple controls like a TextField, but how is one to do this for a complex control like a table? To illustrate this I have added the following Table example below where the Table displays 2 row with 3 columns (Lastname, First, and Birthday). Note that I'm purposely not using the DatePicker control for this example as we don't want their age. Based on what I've read, there seems to be two natural point to add in the "validation" and "mark row changed" features (denoted by a // ** Question 1 and // ** Queston 2 comments, but haven't been able to crack it. Would you please give me a pointer if I'm on the right track or point me to another way for accomplishing this? Thx.

tableTest = function() {

//Define some sample data

  var aData = [

  {rowID: "a0", changed: false, lastName: "Flintstone", name: "Fred", birthday: "dd/mm" },

  {rowID: "a1", changed: false, lastName: "Rubble", name: "Barney",  birthday: "dd/mm" }

  ];

  //Create an instance of the table control

  var oTable = new sap.ui.table.Table({

  title: "Table Event Example",

  visibleRowCount: 2,

  selectionMode: sap.ui.table.SelectionMode.Single

  });

  //Define the columns and the control templates to be used

  oTable.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text: "Last Name"}),

  template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),

  width: "100px"

  }));

  oTable.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text: "First Name"}),

  template: new sap.ui.commons.TextField().bindProperty("value", "name"),

  width: "80px"

  }));

  oTable.addColumn(new sap.ui.table.Column({

  label: new sap.ui.commons.Label({text: "Birthday"}),

  template: new sap.ui.commons.TextField( {

  valueState : sap.ui.core.ValueState.Error,

  // ** Question 1 **

  // How do I add a validation function here so

  // i can parse the entry and set the validationState by row?

  }).bindProperty("value", "birthday"),

  width: "40px"

  }));

  //Create a model and bind the table rows to this model

  var oModel = new sap.ui.model.json.JSONModel();

  oModel.setData({modelData: aData});

  oTable.setModel(oModel);

  oTable.bindRows("/modelData");

  var binding = new sap.ui.model.Binding(oModel, "/", oModel.getContext("/"));

  binding.attachChange(function(oEvent) {

  // ** Question 2 **

  // How do I detect which cell value has changed in the model?

  // For example our backend can take row updates so I would like to

  // mark the row as changed in the model (e.g. [0]changed:true)

  alert("Table Event="+ Object.keys(oEvent));

  });

  //Return the table to place in the UI or just placeat here

  return oTable;

};

Tags:
Former Member
Not what you were looking for? View more on this topic or Ask a question