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 ?

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 ?

• javascript
• jquery
• sapui5

• Which table are we talking about? sap.m.Table? Or sap.ui.table.Table? If it's the latter case, see stackoverflow.com/a/63615774/5846045 – Boghyon Hoffmann Commented Aug 29, 2020 at 11:22

6 Answers 6

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

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

  <Table xmlns="sap.m">
    <!-- ... -->
    <ColumnListItem highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" />
  </Table>
  

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

  <table:Table xmlns:table="sap.ui.table">
    <table:rowSettingsTemplate>
      <table:RowSettings highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" />
    </table:rowSettingsTemplate>
    <!-- ... -->
  </table:Table>
  

Samples

• Demo Kit sample (sap.ui.table.Table)
• JSBin sample with indication colors (sap.m.Table and sap.ui.table.Table)
• How to switch applying a property binding using ternary operator in Expression Binding?

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

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);
    }
});

@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

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.

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.