Question
Incessant Technologies
IN
Last activity: 13 Apr 2020 12:42 EDT
BackGround Colour for Dynamic Layouts
Hi All,
We are using Pega 7.1.7 version. We got the requirement to dynamically highlight the background of the title text for a dynamic layout.
Our section contains a Layout Group which inturn contains few dynamic layouts. Now i need to highlight the Title text of dynamic layout based on some conditions. Could any one help on how to achieve this requirement.
If highlighting the background is not possible, then appending any image to title dynamically based on when rule is also fine.
***Edited by Moderator: Pallavi to change type from General to Product, add product version and update platform capability tags***
Pegasystems Inc.
IN
Hi Satish,
I am assuming you are using a layout group as Display Mode "Default".
Now, for every dynamic layout inside a layout group, markup will be generated with a unique data attribute names "data-lg-child-id" . it's based on dynamic layouts index position, this data attribute will be assigned with a index value, for example . The 3rd dynamic layout will have a value like data-lg-child-id=3. By using this unique tag we can dynamically apply a CSS styles on child Dynamic layout's Header.
Follow this approach.
1. Apply a custom css class in Layout group - Presentation tab - in Custom css class textbox paste > customLayout
2. Create a when rule, Based on the when rule condition you can include below css style inside a JSP fragment rule.
3.
<style> <pega:when name="hasresolved" > .customLayout > div[data-lg-child-id="3"] h3.layout-group-item-title{ background-color:#0087cf6e !important; } </pega:when>
</style>
Above code will change the background the 3rd Dynamic layout Title. You can modify the css and change the index position of data-lg-child-id="2" in that case 2nd Dynamic layout Title will gets change and so on.
Hi Satish,
I am assuming you are using a layout group as Display Mode "Default".
Now, for every dynamic layout inside a layout group, markup will be generated with a unique data attribute names "data-lg-child-id" . it's based on dynamic layouts index position, this data attribute will be assigned with a index value, for example . The 3rd dynamic layout will have a value like data-lg-child-id=3. By using this unique tag we can dynamically apply a CSS styles on child Dynamic layout's Header.
Follow this approach.
1. Apply a custom css class in Layout group - Presentation tab - in Custom css class textbox paste > customLayout
2. Create a when rule, Based on the when rule condition you can include below css style inside a JSP fragment rule.
3.
<style> <pega:when name="hasresolved" > .customLayout > div[data-lg-child-id="3"] h3.layout-group-item-title{ background-color:#0087cf6e !important; } </pega:when>
</style>
Above code will change the background the 3rd Dynamic layout Title. You can modify the css and change the index position of data-lg-child-id="2" in that case 2nd Dynamic layout Title will gets change and so on.
Please let me know if you need further information.
Incessant Technologies
IN
Hi,
Thanks for explaining in detailed way. I have tried implementing the same. Changed the Custom CSS class of the Layout Group control.
Also i have added the new css style in the 'UserWorkFrom' rule as shown below. I have used the when rule(Always) for testing purpose. Unfortunately, its not working and am not able to see the title highlighted. Please let me know if am doing anything wrong here.
<style> <pega:when name="Always" > .customLayout > div[data-lg-child-id="3"] h3.layout-group-item-title{ background-color:#CC9900!important; } </pega:when>
</style>
Pegasystems Inc.
IN
Hi
Create a new format for the labels; In additional styles mention the Attribute: background Value : Red(color you need)
To achieve conditional highlighting:
=> remove default heading for Dynamic layout (if any)
=> include this Dynamic Layout in one more Dynamic layout
=> add labels with the formats you created
=> use visiblity conditions to highlight as required.