Controlling cells within a row of a table

It is not possible to refer to a table control directly by its id. This is because UI5 gives a unique id to each cell to ensure there are no duplicate ids in the app.

There are also some auto-generated ids. It is therefore necessary to obtain a reference to the cell by using its position in the table.

This is done by getting the table items (getItems()), and then referring to a particular item using the array index getItems[1].

Once you have the item, you can get the cells. (item.getCells()) and use the array index to get a particular cell.

It depends on the scenario in your application, but for example, you can add the code below when as an entry is added to a table:

function onTable5DataAdded(evt){

console.log("table4 data added");

var oTable = getControl("Table5");

var lineNumber = evt.getParameter("actual");

lineNumber-= 1;

var oRow = oTable.getItems()[lineNumber];

var controlPosition = 0; //1st control in table

var oControl = oRow.getCells()[controlPosition];

oControl.setMaxLength(4);

}

In a scenario where one of the controls in the table is changed, you can use this code:

function optionChanged(evt){

console.log("option changed");

var oRow = evt.getSource().getParent(); //get parent table item of input

var controlPosition = 0; //1st control in table

var oControl = oRow.getCells()[controlPosition];

oControl.setMaxLength(6);

}

Please see FAB_DEMO_TABLES sample.

FAB 3.1

Controlling cells within a row of a table

Related articles