Table of Contents

Article

How to add custom tab formats to your application skin

This article describes how to create custom tab formats in the Skin rule and apply them in your application. For more information on using the Skin rule, see How to create a Skin rule and define Style Presets.

Suggested Approach

The Skin rule contains three tab formats: Standard, Sub, and Repeating. You can modify these formats, specifying text, border, and background values for the tab header and border, background, and padding values for the tab body.

In addition, you can create custom tab formats in the Skin rule. You can also create custom formats for grids, smart layouts, buttons, and links in the Skin rule. Styling these elements and formats within the Skin rule, rather than in the application itself, maximizes re-use and minimizes maintenance. A change in the Skin rule cascades throughout the application automatically.

This article describes how to create custom tab formats in the Skin rule and apply them to section tabs in your application.

  1. Create custom tab formats in the Skin rule
  2. Apply the custom tab format to the layout

To interact with a sample, select Pega Button >  Pega Button User Interface  > UI Gallery UI Gallery, and select Tab in the Container group.

Creating custom tab formats in the Skin rule

  1. Open the appropriate application Skin rule. Select  Pega Button > Pega Button User Interface > UI Gallery Skins and Portals to view all the portals used by and defined in the current application, as well as their associated skins. Click the Skin name in the Portal tab, or double-click the Skin name in the Skins tab to open the skin.
  2. On the Styles tab of the Skin rule, select Layouts >Tabs.
  3. Click Add Link to add a new custom tab format.
    Add
  4. A text input box displays. Type the custom style name using only alpha-numeric characters (a-z and 0-9) and spaces. The style name cannot begin with a number. The style name that you enter is converted into the name CSS class/classes.
    Custom format name
    You can delete tab formats that you create; click Delete. You cannot delete the three standard tab formats: Standard, Sub, and Repeating.
  5. Specify the values for the new custom format, using Style Presets when appropriate. A style preset is a style that you set in a single location and then apply to multiple elements in the skin rule. In this example, the background of the active tab header is dark gray, the text is white, and the border is blue. Inactive tab header text is black and the background and border are determined by the Standard Inactive Style Preset.
    Custom format values
  6. Save the skin rule.
  7. In the toolbar, click RunRunto preview the skin.
  8. In the Skin Preview, click Tabs, and then click Custom Tab Styles.
  9. Select the custom tab style you want to preview, in this case, Top Navigation.
    Preview custom tab format

back to top

Applying a custom tab format to a layout

Make sure your application is using the Skin containing the custom tab format.

You can run an application in a skin by referencing the skin rule in the Run process in group of the General Preferences in the Designer Studio. The skin you reference in General Preferences is used when running flows, creating work objects and testing and previewing the application. It overrides a skin specified in the portal.
Preferences

To apply a custom tab format to a layout:

  1. Open the section in which you want to add a tab group that uses the custom tab format.
  2. Add a tab group to the layout.
    Add Tab group Add Tab group
  3. Click magnifying glass to open the Tab Group panel.
    magnifying glass
  4. Select Other as the Format and type the name of the custom tab format that you want to use in the Style field, in this case, Top Navigation.
    Custom format name
  5. The tab layout reflects the custom format:
    Custom tab formats in layout
  6. Save the rule.

back to top

Additional Information

You can create custom formats for grids, smart layouts, buttons, and links in the Skin rule. See the Developer Help for details.

How to add tabbed header layouts to sections or harnesses

How to create a Skin rule and define Style Presets

How to include a property value in a layout tab

How to use the Skin rule to modify the appearance of your application

Published August 15, 2012 — Updated February 17, 2016


100% found this useful

Have a question? Get answers now.

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