Skip to Content (Press Enter)
UserImage.jpg
Ooi Zhong Quan
728Views
14Comments
Solved
Unable to change background color of table row
Question
CSS
OutSystems Widgets

Hello All,

Currently I am trying to display pink as the background color for records in a table that fulfill a condition like below:


And the failed attempt:

But I couldn't get the outcome of making those movie with year before 2017 in pink background color.


Any clue to this on how it is not working? (oml is attached.)

DetailScreen.oml
1
0
29 Apr 2020
Copy Link
2026-01-19 17-09-56
Carlos Lessa
 
MVP
Solution

I check your oml and I find out that the difference from yours to mine is the Base Theme, mine is London and your is the base theme from Outsystems UI Web and when I changed in mine to the same as your, mine stop working


I noticed also that yours is applying the class as you can see in the pic bellow but something is overwriting and leaving white

I didn't spend a lot of time investigating this to find a better solution but My solution for that and for now is:

Do the same on the cell and works fine


you can check the oml attached


Hope I could help you better but the time is limited

Best Regards

Carlos Lessa

See solution in context
DetailScreen1.oml
0
0
29 Apr 2020
Copy Link
UserImage.jpg
Ooi Zhong Quan

Carlos Lessa wrote:

I check your oml and I find out that the difference from yours to mine is the Base Theme, mine is London and your is the base theme from Outsystems UI Web and when I changed in mine to the same as your, mine stop working


I noticed also that yours is applying the class as you can see in the pic bellow but something is overwriting and leaving white

I didn't spend a lot of time investigating this to find a better solution but My solution for that and for now is:

Do the same on the cell and works fine


you can check the oml attached


Hope I could help you better but the time is limited

Best Regards

Carlos Lessa

Hi Carlos,


It works after changing the theme ! Just realized different theme affects so much in the styling/functionality. 

Thanks for your help ! :)


1
0
30 Apr 2020
Copy Link
2026-02-26 06-29-24
Rahul
 
MVP

Hi ZQ,
As i am seeing you are providing Background color for Row but column level is binding default css. 

see below image-

In this case you need to add style on column level or override to column css.

like -

SyntaxEditor Code Snippet

.Row .TableRecords_OddLine {
background: pink;}
.Row .TableRecords_EvenLine {
background: pink;}

and bind this class conditionly in row.


Hope this will help you.

Regards

Rahul Sahu

0
0
29 Apr 2020
Copy Link
2026-01-19 17-09-56
Carlos Lessa
 
MVP

ZQ wrote:

Hello All,

Currently I am trying to display pink as the background color for records in a table that fulfill a condition like below:


And the failed attempt:

But I couldn't get the outcome of making those movie with year before 2017 in pink background color.


Any clue to this on how it is not working? (oml is attached.)

Hi ZQ, tried and here is working well, I noticed that yours is missing a ";"  check how I did on these pics


Hope I could help you

Best Regards,

Carlos Lessa

0
0
29 Apr 2020
Copy Link
UserImage.jpg
Ooi Zhong Quan

Carlos Lessa wrote:

Hi ZQ, tried and here is working well, I noticed that yours is missing a ";"  check how I did on these pics


Hope I could help you

Best Regards,

Carlos Lessa

Hi Carlos,


I still cant get the rows displayed in the color based on the condition even after i replicated your solution. Can you help me?


Thank you.


DetailScreen.oml
0
0
29 Apr 2020
Copy Link
2026-01-19 17-09-56
Carlos Lessa
 
MVP

ZQ wrote:

Carlos Lessa wrote:

Hi ZQ, tried and here is working well, I noticed that yours is missing a ";"  check how I did on these pics


Hope I could help you

Best Regards,

Carlos Lessa

Hi Carlos,


I still cant get the rows displayed in the color based on the condition even after i replicated your solution. Can you help me?


Thank you.


Take a new screenshot similar to mine, then I can check what you have done or Can you upload your oml?



0
0
29 Apr 2020
Copy Link
UserImage.jpg
Ooi Zhong Quan

Carlos Lessa wrote:


Take a new screenshot similar to mine, then I can check what you have done or Can you upload your oml?



Hi Carlos, the oml is attached in my previous reply :) 


