Skip to Content
0
Jun 20, 2022 at 09:32 AM

Coloring cells of a controller generated sap.m.table in UI5

57 Views

Hello experts,

As the title implies I need to color the cells of a controller generated sap.m.table.

First I make a GET to a service which returns me results in this here format:

image.png

I then proceed to cycle the keys of the response to create my column headers.

In total I now have 4 columns which contain the keys of the response as the Label for each column.

Then I create my cells and columnListItems in which I push the cell items.

How would I go about coloring, let's say the cells of the third column?

Thanks in advance for any help!

Here follows my code:

onReadForRecordsAndBuildTable: function(finalParams){
var oController = this;
var oCell = [];
var tableRecordsModel = new JSONModel({});
var oTable = this.getView().byId("overviewTable");
oController.showBusy();

$.when(oController.readUrlParameters(finalParams))
.done(function(urlModel) {
tableRecordsModel.setData(urlModel.getData());
oController.getView().setModel(tableRecordsModel, "tableRecordsModel");
var tableData = oController.getView().getModel("tableRecordsModel").getData();
var aColumns = Object.keys(tableData[0]);

aColumns.forEach((ele) => {
var oColumn = new sap.m.Column("col" + ele, {
width: "1em",
header: new sap.m.Label({
text: ele
})
});
oTable.addColumn(oColumn);
});

tableData.forEach((ele) => {

var aCell= [];

for (var property in ele) {
var textToInject = (`${ele[property]}`);
var cell1 = new sap.m.Text({
text: textToInject
});
aCell.push(cell1);
}

var aColList = new sap.m.ColumnListItem({
cells: aCell
});

oTable.addItem(aColList);

});

oController.hideBusy();

}).fail(function() {
oController.hideBusy();
});
},

Attachments

image.png (12.9 kB)