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 ?

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

Boghyon Hoffmann · Answer 1 · 2023-01-21T19:27:57.730

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?

Thanks for showing the ColumnListItem option, which difficult to identify in the documentation. — Kunal Panchal, Oct 26 '17 at 05:16

Jasper_07 · Answer 2 · 2014-03-28T11:17:34.530

4

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

edited Mar 28 '14 at 11:17

answered Mar 28 '14 at 11:06

Jasper_07

2,453
2
18
23

JsBin code is working but if I use navigation mode in that code, your code fails. And I want to use navigation mode. – Ash Mar 28 '14 at 13:09
@ashish not sure what "navigation mode" is if its an IE thing, demo is a concept and example works for "webkit", swap for something that works for you – Jasper_07 Mar 28 '14 at 13:18
Navigation mode is a property provided in SAPUI5 table. If I want to display 7 entries initially and there are total 15 entries in the table then we use navigation mode to display remaining entries. So on first page, it will show 7 entries, next page 7 and last page 1 entry. – Ash Mar 28 '14 at 13:41
very good jasper, also on cell base .. -> oRows[5].getCells()[0].$().addClass("highlight"); – dotchuZ Sep 18 '14 at 06:56

score 0 · Answer 3 · answered Mar 28 '14 at 05:12

0

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

answered Mar 28 '14 at 05:12

Michał

2,456
4
26
33

This code is working for single page as i have used navigation mode as pages. This thing does not work for next pages. One more thing, this function is not following the condition part, as we are using here each function, it is applying color to all the rows. – Ash Mar 28 '14 at 13:07

score 0 · Answer 4 · answered Mar 28 '14 at 05:13

@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

score 0 · Answer 5 · answered Mar 28 '14 at 09:02

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.

score 0 · Answer 6 · edited Aug 28 '19 at 10:40

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.

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

6 Answers6

Samples

Linked