Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

Changing color of table cells

We have created a SAPUI5 application using the SAPUI5 "table" control and with a gateway service for oData and  I'd like to change the background color of the cells based on the data. If D1 red if D2 blue if D3 yellow.

So far I can do this only based on a menu event, click on a menu button to change the color. I've tried parsing the DOM with

document.getElementsByTagName(SPAN'), and looping thru the DOM and changing the background color but the data is not there until the bindrows has completed. I've tried window.onload and still the data is not there. Is there an event after when oTable.bindrows() gets the data?

replied

Hi Jesse,

You could try using the formatter function of the bindProperty method, this is called for each row in your table, for example...

var oControl = new sap.ui.commons.TextView().bindProperty("text", "bindpath",function(cellValue){

          switch(cellValue){

                    case 'D1':

                              backgroundColor = 'red';

                              break;

                    case 'D2':

                              backgroundColor = 'blue';

                              break;

                    case 'D3':

                              backgroundColor = 'yellow';

                              break;

                    default:

                              backgroundColor = 'white';

          }

          cellId = this.getId();

          $("#"+cellId).parent().parent().css("background-color",backgroundColor);

          return cellValue;

});

var oColumn = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Columnhead1"}), template: oControl});

oTable.addColumn(oColumn);

Hope this helps.

Regards,

Ian

3 View this answer in context
Not what you were looking for? View more on this topic or Ask a question