• Skin rule let’s user to define the branding of an application and is very much tied to portal and loads on the initial load of portal.
• Skin loads on the initial load of portal.
• A portal should have(load) only one skin rule applied throughout. However we can achieve toggling between skin rules at run time via Skin Circumstancing.
• Just like other rules, skin rule also can be circumstanced. However, there are few limitations in creating circumstancing skin rules.
• Skin circumstances should be created based on the properties available in Requestor level pages only (Code-Pega-Requestor) which do not change after the portal is loaded unlike thread level pages.

Example:

Scenario:

Portal’s background, branding and other color combinations to be varied based on the logged in user country.

For example, portal should have ‘blue’ color if user is from India and should have ‘yellow’ color if user is from Australia.

Solution1: In this case, skin can be circumstanced based on the locale property of the operator. Clipboardpage “OperatorID” of instance Data-Admin-Operator-ID is a requestor level page.

This page has a property pyDefaultTimeZone which can be used to identify if the logged in user is from which country. Hence, this property value can be used while creating circumstancing skin rules.

Solution2: Without having to create circumstances of skin rule, this problem can be still solved using custom css. For this, we need to have an attribute in the dom on harness/portal level which can be used to distinguish between countries. Custom css can be written based on the set custom dom attribute.

Another example:

Scenario:

Ability to switch between dark and light modes in a portal.

Bad Implementation:

Creating circumstanced skin versions, one for light mode and other for dark mode.

On toggle mode, property using which skin is circumstanced is updated.

Property used for toggle is created on Thread Level Page

Why this won’t work:

1. Possibility of property that toggle mode updates is on thread level, since it should only update the current instance/session of the portal. Using such properties to create skin circumstances is not recommended.
2. The Activity Designed to perform the Toggle only updates the property value but no changes are made on the Clipboard Page level to bring the updated skin.

Solution 1 :

1. Create a Property in the class Code-Pega-Requestor (In clipboard the property can be seen under System Pages -> pxRequestor)
2. Use this property to circumstance the skin rule
3. Create an Activity where two steps are required : 
   1. The toggle property is set / reset 
   2. As a step two call Page-Remove that needs to run on pyPortal as step page and it would remove "pyPortal.pyPortalSkin" of Data-Portal class. This would clear out the pyPortalSkin so that the updated skin details are loaded when we load the circumstanced skin.
4. Now create a Event Action Model to call the ToggleActivity and then Perform a Browser Reload 
5. INC Reference : INC-A13662

Solution2 : Circumstance harness rule instead which would have specific styles included for light and dark modes.

Solution3 : Using custom css based on custom selectors which identifies the mode.