How to change color of sap.ui.table.Table row based on the status value?

Question

I'd like to change the row color of a grid table (sap.ui.table.Table) based on status value. I followed the this blog post and tried but I'm not able to achieve it.

Could any one provide the suggestion how to achieve it?

Below is the xml code:

<table:Table id="Table" rows="{Dataset>/}" selectionMode="None">
  <table:columns>
    <!-- ... -->
    <table:Column>
      <Text text="Status"/>
        <table:customData>
          <core:CustomData key="mydata" value="{DataSet>Status}" writeToDom="true" />
        </table:customData>
      </Text>
      <table:template>
        <Text text="{DataSet>Status}" wrapping="false"/>
      </table:template>
    </table:Column>
  </table:columns>
</table:Table>

CSS file:

tr[data-mydata="Success"] {
  background: #ff3333 !important;
}

Does this answer your question? [How to highlight entire row in sap.ui.table.Table](https://stackoverflow.com/questions/63615133/how-to-highlight-entire-row-in-sap-ui-table-table) — Boghyon Hoffmann, Apr 26 '21 at 07:34
Since the question has the tag [sap-fiori], I assume aligning with the Fiori design guidelines is of particular importance for the app. In that case, please avoid custom CSS as mentioned in the linked answer above. — Boghyon Hoffmann, Apr 26 '21 at 07:40
@Hoffmann thank for reply ... i tried like mentioned in the link but not able to achieve. for (var i = 0; i < this.getView().byId("Table").getRows().length; i++) { this.byId("Table").getRows()[i].addStyleClass("someClass"); } //css .someClass{ background: red !important; } — deva, Apr 26 '21 at 07:54
Is the app intended to be launched from FLP or sold as a "Fiori" app? Or is it a complete free-style, stand-alone OpenUI5 application decoupled from any Fiori design guidelines? If it's the former case, please follow the guidelines as mentioned in the linked answer. If it's the latter case, I'd vote for removing the tag [sap-fiori]. — Boghyon Hoffmann, Apr 26 '21 at 09:49
Yes, it's a UI5 application. Additionally, the tag [sap-fiori] indicates that it's also a Fiori application i.e. an application (_usually implemented_ with UI5) which you intend to align with the Fiori design guidelines. Coloring the entire row creates inconsistent UI compared to other Fiori apps. Talk with project members and target users. Let them know that there is an existing solution that "SAP" supports which should be favored over poor UX and costly maintenance. — Boghyon Hoffmann, Apr 30 '21 at 10:14

CheMyk · Accepted Answer · 2021-05-19T07:23:06.690

Have a some ways.

First:

in XML View

<core:FragmentDefinition 
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:core="sap.ui.core"
  xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
  xmlns="sap.m">
  
<!-- ... -->
<table:Column>
  <Text text="Status"/>
    <!-- ... -->
    <customData>
      <core:CustomData xmlns:core="sap.ui.core" key="background" value="FillBackgroundColor" writeToDom="true" />
    </customData>
  </Text>
<!-- ... -->

CSS:

span[data-background="FillBackgroundColor"] {
  background-color: #c9fcd5 !Important;
}

Second:

in XML View

<!-- ... -->
<table:Column>
  <Text text="Status"/>
    <!-- ... -->
    <customData>
      <core:CustomData
          key="style-class"
          value="nameOfYourColor"
          writeToDom="true"/>
    </customData>
  </Text>
<!-- ... -->

OR this

<!-- ... -->
<table:Column>
  <customData>
    <core:CustomData
        key="style-class"
        value="nameOfYourColor"
        writeToDom="true"/>
  </customData>
  <Text text="Status"/>
    <!-- ... -->
  </Text>
<!-- ... -->

CSS:

[data-style-class=nameOfYourColor] {
  background-color: #c9fcd5 !important
}

I prefer the second one)

I tried like above process but its changing background of text color only..how to change the color of complete row — deva, Jul 27 '21 at 10:33

score 0 · Answer 2 · answered Sep 20 '22 at 13:37

Coloring sap.ui.table.Table rows based on data:

XML:

<mvc:View
    controllerName="yourController"
    xmlns="sap.m"
    xmlns:t="sap.ui.table"
    xmlns:mvc="sap.ui.core.mvc">

<t:Table selectionMode="MultiToggle"
         selectionBehavior="RowSelector"
         visibleRowCount="5"
         rowsUpdated=".onRowsUpdated">

yourController.JS:

onRowsUpdated: function (oEvent) {
        const aRows = this.oTable.getRows();
        if (aRows.length > 0) {
            aRows.forEach(oRow => {
                const cellId = oRow.getAggregation("cells")[columnId].getId();
                const cellText = sap.ui.getCore().byId(cellId).getText();
                if (cellText === "someText")
                    oRow.addStyleClass("thatImportantColor");
                else 
                    oRow.removeStyleClass("thatImportantColor");
            })
        }
    },

Had to spent hours on searching how to scratch out row data from getRows() method. Thanks Santhosh Gowda for the idea to use the cell ID...

Welcome Ada and thanks for your contribution! Just a small reminder for other readers: the event [`rowsUpdated`](https://sdk.openui5.org/api/sap.ui.table.Table#events/rowsUpdated) _> "[...] is fired often and must **not be used for performance-critical tasks**."_ If the application follows *SAP Fiori design guidelines*, consider using the documented approach for row indication (semantic colors or industry-specific colors): https://stackoverflow.com/a/44349110/5846045 — Boghyon Hoffmann, Sep 20 '22 at 14:40

How to change color of sap.ui.table.Table row based on the status value?

2 Answers2