Question
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***
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.