How to dynamically change background color for specific property?

User Experience
, , , ,
1

Hi,

I have a requirement where I need to dynamically update the property background color or color based on value.

Just an example for property: “.Age”:

If (Age > 50 && Age <80) = background-color:red;

if(Age >30 && Age < 50) = background-color:yellow;

if(Age >17 && Age <30) = background-color:green;

2

@pacchi I have looked into this before, the solution I described in this post works, you just have to extend your skin or a text file referenced therein with the class that is contained by the property in the advanced presentation options.

You can also use a visibility condition on three seperate layouts and reference to a style class or even inline style, but that is considered deprecated. I think there’s even a Pega guardrail warning that discourages this.

3

Thanks for the reply @BasRulesMatter!

But page not found for your solved post.

​

Page not found .png
Page not found .png851×280 9.67 KB

4

@pacchi Apologies, I see that I accidently pasted an extra character in the URL. I updated and verified it!

5

@BasRulesMatter!

I have already written the necessary vanilla JavaScript code, and it’s working as expected in a standard HTML environment. However, I’m unfamiliar with how this works in Pega.

Could you please provide some guidance on where to place the JavaScript code to trigger dynamic style updates effectively within Pega?

menu on link.png
menu on link.png701×430 20.3 KB

Also I tried method which you suggested and verfied in realtime, but didn’t work out for me.

Realtime code.png
Realtime code.png599×168 19.7 KB

6

@pacchi I’ll get back to you on that!

7

@BasRulesMatter! Thanks for the reply,

Expected Output:

Expected Output.png
Expected Output.png1608×341 36.4 KB

8

@pacchi Oh I was just about to do some testing again, glad it’s working! Good job :slight_smile:

9

@pacchi if this issue is resolved could you please use the ‘Accept Solution’ against Bas’ reply which helped solve your question?

10

@BasRulesMatter! Apologies for causing confusion!! The issue is not resolved.

I have attached the above image to simplify what my expected output should look like after changes!!!

11

@pacchi Okay, then I’ll recheck! :wink:

12

@pacchi

This is working as expected, even though you would more often use a refresh condition with a data transform to change stylings:

Styles.png
Styles.png1132×1272 89.2 KB

I did also notice that for tables, doing this leads to a garbled DOM-tree. Only when I include a section in the table cell, this is looking fine. It might have to do with optimized tables and / or css class overrides of table styles, but I didn’t dig into that too much.

13

@BasRulesMatter! I want to express my gratitude for your help. Nice to collaborate with you on this!

The solution which your provided is totally working fine and can be used for complex requirements. In my situation, I’m dealing with a table where I’ll be inputting around 100-200 data entries. With each entry, an activity is triggered, leading to a data transform and subsequent refresh of 100 table cells which is resource-intensive.

Solution #2

Solution 2.png
Solution 2.png1316×295 28.3 KB

I’ve opted to proceed with the following steps:

  1. Add an embedded section to the table cell. Create a section called DynamicAgeDisplay
  2. Add 3 text fields with the property__.Age__ in DynamicAgeDisplay section.
  3. Add a visibility condition for each text field, and add an appropriate skin rule in the presentation tab.
Condition Skin rule
.Age >= 60 && .Age <= 100 Badge text red
.Age >= 30 && .Age <= 59 Badge text orange
.Age >= 18 && .Age <= 29

Badge text green

All set!