About the Application Skin wizard

As of V5.5, you can build composite portals that reference panel sets using harness rules and section rules. Unlike traditional user portals, which used special HTML rules in a pre-defined structure, you can configure composite portals in a variety of layouts. These portals are supported by Internet Explorer 6/7 and Mozilla Firefox 2+ browsers. The expanded capabilities of the wizard are designed to take advantage of this flexible approach to UI design.

To present composite harness, section, and flow action rules that resemble what users will see at runtime, select Edit > Preferences > General Preferences and update the Skin field in the Run Process Group of your own Developer portal preferences to identify this skin. See Developer Portal basics — Setting Preferences.

You can also use the wizard to develop skins for traditional portals. Steps 8A through 8D contain additional design elements that apply to traditional portals only.

You can reapply the Application Skin wizard to the skin rule that it created in an earlier run to make adjustments as often as needed.

Colors and fonts

Choose colors and fonts in advance. Using any graphics program, identify the RGB Hex code for the colors you plan to use. Choose only fonts that are present on both your own workstation and on all application users' workstations.

Use only a limited number of colors and fonts. The colorful examples in this Help System are designed to highlight the impact of specific styles and elements and do not represent good design.

Images

If your portals include custom images for headers, tabs, or workspace backgrounds, create the image files with any graphics program. Process Commander associates graphics images with binary file rules. Upload each image into a binary file rules in your application RuleSet.

When you create a binary file rule for use with the the Application Skin wizard, set the App Name to webwb. On the Main tab, set the Relative Path to images. Valid file types are GIF, JPG, and PNG.

After you have created these binary file rules, you can select them for use as background images or logos from within the wizard. Clicking the magnifying glass icon ( ) to the right of an image field opens the Image Catalog. Only images belonging to RuleSet versions in your application appear.

When you select an image, the appropriate height and width fields (if any) auto-populate with that image's dimensions. There are no size limitations for images. You cannot change the height or width of an image itself using the wizard — only the height and width of the container in which it is displayed such as the left and right sections of tabs.

Verify that all rules that you are modifying, including the skin, style sheet, and portal are checked in.

Select Application > New > Skin. The wizard presents this series of steps in the navigation panel:

• Step 1 identifies the name and RuleSet version of the skin rule and other associated rules to be created.
• Step 2 displays the Quick Create feature enabling you to, in one step, create default fonts, and the main and accent colors for your portals, work forms, and reports. You can also add a top header logo for traditional portals.
• Step 3 defines general appearance of most UI elements including background, fonts, and links. It also defines the appearance of the panels built into a harness rules (used for composite portal types), and enables you to add custom styles.
• Steps 4A through 4E define the appearance of smart and custom layouts, as well as bar, tab, accordion, and repeating (tab, row, and column) layouts.
• Steps 5A and 5B define the appearance of menus and grids.
• Steps 6A through 6C define the appearance of labels, buttons, and error sections.
• Steps 7A and 7B define report components including title bars, columns, and headers.
• Steps 8A through 8D define the appearance of UI elements that are unique to traditional (non-composite) user portal rules.

Navigation

You can open any step without proceeding through them sequentially. Click directly on a step in the navigation panel to open its screen. A check  mark appears next to the step when you go to another step. Alternatively, use the Next >> and << Back buttons to navigate.

Some steps contain a set of collapsed sections. You can expand them all by selecting the expand button () at the top- right corner of the wizard screen.

As you work with the wizard, click Preview to open in a new window a rendering of most UI elements as configured so far. By default, they are displayed individually as used in composite portals, work forms, or reports.

Some elements do not display in preview mode. In those cases, save the skin to a composite-type portal and open the section to review the changes (specify the skin in the Developer's portal preferences section).

To view the rendering on a standard Pega portal, open a separate window by clicking Preview Traditional Portal in the preview window.

Creating an application skin

When you save your work for the first time by clicking Finish or Save, the wizard creates a skin rule and six CSS text files referenced by the skin. Optionally, two traditional portal rules (WorkUser and WorkManager) are copied into your application and are associated with the skin. Once saved, you can re-open a skin in the wizard at any time to modify it. The Application Skin wizard does not create a work object for processing and resolution.

After you complete your work and deploy the skin, confirm that the RuleSet containing the new skin rule appears in the RuleSet list of application users who are to use the new portals. If the skin is created in a new RuleSet, verify that the portal rule using the skin is specified in the user access group. Have application users test the resulting portals to ensure that all clickable elements and other important information are easily located.