0
0
29 Apr 2020
Copy Link
2026-02-26 06-29-24
Rahul
 
MVP

Carlos Lessa wrote:

ZQ wrote:

Hello All,

Currently I am trying to display pink as the background color for records in a table that fulfill a condition like below:


And the failed attempt:

But I couldn't get the outcome of making those movie with year before 2017 in pink background color.


Any clue to this on how it is not working? (oml is attached.)

Hi ZQ, tried and here is working well, I noticed that yours is missing a ";"  check how I did on these pics


Hope I could help you

Best Regards,

Carlos Lessa


Hi Carlos,

As of i am know for single property of style no need to ";".


Regards

Rahul Sahu

0
0
29 Apr 2020
Copy Link
2026-01-19 17-09-56
Carlos Lessa
 
MVP

Rahul Sahu wrote:

Carlos Lessa wrote:

ZQ wrote:

Hello All,

Currently I am trying to display pink as the background color for records in a table that fulfill a condition like below:


And the failed attempt:

But I couldn't get the outcome of making those movie with year before 2017 in pink background color.


Any clue to this on how it is not working? (oml is attached.)

Hi ZQ, tried and here is working well, I noticed that yours is missing a ";"  check how I did on these pics


Hope I could help you

Best Regards,

Carlos Lessa


Hi Carlos,

As of i am know for single property of style no need to ";".


Regards

Rahul Sahu

Yes Rahul, you are right no need the semicolon for a single property


0
0
29 Apr 2020
Copy Link
UserImage.jpg
Ooi Zhong Quan

Hi Rahul and Carlos,


I have tried the style both with and without the semicolon ';' symbol in my expression, but it's just not showing the style on screen. Is there any fix for that??


Thank you.

0
0
29 Apr 2020
Copy Link
2026-01-19 17-09-56
Carlos Lessa
 
MVP

ZQ wrote:

Hi Rahul and Carlos,


I have tried the style both with and without the semicolon ';' symbol in my expression, but it's just not showing the style on screen. Is there any fix for that??


Thank you.

I did a fast check on the oml and your is like mine and don't work on yours either, later after working time I will check it  better

SyntaxEditor Code Snippet

If(MovieTable.List.Current.Movie2.Year<2005, "background-color: red", "background-color: white")


0
0
29 Apr 2020
Copy Link
2026-02-26 06-29-24
Rahul
 
MVP

Hi ZQ,

did you try my solution , it will work try once


Regards

Rahul Sahu

0
0
29 Apr 2020
Copy Link
2026-01-19 17-09-56
Carlos Lessa
 
MVP
Solution

I check your oml and I find out that the difference from yours to mine is the Base Theme, mine is London and your is the base theme from Outsystems UI Web and when I changed in mine to the same as your, mine stop working


I noticed also that yours is applying the class as you can see in the pic bellow but something is overwriting and leaving white

I didn't spend a lot of time investigating this to find a better solution but My solution for that and for now is:

Do the same on the cell and works fine


you can check the oml attached


Hope I could help you better but the time is limited

Best Regards

Carlos Lessa

DetailScreen1.oml
0
0
29 Apr 2020
Copy Link
UserImage.jpg
Ooi Zhong Quan

Carlos Lessa wrote:

I check your oml and I find out that the difference from yours to mine is the Base Theme, mine is London and your is the base theme from Outsystems UI Web and when I changed in mine to the same as your, mine stop working


I noticed also that yours is applying the class as you can see in the pic bellow but something is overwriting and leaving white

I didn't spend a lot of time investigating this to find a better solution but My solution for that and for now is:

Do the same on the cell and works fine


you can check the oml attached


Hope I could help you better but the time is limited

Best Regards

Carlos Lessa

Hi Carlos,


It works after changing the theme ! Just realized different theme affects so much in the styling/functionality. 

Thanks for your help ! :)


1
0
30 Apr 2020
Copy Link
UserImage.jpg
Ajay Kiran P

Hi Junior,

I'd a requirement to change the color of each row alternatively. There is how I achieved it.



Cheers.

0
0
24 Jun 2021
Copy Link
UserImage.jpg
Jens Vogelgesang

Questions:

  1. I have fields whose content I change with an "AfterFetchEvent". Based on that I want to change the color?

0
0
09 Dec 2022
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.