Hi Helga,

The css class should be ".background-red ". You can find more about Outsystems UI here.

Hi @Helga Afonso ,

You need to use the style property to add styles dynamically (not classes). If you already have the color mapped in your static entity you can simply add this in your style property:

"background-color:" + GetUserActionSubmissionByUserId.List.Current.ApprovalStatus.Color + ";"

To change the text color you can use the property "color" .

"color:" + GetUserActionSubmissionByUserId.List.Current.ApprovalStatus.Color + ";"

Here is a sample the result from my sample OML which I attached:

1.Define CSS classes in your theme 

.status-approved { background-color: green; color: white; }

.status-pending { background-color: orange; color: white; }

.status-rejected { background-color: red; color: white; }

2.Apply them dynamically using 

If(GetUserActionSubmissionByUserId.List.Current.ApprovalStatus.Label = Entities.ApprovalStatus.Approved, "status-approved",

If(GetUserActionSubmissionByUserId.List.Current.ApprovalStatus.Label = Entities.ApprovalStatus.Pending, "status-pending",

If(GetUserActionSubmissionByUserId.List.Current.ApprovalStatus.Label = Entities.ApprovalStatus.Rejected, "status-rejected", ""))))
Add this to the "Style Classes" property
or 
if your using tag you can try like this also
Thanks,
sahana

Hi,

Please check the below link

https://www.outsystems.com/forums/discussion/36777/different-colors-for-different-statuses-in-table-records/

https://www.outsystems.com/forums/discussion/56232/how-to-set-the-color-font-on-status-bar-dynamically-change-based-on-the-backgroun/

Hi @Helga Afonso,

From my understanding, using inline CSS is less efficient, harder to maintain, and increases the size of your HTML. Therefore, as a best practice, try using CSS classes instead of inline styles.

So, create new classes for status-pending, status-approved, and status-rejected, and in the class property include your if condition and use the class names.

Thanks

@Helga Afonso ,

suggestion by @ABHIJITH G and by @Sahana K is correct, don't try to use styles, but use classes.  So in other words, your extra attribute on your static should be the name of a css class, not the name of a color.

Then, the only thing you have to do, is add the attribute to the class property of your expression or container or ...

For example, if you add it to an expression that has no other classes, it would look like 

For example, if you add it to a list item, that already has another class, you append, and make sure there is a space between

As you see, contrary to many suggestions here, there is no further If needed in the expression.

Having it as a class, rather than a style on a single element, allows you to style all aspects of each record, not just the font color.  It also gives you much more flexibility to adjust styling slightly to the context (i.e. type of widget/ application it is used in/...), all while only needing this one extra attribute on the static.  

And, you can make modifications to the styling without needing to change anything to the static entity.

As suggested by @Sahana K , the classes should have a name reflecting the meaning of each record, not reflecting how they should look.

Dorine

PS, no If condition needed to do this, but in cases where you would need an if, the way you were doing it now is not correct.  For starters, you should never code against the label of a static entity record, as that can change.  You should always code against the id.

But also, what you are doing in your example condition, is comparing the label to an id, which will never work, so fix this by comparing the id.

GetUserActionSubmissionByUserId.List.Current.ApprovalStatus.Label = Entities.ApprovalStatus.Approved 

should be

GetUserActionSubmissionByUserId.List.Current.ApprovalStatus.Id = Entities.ApprovalStatus.Approved

Dorine

Hi @Helga Afonso ,

Kindly refer this link below,

https://www.outsystems.com/forums/discussion/92320/conditionally-change-color-of-link-or-expression/

Thanks,

Sudha Narayanan