1

I have been doing the below to highlight an entire row in a table:

this.byId("sampleTable").getRows()[i].addStyleClass("someClass");

.someClass{
  background: #b0c4de !important;
}

Result: Screenshot of my UI5 table with custom CSS

It works but I learnt from other questions that doing this way and using oRow.addStyleClass is not recommended since it's not a public method.

Any links, recommendations or an answer are much appreciated.

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
KcH
  • 3,302
  • 3
  • 21
  • 46

2 Answers2

2

Highlighting the entire row with custom colors is not supported by design. At the same time, SAP recommends to avoid custom CSS:

SAP Fiori launchpad apps should not override styles. (source)

UI5 instead provides row indication with semantic colors as well as alternate row colors which are all theme-dependent. In Quartz Light (Fiori 3 default theme) for example:

enter image description here
From: https://openui5.hana.ondemand.com/entity/sap.ui.table.Table/sample/sap.ui.table.sample.RowHighlights

Adding semantic color to the row:

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

Enabling alternate row colors:

<Table xmlns="sap.ui.table" alternateRowColors="true">
  <!-- ... -->

Sample https://jsbin.com/toxehec/edit?js,output

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
  • Thanks for a broad explaination :) ...semantic color looks cool , but sometimes it's a must to highlight entire row then (any other alternative)? ........ also one quick question sir, if we have fixed the ui5 version like say 1.79.0 , then will this affect in any way using custom css ? – KcH Aug 27 '20 at 16:38
  • 1
    @Codenewbie Bootstrapping with a specific UI5 version is even encouraged to prevent possible [cache issues](https://stackoverflow.com/a/60377984/5846045). The doc even explicitly warns **not** to depend on the default always-up-to-date CDN address [(src)](https://openui5.hana.ondemand.com/topic/2d3eb2f322ea4a82983c1c62a33ec4ae.html). So please, use a fixed UI5 version. The problem with custom CSS is that it will most probably break after a UI5 version update. – Boghyon Hoffmann Aug 27 '20 at 17:03
  • The same happened in our application and that broke layout then later we fixed the compatible older UI5 version , so I understood that fixing a UI5 version and having little custom CSS would be better , am I right sir ? – KcH Aug 27 '20 at 17:09
  • 1
    @Codenewbie I can't say for all projects but generally, if the customer absolutely favors custom UI change, that comes with possible inconsistent UI and higher maintenance costs, over the standard _ok_-ish Fiori design, I guess there is no choice other than actually delivering it. In that case, yes, having a little custom CSS should be fine with a fixed UI5 version. I'd write some regression tests though. But I'm not sure which tool to use for visual tests. – Boghyon Hoffmann Aug 27 '20 at 17:59
0

It's also possible to use these colors (source):

Possible colors

So highlight here:

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

You can also have values IndicationXX where XX goes from 01 to 08.

Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
Dmitry Krokhun
  • 9
  • 2