Question
Instellars Global Consulting
SG
Last activity: 14 Oct 2016 17:37 EDT
Applying CSS to a Pega JSP element
I have a non-auto generated section containing a Pega JSP code (pasted below) which generates a button in the end user UI.
I want to apply CSS to this button. How can I achieve that? Thanks in advance.
<pega:reference name=".pyLabel" mode="input" format="Button">
<pega:param name="ToolTip" value="Find most urgent work"/>
<pega:param name="Caption" value="Get Most Urgent"/>
<pega:param name="Id" value=""/>
<pega:param name="OnClick" value="javascript:getNextWorkItem_local()"/>
</pega:reference>
***Updated by moderator: Lochan - User still needing assistance. Adding #helpme tag***
Pegasystems Inc.
IN
If it is in Pega7, create a style format for button in application skin.
Apply the same on button and run script on click of the button. If the script doesnt work thats a different issue which you need to debug.
Instellars Global Consulting
SG
Hi Santhosh,
Thanks for your reply.
How can I refer the style format created for "Button" component in the Skin rule in my non-auto generated section? I have a large other non-autogenerated code in my section other than the portion pasted above. Hence, can't convert to auto-generated right now. For the quick work-around, is there anyway I can apply CSS formatting to the above pasted code? Thanks in advance.
Pegasystems Inc.
IN
For non-auto generated buttons you can apply skin styles by using the below tag
<pega:param name="ButtonStyle" value="testStyle"/>
where testStyle is format created for button in application skin
Instellars Global Consulting
SG
Hi Santhosh,
I have tried using the tag you have mentioned but no luck. I have also tried using name as "Style" but still no luck. The formatting that I configured in style format for the button component in my skin rule is not applying to my button in the non-auto generated section. I could not see the formatting in the overridden formats as well. Please point if I am missing out anything. Thanks in advance.
Accepted Solution
Pegasystems Inc.
IN
Hi Giridhar,
If that is not working, the userform might be overidding the style.
Please try adding this snippet at either custom CSS or in userform html rule.
TABLE.buttonMainTable {
border-radius: 5px;
<button attributes>
}
Blue Rose Technologies GmbH
DE
Hi,
I would not recommend placing the style in UserWorkForm, as this HTML fragment would be included in each and every harness and this particular style will be applicable for the whole application.
The right thing to do would be is to create a text file(of type css) and place it in the harness where this button is present.
American Express
US
I tried the suggested tag <pega:param name="ButtonStyle" value="testStyle"/> and it worked. It doesn't work if the Style name has a space in it though.
Instellars Global Consulting
SG
Hi All,
Can anyone shed some light on this? Thanks in advance.