About the Branding wizard

You can build composite portals that reference panel sets using harness rules and section rules. Unlike traditional ('fixed') user portals, which used special HTML rules in a pre-defined structure, you can configure composite portals in a variety of layouts. 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 Preferences from the Profile menu. In the General group, update the Skin field in the Run Process Group to identify this skin. See Designer Studio basics — Setting your preferences.

You can also use the wizard to develop skins for traditional portals. Go to Step 4: Styles and Formats — Traditional Portals, which contains design elements that apply to traditional portals only.

You can reapply the Branding 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. The wizard provides a Color Picker control to quickly preview, define, or select colors.

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 Branding 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 (a pop-up version of the Image Gallery landing page). 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. No size limitations are enforced for images. You cannot change the height or width of an image 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.

To start the wizard:

In the Designer Studio:	Select > User Interface > Tools > Branding Wizard.BYRNB 2/22/10 Select > User Interface > User Screens. Under the Skin column, hover your cursor to the right of any skin rule, and click the pencil icon . pashm 4/5/10
In the Business Analyst portal:	Select > User Interface > Branding Wizard.KOWAL 8/13/10

The wizard presents this series of steps in the navigation panel:

• Step 1: Name and Location identifies the name and RuleSet version of the skin rule and other associated rules to be created or modified.
• Step 2: Quick Create lets you, in one step, create default fonts, and the main and accent colors for your portals, work forms, and reports.
• Step 3: Smart Layouts lets you define layout templates and minimum screen widths.
• Step 4: Styles and Formats lets you design a wide array of portal UI elements or modify default Quick Create settings where needed. These elements include the the panels built into a harness rules (used for composite portal types), menus, grids, wizards, error sections, SmartInfo pop-up windows, smart and custom layouts, bars, tabs, accordions, repeating layouts, and report components. You can also define the appearance of UI elements that are unique to traditional (non-composite) user portal rules.
• Step 5: Customlets you manually configure CSS files for custom designs.

When you have finished your design session, the wizard displays a Completion form that provides access to the skin, CSS text file, and traditional portal (optional) rules created or modified by the Branding wizard.

Navigation

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

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 traditional (non-composite) 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 Branding 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.

Creating circumstanced skins

You can create circumstanced instances of a skin rule. This reduces the cost of maintaining large number of skins that will be conditionalized at user sites. For example, assume that you are using the Internet Application Composer (IAC) to embed a Process Commander application within a portal that is custom branded for each of your 100 customers. At each site, many of those portals must be branded according to access role, business unit, application, and so on. Circumstancing obviates the need to create multiple portal records and manually map them to skin instances. During runtime, the correct skin is applied to the portal according to the circumstance conditions.

When you create a circumstanced skin, the system copies the base rule's text files and gives them unique names. You can use the wizard to modify the styles for each instance. v6.1 proj-242 grp-5980