How to change the color of row in table (SAPUI5)?

Question

I have a table in which data is coming from back end. Based on particular condition(data coming from back end (gateway service)), if that condition is true then that particular row will have different color and will have a link on full row. And if condition is false then it will be a normal row.

So how to achieve it ?

Answer 1

Semantic colors for rows are now supported which can be leveraged by using the property highlight

• on ColumnListItem when using sap.m.Table (since 1.44):

   <ColumnListItem highlight="{= ${odataModel>foo} > 50 ? 'Error' : 'None'}" > ... 

• on RowSettings when using sap.ui.table.Table (since 1.48):

   <Table> <rowSettingsTemplate> <RowSettings highlight="{= ${odataModel>foo} > 50 ? 'Error' : 'None'}" </rowSettingsTemplate> <columns> ... 

  

---

Samples

• Demo Kit sample Row Highlights
• Sample with indication colors, available since 1.62 : https://jsbin.com/toxehec/edit?html,js,output

Answer 2

I think there are few different ways to change the colour, the easiest would be to change the style of the associate control

<control>.addStyleClass(myClass);
<control>.toggleStyleClass(myClass, true);

in the following example JsBin - alert overdue rows i use the following on a table row

row.$().addClass("overdue");

it adds the css style "overdue" to the domRef of the row

Answer 3

I assume you've got regular HTML table, then:

$("table tr").each(function(){
    if( condition ){ //your condition eg. $(this).children("td:eq(1)").val() == sth
        $(this).css("background":COLOR);
    }
});

Answer 4

@Ashish its very difficult using only sapui5. you need to use jquery in that case. If that condition is true get the row's index and have a selector of that and then use like

$('.myTable tr:nth-child('+rowindex+')').css("background-color","red")

Try this. not sure

Answer 5

In UI5, I'm not sure if you can do this for a row at once, but you can certainly do this for a single cell using the valueState property:

var oConditionalColumn = new sap.ui.table.Column({
    label: new sap.ui.commons.Label({
        text: "Some label"
    }),
    template: (new sap.ui.commons.TextField({
        value     : "{myfield}",
        valueState : {
            parts : [myfield],
            formatter : function(oValue) {
                return (oValue === undefined || oValue == null || oValue == "" || isNaN(oValue) || parseInt(oValue) == 0) ? sap.ui.core.ValueState.Error : sap.ui.core.ValueState.None;
            }
        },
    }))
});

Or, when you load the model, set an extra calculated property in advance based on your condition, and use that property to render each cell in your row in a different color for the current row context with a mior modification of the above code.

Answer 6

Instead of using CSS we can use sap.m.ObjectStatus to apply colors.

var iDtemplate = new sap.m.ColumnListItem("idTemplate", {
  type: "Navigation",
  visible: true,
  selected: true,
  cells: [
    new sap.m.ObjectStatus({
      text: "{SlNo}",
    }).bindProperty("state", "number", function(value) {
      return getStatusColor(value);
    }),


    new sap.m.ObjectStatus({
      text: "{Name}",
    }).bindProperty("state", "number", function(value) {
      return getStatusColor(value);
    }),
  ],
  pressListMethod: function(event) {
    var bindingContext = event.getSource().getBindingContext();

  }
});

function getStatusColor(status) {
  if (status === '') {
    return "Error";
  } else {
    return "Success";
  }
}

Based on the number field we are giving colors to columns Slno and Name .