Question
Crestone Technology
MX
Last activity: 12 Apr 2016 13:56 EDT
How can I figure out which part of a Pega skin applies to a given element on screen?
It used to be difficult to code HTML to match a color I see somewhere on my screen. Then people wrote nifty little tools such as ColorPick EyeDropper. EyeDropper allows me to click anywhere on my screen and get the hex code for the color in that pixel.
I have the same sort of challenge when I try to set a style in a Pega skin. I was recently asked to change a style setting in the work object bread crumb trail. I opened my application skin and looked at the options:
I also looked at the Mix-In options. None of them was an obvious match. I tried a few and didn't figure it out.
So, my question: given a part of the UI, how I can I determine where to set applicable styles in my Pega skin?
My next step was to work backwards from the name of the style.
- I right-clicked on the bread crumb trail and did "View Source"
- found that the relevant style is "iconArrowHorizontal"
- searched in PRPC (Rules and Data / All Content / Contains / All Applications
Results from that search:
It used to be difficult to code HTML to match a color I see somewhere on my screen. Then people wrote nifty little tools such as ColorPick EyeDropper. EyeDropper allows me to click anywhere on my screen and get the hex code for the color in that pixel.
I have the same sort of challenge when I try to set a style in a Pega skin. I was recently asked to change a style setting in the work object bread crumb trail. I opened my application skin and looked at the options:
I also looked at the Mix-In options. None of them was an obvious match. I tried a few and didn't figure it out.
So, my question: given a part of the UI, how I can I determine where to set applicable styles in my Pega skin?
My next step was to work backwards from the name of the style.
- I right-clicked on the bread crumb trail and did "View Source"
- found that the relevant style is "iconArrowHorizontal"
- searched in PRPC (Rules and Data / All Content / Contains / All Applications
Results from that search:
I tried making changes to a couple of those, without results. I considered the issue that, if the style is defined in several rules, which one takes precedence? To find out which file is taking precedence, I tried making silly changes like setting the background color in some styles to a rather bold shade of pink, also without result. If the rules all had the same name, then presumably this would be a simple question of rule resolution. Given the five different CSS files named above, I do not know how to determine the order of precedence.
Conclusion
Now I have two questions:
1) as I asked above, given an element I see in the UI, how I can I determine where to set the style(s) for it in my Pega skin?
2) given a style that is defined in several rules, how can I determine which one takes precedence?
Accepted Solution
Pegasystems Inc.
US
Hi Elliott--
1. Current section for the breadcrumb is: pyCaseBreadCrumbInner . The section currently consists of only an icon and a standard link in a dynamic layout. All are style-able via the skin, or (in the case of the icon) using a standard icon-font.
2.You can/should use standard front-end development tools to held build Pega apps. The best and most-used tool is your browser's built in developer tool/web inspector.This is the best way to discover the CSS classes used. You can then search the Designer Studio for the CSS class to find which style sheet the declaration is written. Typical practice would be to have an application overwrite CSS attached to your skin. Simply add overwrite CSS to this style sheet.
3. Any CSS found prefixed as "workform.." is generated by the system and thus can be ignored.
4. Live UI is the best tool for understanding the Pega structure.
Hi Elliott--
1. Current section for the breadcrumb is: pyCaseBreadCrumbInner . The section currently consists of only an icon and a standard link in a dynamic layout. All are style-able via the skin, or (in the case of the icon) using a standard icon-font.
2.You can/should use standard front-end development tools to held build Pega apps. The best and most-used tool is your browser's built in developer tool/web inspector.This is the best way to discover the CSS classes used. You can then search the Designer Studio for the CSS class to find which style sheet the declaration is written. Typical practice would be to have an application overwrite CSS attached to your skin. Simply add overwrite CSS to this style sheet.
3. Any CSS found prefixed as "workform.." is generated by the system and thus can be ignored.
4. Live UI is the best tool for understanding the Pega structure.
CSS order in general can be complicated. You can read more about this. In Pega the cascade is general as follows: base CSS (in core product); skin generated CSS (as of 7.2 skins may inherit from each other); CSS files attached to the skin; CSS files attached to a harness. Inline CSS should never be used—it is not cached by the browser thus causing performance issues and additionally is essentially unmaintainable. Legacy inline styles can be overwritten using !important. Use this lightly as performance is greatly affected. More on !important. Working with CSS is both science and art. In short—you must use Chrome, Firefox, or Safari Developer's Tools to understand which layer of CSS is being used and use a single application overwrite style sheet attached to your skin.
Cheers,
Shaun
Pegasystems Inc.
US
Elliot,
While underneath the hood, the styles are being applied by CSS. The intent of the skin rule is to provide you an interface to define your styles and define them to the auto-generated controls and UI elements.
Might I suggest another method for working backward? From your screen shot it looks like you have the Live UI inspector enabled. Go to the screen with the breadcrumb trail and turn it on. Inspect the cell/layout containing the breadcrumb trail and open its properties by clicking the little gear icon. Check out the Presentation tab to see which of the styles it is using from the Skin rule (which is also the answer to question 2, this is what is taking precedence).
Depending on how the breadcrumb trail is implemented, such as a Label or a Link control, will determine which of the style menu options in your screenshot above the style pulls from.
Thanks.
B.
Pegasystems Inc.
US
Just to make sure I've got my bases covered, the format defined on the controls Presentation tab takes precedence *if* it isn't over-written by an inline style or class under the Advanced Presentation Options or some other js or css embedded in the harness. I strongly discourage doing either.
Thanks.
B.
Crestone Technology
MX
Let's see if I understand you fully. I think you said that the order of precedence is as follows. IE, if I set a style attribute in multiple places, the settings would "win" in this order:
1) inline class
2) inline style (Not best practice and will incur a Warning)
Question 1 I want to confirm that specifically: do you expect an inline class to override an inline style?
3) js or CSS embedded in Harness
4) formatting parameters on Presentation tab of control
Question 2 I want to confirm that, too. js/CSS in the Harness can override parameters on presentation tab. True? That would explain a few incidents, over the years, when the presentation parameters seemed to be ignored.
I have a third, related question but I think that it might split this conversation into a couple of streams. I will post it as a separate topic so that this conversation doesn't turn into spaghetti. Stay tuned.
Pegasystems Inc.
US
Elliot,
Sorry I haven't replied, I wanted to confirm my understanding so as to provide misinformation.
Here is the order of precedence:
- Inline style defined on an individual cell trumps all.
- Closely followed by any read-write/read-only class styles referenced on a cell.
- Then js or CSS imbedded/referenced in the harness (or any non-autogenerated section include/control rendered in the harness).
- Skin rule format defined as the default on a control rule.
- Skin rule format defined on the control when actually used in the section rule as defined on the Presentation tab of its property panel.
Thanks.
B.
Pegasystems Inc.
US
LOL. Sometimes one little word makes a world of difference. Hopefully it goes without saying that I meant "....so as NOT to provide misinformation".
Thanks.
B.
Crestone Technology
MX
Hello Again Brendan,
As often happens, this question splits into more questions. I'll take them on separately. First one:
Can I use Live UI to inspect a manually generated UI/HTML rule?
Murphy's Law at work: You gave me the very reasonable advice to use Live UI, but of course the section I asked you about just happened to be one that Live UI can't "see". D'oh!
- Elliott
Crestone Technology
MX
Brendan,
After some more experimenting, I find that your answer - the recommendation to use Live UI - is correct most of the time. I Marked your comment above as the Correct Answer. Then I thought a bit more and un-marked it as Correct (sorry) in order to pursue this a bit further.
The Live UI answer leaves some edge cases, such as the breadcrumb trail.
Brendan,
After some more experimenting, I find that your answer - the recommendation to use Live UI - is correct most of the time. I Marked your comment above as the Correct Answer. Then I thought a bit more and un-marked it as Correct (sorry) in order to pursue this a bit further.
The Live UI answer leaves some edge cases, such as the breadcrumb trail.
- the section is manually generated, and Live UI can't seem to inspect it for information
- it's not clear which elements in a Skin rule would map to the elements in the breadcrumb trail. For instance, the part I was focusing on is the blank space between breadcrumb links. In PRPC 6.1, we have arrows between the breadcrumb links. In 7.1 we don't see those links. None of the options in the Skin rule seemed to correspond to "blank space between links"
- I dug a bit:
- Section ProcessSteps includes Section ProcessFlowPath
- Section ProcessFlowPath calls function ProcessFlowPath
- Section ProcessFlowPath includes EXCELLENT documentation in an HTML comment block, which explains that the CSS class of the arrows is iconArrowHorizontal
- Here are the Search results for Rules and Data/ All Content/Contains/MyCurrent Application, "iconArrowHorizontal"
- In that screenshot above, I have outlined, in red, several possible sources for the style I am tracking down
- I dug into those css files and found that the style is defined in all five CSS files
pyScreenFlow_EndUser62
pzBaseCore
workform
workform_classic
workformbaseuser
- I tried modifying a couple of them in obvious ways, such as making the background color hot pink. However, none of my modifications became visible in my UI
Then I ran out of steam and wrote this post, thinking that there must be - or at least, I hoped that there would be - a better way then playing trial-and-error with background colors. For this individual question, I may have stopped just short of the answer. Perhaps if I had tried wingdings font and a shocking background color in just one more CSS, I would have found the answer to the question "where can I modify the style class for the breadcrumb trail?" That would have been great. It also would have left the question "Given five places where a CSS class might be defined, which one is taking precedence in my application right now?"
Conclusion/Remaining questions
- where can I modify the style class for the breadcrumb trail? (iconArrowHorizontal)
- Given multiple CSS files where a CSS is defined, how could I determine which one is taking precedence in my application right now?"
Crestone Technology
MX
Hey, does anyone have any thoughts on these questions from my last reply? These are the core questions for this post.
Conclusion/Remaining questions
- where can I modify the style class for the breadcrumb trail? (iconArrowHorizontal)
- Given multiple CSS files where a CSS is defined, how could I determine which one is taking precedence in my application right now?"
Accepted Solution
Pegasystems Inc.
US
Hi Elliott--
1. Current section for the breadcrumb is: pyCaseBreadCrumbInner . The section currently consists of only an icon and a standard link in a dynamic layout. All are style-able via the skin, or (in the case of the icon) using a standard icon-font.
2.You can/should use standard front-end development tools to held build Pega apps. The best and most-used tool is your browser's built in developer tool/web inspector.This is the best way to discover the CSS classes used. You can then search the Designer Studio for the CSS class to find which style sheet the declaration is written. Typical practice would be to have an application overwrite CSS attached to your skin. Simply add overwrite CSS to this style sheet.
3. Any CSS found prefixed as "workform.." is generated by the system and thus can be ignored.
4. Live UI is the best tool for understanding the Pega structure.
Hi Elliott--
1. Current section for the breadcrumb is: pyCaseBreadCrumbInner . The section currently consists of only an icon and a standard link in a dynamic layout. All are style-able via the skin, or (in the case of the icon) using a standard icon-font.
2.You can/should use standard front-end development tools to held build Pega apps. The best and most-used tool is your browser's built in developer tool/web inspector.This is the best way to discover the CSS classes used. You can then search the Designer Studio for the CSS class to find which style sheet the declaration is written. Typical practice would be to have an application overwrite CSS attached to your skin. Simply add overwrite CSS to this style sheet.
3. Any CSS found prefixed as "workform.." is generated by the system and thus can be ignored.
4. Live UI is the best tool for understanding the Pega structure.
CSS order in general can be complicated. You can read more about this. In Pega the cascade is general as follows: base CSS (in core product); skin generated CSS (as of 7.2 skins may inherit from each other); CSS files attached to the skin; CSS files attached to a harness. Inline CSS should never be used—it is not cached by the browser thus causing performance issues and additionally is essentially unmaintainable. Legacy inline styles can be overwritten using !important. Use this lightly as performance is greatly affected. More on !important. Working with CSS is both science and art. In short—you must use Chrome, Firefox, or Safari Developer's Tools to understand which layer of CSS is being used and use a single application overwrite style sheet attached to your skin.
Cheers,
Shaun
Crestone Technology
MX
Hello Shaun. Thanks for joining the discussion.
1) pyCaseBreadCrumbInner I assume it exists in 7.2. I'm in 7.1.8. I'll add that to the reasons that I'm looking forward to upgrading :-) BUT that's not really the point here. To borrow from the proverb, I'm trying to learn how to fish, not just have a fish today. The breadcrumb trail style is just an example fish; learning to fish, in this case, means learning to work better with CSS/LiveUI/Pega in the future. Which leads to your next point -
2a) "use standard front-end development tools..."
I used developer tools to inspect the breadcrumb trail, in both IE and in Chrome. In both cases, I arrived at the style more quickly and easily than I had previously. Excellent. Thank you for that advice!
2b) "You can then search the Designer Studio for the CSS class to find which style sheet the declaration is written"
Righto, I did that - see the lengthy saga above. Despite my plodding method of discovering the style, it's good to know that I was basically on the right track. Thanks #2.
2c) "Typical practice would be to have an application overwrite CSS attached to your skin. Simply add overwrite CSS to this style sheet."
Hello Shaun. Thanks for joining the discussion.
1) pyCaseBreadCrumbInner I assume it exists in 7.2. I'm in 7.1.8. I'll add that to the reasons that I'm looking forward to upgrading :-) BUT that's not really the point here. To borrow from the proverb, I'm trying to learn how to fish, not just have a fish today. The breadcrumb trail style is just an example fish; learning to fish, in this case, means learning to work better with CSS/LiveUI/Pega in the future. Which leads to your next point -
2a) "use standard front-end development tools..."
I used developer tools to inspect the breadcrumb trail, in both IE and in Chrome. In both cases, I arrived at the style more quickly and easily than I had previously. Excellent. Thank you for that advice!
2b) "You can then search the Designer Studio for the CSS class to find which style sheet the declaration is written"
Righto, I did that - see the lengthy saga above. Despite my plodding method of discovering the style, it's good to know that I was basically on the right track. Thanks #2.
2c) "Typical practice would be to have an application overwrite CSS attached to your skin. Simply add overwrite CSS to this style sheet."
I had been focusing on where the style was defined in Pega, rather than on defining it myself. Let's call that a sort of backward-looking approach. From you and various other sources at Pega (other conversations on Mesh, online help, GCS), I am consistently getting the recommendation to focus less on the current state of CSS and more on setting it myself by overriding it with Skins and added CSS files. I think I'm coming around to agree with that approach.
3) ignore workform*.css: good to know. Can you satisfy my curiosity a bit? what are those files for?
4) "Live UI is the best tool for understanding the Pega structure"
Absolutely. Another detail from the saga above is that, in 7.1.8, the breadcrumb trail is defined in a manually generated rule, so it was invisible to Live UI. But aside from this specific instance, I am finding Live UI very useful. I'm very glad you guys added it to the platform.
Conclusion
- Thanks again for jumping in
- I'm going to mark your answer as correct
- Brendan, thanks again for your effort on this and for bringing Shaun into the conversation.
Cheers,
Elliott
PS
- The defect that started this adventure is that the arrows between the breadcrumbs aren't displaying right now. It has been downgraded in priority. If I happen to solve it later, I'll post what I did.