How can we add colour to label of one of the tab in Accordion Layout Group?
I have a requirement in which I need to add color to only one of the tab's label of Accordion Layout Group. How can we do that ?
I have attached a screenshot in which the label that needs to be colored is highlighted in yellow.
Accepted Solution
Updated: 30 Sep 2020 8:06 EDT
Coforge
GB
Hi Sankar,
Thanks a lot for your help.
Updating your code a little, I was able to complete it. Please find below the code which worked for me.
<pega:choose><pega:when name="Test"><h style="color:red;">Duplicate details</h></pega:when><pega:otherwise>Duplicate details</pega:otherwise></pega:choose>
Thanks again.
Regards,
Neha Bisht
Updated: 11 Sep 2020 8:05 EDT
Capgemini
NO
Hi Neha, Below CSS code worked for me. You can add the below CSS to the respective section and update data-lg-child-id="1" based on the tab order you want to change color.
<style>
.layout-group-accordion div[data-lg-child-id="1"] h3{color:red!important;}
</style>
Let me know if you any questions on the above.
Good Luck!
Capgemini
NO
I created a new section in the required class with Auto-generated HTML Disabled from the HTML tab. then I included the above style in that rule and included this section in the section where the accordion is present.
As we need this change for a single accordion, I went for this approach else we can add this CSS in harness stylesheet itself.
Coforge
GB
Hi Sankar,
Thanks for the reply!
Yes it worked. But I need to do this on the basis of a property's value. So it has to be conditional Colouring. Any idea if we can do that?
Regards,
Neha Bisht
Capgemini
NO
We can do it using Jquery. Replace the above style tag in the section with below code.
<script>
$('.layout-group-accordion h3:contains("Settings")').css("color", "red");
</script>
The above code changes the color of the accordion with title "Settings". To make it based on property, include Pega JSP tags.
<script>
$('.layout-group-accordion h3:contains("<pega:reference name="myProperty" mode="javascript" />")').css("color", "red");
</script>
Change the myProperty with the property name.
Let me know if you any questions.
Coforge
GB
Hi Sankar,
Thank you so much for your reply.
I have included the previous code that you gave in the style sheet being referred in the skin as I could not include it in the HTML tab of the section due to design concerns.
Also the requirement is when a property is true then we need to colour the label of one of the tab of accordion layout group.
Please suggest.
Your response is really appreciated!
Regards,
Neha Bisht
Capgemini
NO
You can try below Jquery script.
<script>
if(<pega:reference name="myProperty" mode="javascript" />==true){
$('.layout-group-accordion h3:contains("Settings")').css("color", "red");
}
</script>
Working : If myProperty value is true, it will change the color of the accordion title "Settings".
Refresh the section containing this code, if you want to reflect once myProperty value changes.
Good Luck!
Coforge
GB
Hi Sankar,
Thank you for your reply.
When I am using style sheet in the harness (without condition ) , it is working fine.
But when I tried to use the script in harness (with condition ), it started showing some error. PFA screenshot for the same.
Also I tried to add the following code in the label of the Tab itself. The When rule was working fine, but I am not getting the colour.
<pega:when name="Test"><style="color:red!important;">Duplicate details</style></pega:when>
where "Test" is a when rule which contains my valid condition and "Duplicate details" is my label name
Request you to please help.
Thanks in advance!
Regards,
Neha Bisht
Capgemini
NO
You can try the below code in the title.
<pega:when name="Test"><span style="color:red!important;">Duplicate details</span></pega:when>
If you are going with Jquery code, use it in the section.
let me know if you have any more questions!
Accepted Solution
Updated: 30 Sep 2020 8:06 EDT
Coforge
GB
Hi Sankar,
Thanks a lot for your help.
Updating your code a little, I was able to complete it. Please find below the code which worked for me.
<pega:choose><pega:when name="Test"><h style="color:red;">Duplicate details</h></pega:when><pega:otherwise>Duplicate details</pega:otherwise></pega:choose>
Thanks again.
Regards,
Neha Bisht