Question
Virtusa Corporation
IN
Last activity: 11 Aug 2023 22:12 EDT
How to dynamically change background color for specific property?
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;
-
Reply
-
Share this page Facebook Twitter LinkedIn Email Copying... Copied!
Accepted Solution
Updated: 11 Aug 2023 22:12 EDT
Virtusa Corporation
IN
@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
I've opted to proceed with the following steps:
- Add an embedded section to the table cell. Create a section called DynamicAgeDisplay
- Add 3 text fields with the property.Age in DynamicAgeDisplay section.
- Add a visibility condition for each text field, and add an appropriate skin rule in the presentation tab.
@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
I've opted to proceed with the following steps:
- Add an embedded section to the table cell. Create a section called DynamicAgeDisplay
- Add 3 text fields with the property.Age in DynamicAgeDisplay section.
- 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!
Updated: 6 Aug 2023 15:39 EDT
Ordina
NL
@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.
Updated: 6 Aug 2023 10:28 EDT
Virtusa Corporation
IN
Updated: 6 Aug 2023 20:39 EDT
Virtusa Corporation
IN
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?
Also I tried method which you suggested and verfied in realtime, but didn't work out for me.
Updated: 7 Aug 2023 2:34 EDT
Virtusa Corporation
IN
@BasRulesMatter! Thanks for the reply,
Expected Output:
Updated: 8 Aug 2023 10:49 EDT
Virtusa Corporation
IN
@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!!!
Updated: 11 Aug 2023 22:12 EDT
Ordina
NL
This is working as expected, even though you would more often use a refresh condition with a data transform to change stylings: 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.
Accepted Solution
Updated: 11 Aug 2023 22:12 EDT
Virtusa Corporation
IN
@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
I've opted to proceed with the following steps:
- Add an embedded section to the table cell. Create a section called DynamicAgeDisplay
- Add 3 text fields with the property.Age in DynamicAgeDisplay section.
- Add a visibility condition for each text field, and add an appropriate skin rule in the presentation tab.
@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
I've opted to proceed with the following steps:
- Add an embedded section to the table cell. Create a section called DynamicAgeDisplay
- Add 3 text fields with the property.Age in DynamicAgeDisplay section.
- 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!
Pegasystems Inc.
GB
@pacchi if this issue is resolved could you please use the 'Accept Solution' against Bas' reply which helped solve your question?