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

[Former Member]

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;

};

[former_member182372 · Accepted solution]

http://jsbin.com/hoxovaxaqu/1/edit

var lastNameControl = new sap.ui.commons.TextField();


lastNameControl.attachValidationError(function(error){  
  this.setValueState(sap.ui.core.ValueState.Error);  
});  


lastNameControl.setModel(oModel).bindProperty("value", {
  path : "name",
  type : 
  {  
  formatValue : function(sValue, sTargetType) {  
   return sValue;
  },  
  parseValue : function (sValue, sSourceType) {  
   return sValue;  
  },  
  validateValue : function (sValue) {  
  if (sValue.length!=4) {  
  throw new sap.ui.model.ValidateException("Year must be 4 chars long");  
  }  
  },
  getName : function () {  
  return "my.type.Year";  
  }  
  }  
});
oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "First Name", textAlign: "Right"}), template: lastNameControl, sortProperty: "name", filterProperty: "name", width: "100px"}));

[Former Member · Accepted solution]

Hi Maksim,

Thanks for insight. I was trying to look this up in the documentation under the ManagedObject.bindProperty function where this appears to have a bunch of oBindinfoInfo.xxxx attributes, where your answer was specifically for oBindingInfo.type. Is there any other documentation that you could point me to that further explains oBindingInfo specifically as it applies to TextField. For example there is a oBindingInfo.type.formatValue which is for formatting the String. But there is also a oBindingInfo.formatter(cellValue). What the difference and when should you use one or the other. I ran into the formatter based on trying to figure how to conditionally color the background of a cell based on value?

So: Is there more documentation on BindingInfo and is there a new preferred way to conditionally color a cell (answer was previously posted in 2013)?

Thx - Joe