Table of Contents

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:

  1. In the Rules Explorer, locate and open the EndUser62 skin in the PegaEndUser-UI RuleSet.
  2. On the Styles tab, open the Layouts > Tabs panel and select the Top Navigation style.
  3. In the Use Custom Background area on the Header tab, note the images used in the Section Tabs for Active and Inactive states fields.
  4. Open your copy of EndUser62 and create a style called Top Navigation as shown above.
  5. Enter the same images shown above in the Section Tabs fields.
  6. 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.

Suggest Edit

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.