Aleks Mi Aleks Mi - 1 year ago 283
JSON Question

Reading user-input from Table in sapui5

I am writing a front-end program in

, which should allow the user to input data (like char or numbers) into a table, and then, furthermore, read data, after clicking on a button "submit"

What I saw so far was everything related to get data from a selected row.

I am really new to this field so I appreciate any help!

I am using
. The table initially gets it's data from a
file but that I have done in order to test the binding.

//data definition:
var oPosData = [{PoItemI : "0010"}];

var oTable = new sap.ui.table.Table("PoData",{
//title: "Positionsdetails",
visiblRowCount: 5,
firstVisibleRow: 3,
selectionMode: sap.ui.table.SelectionMode.Single

// For simplicity, i will just ad 1 column to the table. but i have more
var oColumn_PosNr = new sap.ui.table.Column("PosNr",{
label: new sap.ui.commons.Label({text: "Position"}),
//template: new sap.ui.commons.TextView().bindProperty("text", "Positionsnummer"),
template: Input1 = new sap.ui.commons.TextField("PosNrTF",{
key: "text",
value: "{PoItemI}"
//sortProperty: "Positionsnummer",
//filterProperty: "Positionsnummer",
width: "200px"

//Input1.setValue("Bla"); Input1.getValue());
//Input1.attachChange(function(oEvent) {
var output = oEvent.getSource().getBindingContext().getPath();
alert('Text changed to : '+ output);

//Create a model and bind the table rows to this model
var oModel_Item = new sap.ui.model.json.JSONModel();
oModel_Item.setData({modelData: oPosData});

Is it wrong to do it with this table control? Or am I doing the binding wrong? When I try to read it doesn't work.

I am as well getting trouble to extract the binding part of the controls.

// Submit button
// I would be happy if this button prints me the value, that is stored in the

var oButton1 = new sap.ui.commons.Button({
text : "Submit",
style: sap.ui.commons.ButtonStyle.Emph,
width: '50%',
//tooltip : "",
//press : function() {alert('Pressed me' + );}
press : function() {

var table_model = sap.ui.getCore().getControl("PoData").getModel();//.getPath();//.getPath();
var table_row = sap.ui.getCore().getControl("PoData").getRows()[1].getCells()[1];//.getValue();
var table_path = sap.ui.getCore().getControl("PosNrTF").getBindingContext(table_model);//.getPath();
var table_column_LABEL = oTable.getColumns()[0].getLabel().mProperties.text;
var table_column_template = oTable.getColumns()[0][1];//getBindingContext();


layoutData : new sap.ui.layout.GridData({
indent: "L5 M5",
span: "L1 M6 S12"


I can't get the value which is stored within the template part of the column, if it is stored there.

Shall I do it in a different way like adding rows to the table instead of column? I came across CustomData or Content but don't know how to use it and if this solves the problem?! Should i use binding at all if i am just interested in the data that the user inputs or binding will help me by "automatically updating the value" through Two-Way binding (no clue how to do that).

Answer Source

I'm a bit confused because your explanation is not clear, but let's see some valuable comments on your code:

  • First of all, I would recommend to use the sap.m.Table object for creating tables when it comes down to productive usage. It's responsive, supports mobile devices and it's widely used and maintained in official Fiori applications as well.
  • Your binding is working. As JSONModel is set to two-way binding by default (however I should see the bootstrap section of your project to make sure), data entered in the input is automatically updated in your model. So if you want to create a send button which forwards the information, you don't have to access the table, the row or even the column; just process the JSON Model.
  • //Input1.attachChange(function(oEvent) { var output = oEvent.getSource().getBindingContext().getPath(); alert('Text changed to : '+ output); console.log(output) }); This event handler gives an oEvent object, which contains the new value itself (oEvent.getParameter("newValue")). If you want to retrieve the object from the model assigned to the field, you this code snippet: oTable.getModel().getProperty(output);

  • You don't have to add columns to the table; it's done by the aggregation binding created to the rows aggregation.

  • CustomData is used to attach data to an (UI) element and retrieve it later (like hidden properties). You don't have to use it in this scenario.
  • Binding is a good choice in the most cases. Later, you can use binding and data types to validate the form; it also a great solution for aggregations (table rows, list elements, etc.). So I would recommend to use it.