633
Views
3
Comments
Solved
Reactive Web App - Conditionally styling in the Table properties

Hello,

I'm trying to add a conditional style for a table row by making the background pink. I am expecting rows where Employees are inactive to have the background highlighted in a different color. Instead, I'm seeing all rows to be highlighted.

But it looks like the conditional style isn't working here. I've seen posts for Traditional Web App, but not for Reactive Web App. Could someone please help me with this?

This is what the entity looks like and where I'm putting the conditional styling, in the Table properties -> Style Row.

Weirdly, it seems to default to the False statement in the condition no matter what, even when trying If(2+2=4,"table-row","table-row-inactive")

This is the CSS style class is added in the themes:


I've attached the project I'm working off from, and I'm having the issue in the Employees screen.

BuildaDetailScreenExercise_ConditionalFormatTableRow.oml
UserImage.jpg
Tejas Mendse
Solution

Hi @maggi - There is one more way with the help of it you can achieve it. You can move other attributes except background-color to table-row class and add that class to style row attribute of table widget.

Then only change the background color if the user is inactive - Add the condition for row cells like if (user=inactive, "background-color : pink", "background-color:green") but you will have to do it for all the rows cells. Please see below screen shots. 

URL - https://tejas-mendse.outsystemscloud.com/TestModule/Table


If the person is technical then pink else some other color - 


2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi Maggie,

It is possible to set the row class conditionally, just not on a per row basis.  I'm guessing that the condition gets evaluated only once for the whole table, and if in your condition you are referring to the GetEmployees.List.Current.Sample_Employee.IsActive, it will use the first employee of the list to evaluate as that is the 'current' after executing the aggregate.  So if that one happens to be inactive, all rows get class for inactive, if that one happens to be active no rows will.

See attached oml, demonstrating this, just sort list on the IsActive to see.

So that's explaining what you see, but doesn't offer a solution.  I'm not sure there is a solution other than applying the class on a cell level instead of a row level or doing some javascript processing after each fetch, as Davide and Tejas are suggesting.

Dorine

QDR_RowFormatting.oml
2018-05-15 08-41-11
Davide Periquito

Hey,


Unfortunately, I believe that field is not made for conditional styling per Row but the default class for all the rows.

AFAIK you need to define each cell of the table. (since the Row element is also not configurable)

Moreover, if you need more freedom you can use the List element, and you will be able to manage rows by yourself.


Now going into the hack, you can develop your own JS to highlight some rows

UserImage.jpg
Tejas Mendse
Solution

Hi @maggi - There is one more way with the help of it you can achieve it. You can move other attributes except background-color to table-row class and add that class to style row attribute of table widget.

Then only change the background color if the user is inactive - Add the condition for row cells like if (user=inactive, "background-color : pink", "background-color:green") but you will have to do it for all the rows cells. Please see below screen shots. 

URL - https://tejas-mendse.outsystemscloud.com/TestModule/Table


If the person is technical then pink else some other color - 


2021-09-06 15-09-53
Dorine Boudry
 
MVP
Solution

Hi Maggie,

It is possible to set the row class conditionally, just not on a per row basis.  I'm guessing that the condition gets evaluated only once for the whole table, and if in your condition you are referring to the GetEmployees.List.Current.Sample_Employee.IsActive, it will use the first employee of the list to evaluate as that is the 'current' after executing the aggregate.  So if that one happens to be inactive, all rows get class for inactive, if that one happens to be active no rows will.

See attached oml, demonstrating this, just sort list on the IsActive to see.

So that's explaining what you see, but doesn't offer a solution.  I'm not sure there is a solution other than applying the class on a cell level instead of a row level or doing some javascript processing after each fetch, as Davide and Tejas are suggesting.

Dorine

QDR_RowFormatting.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.