How to retain portal tab styles after upgrading to 6.3
Summary
As of 6.3, standard portals including Manager, User, pyCaseManager, and pyCaseWorker portals incorporate auto-generated Dynamic Containers to present work areas (such as My Work), and user forms in groups of harness or section tabs. Previously, the tabs were presented in harness-based Work Area controls. Dynamic Container tab groups:
- Can be arrayed horizontally or vertically
- Offer mouse-hover capability for inactive tabs
When you upgrade to 6.3, standard Work Area controls are automatically replaced by Dynamic Containers. The portals should look and behave as before if you are using the standard Rule-PortalSkin.EndUser62 skin.
Configured for the new section-based tabs, the 6.3 skin contains active and inactive tab images for top, left, right, and bottom positions based on pyTopNavigationTabLeft.png and pyTopNavigationRight.png files. The portal skins use a default tab style called Top Navigation
, which reference these tab images.
If you have copied this skin into your pre-6.3 application RuleSet and are using the standard portals, your portal skin will not contain the new style and may not display the tabs properly. This article provides examples of issues that might occur and describes how to correct them.
Suggested Approach
Example 1: Case Manager portal tabs
Here is how the tabs appear in a 6.2 SP2 Case Manager portal using the EndUser62 skin.
If the Top Navigation style is not available (as in your custom copy), the Standard
tab style is used by default. Here is how the tabs look in 6.3.
Note that the backgrounds of inactive tabs are transparent and do not have the correct gray background.
To correct this issue, edit your copy of the skin as follows:
- In the Rules Explorer, locate and open the EndUser62 skin in the PegaEndUser-UI RuleSet.
- On the Styles tab, open the Layouts > Tabs panel and select the
Top Navigation
style. - In the Use Custom Background area on the Header tab, note the images used in the Section Tabs for Active and Inactive states fields.
- Open your copy of EndUser62 and create a style called
Top Navigation
as shown above. - Enter the same images shown above in the Section Tabs fields.
- Save the rule.
The 6.3 portal will reference this style; the tabs should appear correctly.
Example 2: User portal tabs
If you have used the EndUser62 skin with a copy of the standard User portal, the Sub tab style is applied by default after the upgrade.
Here is how the tabs appear in 6.2 SP2 using the Standard
style.
If you have a custom copy of the skin in your application, the Sub
style is applied and the tabs look like this in 6.3.
Inactive tabs are configured with a black font against a white background. The font blends into the dark blue background making the text illegible.
To correct, save a copy of the Data-Portal.UserCenterPanel section to your application RuleSet and change the tab style from Sub
to Standard
. The tabs will then look like this.
To return to the original gray tab background, create a custom tab style using the same configuration settings as the 6.3 EndUser62 skin.