Controlling cells within a row of a table

Owned by Charles Evans (Unlicensed)
Jun 27, 2023
1 min read

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.