Short Description

In this document, you will learn about the following topics:

• Skin configuration in the application
• Component styles
• How skin inheritance works
• How to disable formats
• When the skin file names are Pzskinv2 and pzharnessv2
• Enabling debug logs for testing
• Resources that GCS teams must capture
• FAQs and common issues
• Where to look for mixin CSS variables
• Where to view icons in the skin
• What is Generate harness specific CSS
• What happens on Revalidate and Save
• What is the cache type CSS files

Skin configuration in the application

By default, all the portals of an application will point to the Application skin. However, we can override it to point to a specific skin for the portals.

Application Definition

Portal ruleform

Component styles

• Only those components that are selected in the Included styles tab will be appended to the CSS file.
• Only if the plications built prior to Pega 7 is checked, certain legacy styles that were part of the older Pega versions will be included. This would be helpful for applications that are getting upgraded from Pega 7 to Pega 8.
  

How skin inheritance works

• Skins are inherited in the order specified in the Inheritance tab in the Skin Rule form.
• All the formats and mixins will be inherited.
• You can use the inherited skins (or) override it based on the need.
• Inheritance was introduced in Pega 8. So, if the customer is upgrading from lower versions to Pega 8, this will be a new feature.
   
  

How to disable formats

To disable formats, click on Actions > Disable.

• Disabled formats are indicated by the DISABLED indicator (as displayed in the following images).
   
  
    
• If a format is disabled, the corresponding CSS file of the formats is not included in the final bundle.
• Some of the legacy formats from the OOTB skins will be disabled by default, which is something to consider if there is any UI distortion after upgrade.

When will the skin file names be Pzskinv2 and pzharnessv2

The Pzskinv2 is the CSS file of the actual skin and can be the application skin, portal skin, or any custom skin that is applied to the portal.

File URL format

webwb/pzskinv2_<skin name><hash>_full_<checksum>.css!.css

webwb/pzskinv2_cosmosskin1b6642202c59c634cb6d28ae1615ed511993643b5aa565284eb1bae9992576a51_full_13852183191.css!!.css

The Pzharnessv2 is the CSS file of the harness with additional stylesheets at the Harness level and all the CSS content of the skin are applied to the portal.

File URL format

Webwb/pzharnessv2_<portal name><hash>_full_<checksum>.css!.css

For example,

webwb/pzharnessv2_bankportal84beab2e19e8c9927d7335d3487c3dc4_full_1245802589.css!!.cs

The same requests can be verified using the network trace.

How to enable Debug logs for testing

• Enabling the Debugging logs might help SMEs understand the flow and the issue while going through the PegaRULES logs.
• Create a Log category in the Admin Studio and add the following skin specific classes.
   
  

Resources that the GCS team must capture

The GCS team must capture the following resources:

• Network trace  
• Server logs  
• Tracer logs  
• Clipboard for the pyPortal.portalSkin page (screenshot of clipboard)
• Browser DOM screenshots (look for the Head tag and href with pzskinv2 or harnessv2)
• Screenshot of the static content folder of the client (optional)  
• DB tables for the skin (optional)

FAQs and common issues faced  

pyEnduser72 versus pyEnduser

• pyEndUser is the default OOTB Skin with Pega version 7.2 onwards.
• pyEndUser72 is the older skin and is the default OOTB Skin before Pega version 7.2.
• Upgrade scenario, check for the pyEnduser72 and pyEnduser skins.

Incorrect skin name is picked up for a portal

• Check the portal landing page to see if it is pointing to a different skin.

• Toggle the LiveUI and inspect the harness. You will be able to see the skin name. 
• Open Dev tools and check for a <link /> tag with webwb/pzSkinv2 or webwb/pzHarnessv2.

Incorrect skin name is picked up for a particular harness

• Toggle the LiveUI and inspect the harness. You will be able to see the skin name.
• If LiveUI is not available, open Dev tools and check for a <link /> tag with webwb/pzSkinv2 or webwb/pzHarnessv2.
• If the incorrect skin is picked up, open the Tracer and trace the GetWorkStyle activity to see if the pzSkinName parameter is getting passed with the incorrect skin name.
• If the pzSkinName parameter for GetWorkStyle activity is empty, then check the pyPortal page to see if it has the right values for the skin.

UI distortion in some part of the portal

• Check the styles that are added to that section where the UI is distorted, by using browser Dev tools.
• Check if the same style is coming from the skin by clicking on Actions > Preview.
  • If yes, then,
    1. Check the additional stylesheets that are added to the Rule form to find if it is coming from there.
    2. Check if the style is overridden in Component format.
  • If no, then check the harness specific styles. There could be some additional stylesheets added there which might lead to the distortion.

RECOMMENDATION: OOTB CSS selector should not be overridden custom stylesheets.

All formats are not listed while configuring section

When configuring a section, if all the formats are not listed, then,

• Check if the user is overriding the skin in the Override default application skin in the Preferences tab.  
  • If yes, remove the skin (that is overridden) to list all the formats of the application skin.

Where to view the mixin CSS variables

Open the skin, click on Actions button and select view mixin variables

Where to view Icons in the skin

Open the skin, click on the Actions button and select Launch > select Skin preview > click Icons.

Activities, fragments, classes involved in skin generation

• ApplicationSetup – Setup application.
• RequestorInitialize – Step 32 calls the harness.
• pzAddCustomCSS2 – Sets and gets the harness. It calls the harness CSS and its dependencies files.
• WorkformStyles – Adds all the required CSS files and skin in the HTML fragment and calls the GetWorkStyle activity.
• GetWorkStyle – Decides and gets the skin for the portal from the database.

What is the Generate harness specific CSS

The Generate harness specific CSS is used to style the specific harness alone. These CSS files will not affect the other harnesses. This option appears only when customized scripts are added to the harness. If this option is not checked, the CSS applies for other harnesses also.

Also, when this option is checked, the stylesheets are selected based on the CSS selected. The rest of the CSS files will be removed, thus reducing the size and increasing the performance speed.

What happens on Revalidate and Save

This will invalidate the cache and retriggers the skin generation flow. That is, a new skin CSS file with a new cache will be created and the same would be stored to the System-Static-Content class and the database.

What is the cache type of CSS files

CSS files are a part of the static content cache. However, the files will surely be cached in the browser also, as browsers by default cache the JS and CSS files, unless there is a change in the name of the files. If there is a change in the name of files, then browsers will try to fetch the file and store it in the browser cache again.