Table of Contents

Article

How to use the Branding wizard to apply styles to user-form error messages

You can use the Branding wizard to change the way your application displays form-level and field-level error messages in user forms.

This article describes 6.2 features. For information about working with the 6.3 Skin rule, see How to use the Skin rule to style your application user interface.

To learn how to create custom error sections in 6.2+, see How to create a custom error section in user forms (V6.2). For 5.X, see How to customize the presentation of errors on work object forms.

Suggested Approach

The Branding wizard enables you to modify the default text, background, and icon styles used in standard form-level and field-level error messages. The following example shows you how to modify the message styles to suit your requirements.

Do the following:

  1. Open the harness you want to customize.
  2. On the Display Options tab, select Top of Harness in the Display Form-Level Errors drop-down list. This option displays the message at the top of the form. You can also select Default to display the error at both the top and bottom of the form.
  3. Select the Always show form level errors checkbox. This displays the error section that includes the field-level error (incorrect Customer ID value). When unchecked, the area only appears for page-level messages. Selecting the option shows field-level messages as well.
  4. Select As Full Error Text in the Display Field-Level Errors drop-down list. 
  5. Save the harness and run the process to display the default error messages.
  1. To customize the presentation, open the Branding wizard from > User Interface > Branding Wizard.
  2. In the Name and Location panel, select modify an existing skin and an unlocked version of the skin you want to modify. Make sure that this skin is selected in your General Preferences dialog so that you can view your modifications during testing.
  3. Navigate to the Styles and Formats panel. Select Special Category > Errors Element.

Modify the form-level message

Do the following:

  1. In the Error Section area, modify the text, border, background, and message colors as shown below.
  2. In the Symbol field, use the Image Catalog ( ) to replace the default Message image (Disc) with a new image( ).
  3. Click Save in the wizard to update the skin's CSS files and keep the skin open for modification.
  4. Run your process. Here are the results:
  5. Collapse the section to display the standard message text.

Modify the field-level messages

Return to the Branding wizard and modify the field-level message styles as follows:

  1. In the Labels area, change to orange the text color of the label next to the field containing the error.
  2. In the Fields area, replace the Icon with a new image () in the Location field.
  3. Change to green the colors of the field border and the message text.
  4. Click Save and run the process. Here are the orange label text, and green message and border settings in the As Full Error Text display. 
  5. In the harness, select As Image with Tooltip in the Display Field-Level Errors drop-down list on the Display Options tab.
  6. Save the harness and run the process to view the new icon.

Tags:

Published September 20, 2011 — Updated September 21, 2011

Have a question? Get answers now.

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