Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

How to retain portal tab styles after upgrading to 6.3

Updated on May 3, 2020


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.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us