Table of Contents

Article

Introducing PegaRULES Process Commander 6.2 - User Interface

PRPC 6.2 includes numerous enhancements that respond to customer requests for more dynamic interactions, support for rapid entry by end-users, and greater control over the look-and-feel. These enhancements help you build rich, productive user interfaces for your applications, while staying within guardrails of good practice. See also Webinar Archive: PRPC 6.2 User Interface (September 20, 2011).

UI Gallery

UI Gallery

The UI Gallery provides working examples of PRPC 6.1 and 6.2 controls, repeating layouts, and dynamic user interface. You can interact with each feature to sample the user experience, view the underlying configuration, and copy the configuration rules into your own applications. These examples are localizable, auto-generated, and guardrail compliant. To access the gallery, select Pega Button> User Interface > UI Gallery in Designer Studio. See Introducing the User Interface Gallery of examples.

Here is the Tree Grid example:

Tree Grid

By clicking the open link at the top of the form, you can quickly see how example are configured:

UI Events

User Interface-related events are updates to the user form that occur when:

  • The user performs an action. For example, display a modal dialog when the user clicks a button.
  • The system detects updates to properties or their values. For example, refresh a section when a specific property changes (Refresh When .Property Changes), or display a grid when a property equals a specific value (Visible When .State=MA).

The 6.2 enhancements to event interactions make the overall experience more consistent, coherent, and complete.

Fewer steps to configure user interface events — Configuration of highly interactive forms that incorporate user interface events (formerly known as client events) requires fewer steps.

Previously, for example, if you wanted to display a section when a property value exceeded a specific value you had to:

  1. Enter the condition (such as Visible When .LoanAmount > 10000) in the property's panel.
  2. Go to the control that references the property and set an Apply Condition client event in the Client Event Editor.

Now, you simply enter the condition in the Condition Builder and system make the updates based on the type of control and the action taken.

Simpler condition authoring — The Condition Builder editing tool makes it easy to define valid comparative expressions, and to combine them with when condition rules.

Greater section refresh capabilities — The Condition Builder includes a Changes keyword that refreshes a section when a specified property value changes anywhere on the harness.

Trigger events in repeating layouts — The Condition Builder provides an AddDelete keyword so that declarative rules are triggered when rows or columns are added or removed. For example, you can use this feature to update the sum of rows when the user edits the list. You can also trigger declarative rules in rows that contain dependent properties, making it possible to update summarized calculations, such as the grand total shown at the bottom of a shopping cart.

Immediately post property values to clipboard — A Post Value option in the Client Event editor enables you to immediately post to the clipboard property values that support pre-processing activities.

To see these features in action, see the Dynamic UI category in the UI Gallery.

Controls

More auto-generated controls — Introduced in 6.1 SP2, and formerly known as HTML Property rules, auto-generated control rules provide a wider array of configuration options, greater design flexibility, browser-independence, better performance, and localization benefits when compared to older control rules. They remain available and supported, but developers are encouraged to use the new controls in new development. These 6.2 controls are notable:

  • pxDateTime —This control replaces 23 non-auto-generated date and time controls. The new control is fully localizable and provides better performance. It offers four modes: typed input with calendar, calendar only, drop-down with calendar, and drop-downs only. Read-only formats include timeframe (for instance, 2 days, 3 hours ago), and date only (no time).
  • pxIcon and pxLink — Like the pxButton on-click control, these elements can invoke more than 40 possible actions.
    Pre-configured pxIcon controls eliminate the need to specify each control's image and action. This control supports the use of three-part sprites (small images in a single binary file) that indicate when a control's condition changes (active, inactive, disabled). Sprites reduce server requests and speed response time.
  • pxCheckbox — A checkbox that supports specifying a caption in addition to the label field. The caption text appears next to the checkbox and is clickable.
  • pxHidden — Used to set a read-only property value that is not visible to the user under any condition. This control is useful for triggering user interface events.

More clickable actions — A larger and uniform set of actions are available from buttons, links, and icons. Notable among them are:

  • Refresh — Refresh the section containing the control, or another section that you specify. You can also specify a data transform rule, a pre-activity, or both, to modify the content of the refreshed section.
  • Set Value — Set the property value in field. You can set one or more property values at once, either to trigger events or to automatically populate other controls in the form.
  • Menu — Displays the contents of a navigation rule as a menu. The top-level menu appears below the control. Second and lower levels expand to the right.
  • Perform Action — For non-HTML flow actions, submits the action and completes the assignment.

Property rules have default controls — When you create a new Single Value, Value List or Value Group property of type Text, Identifier, Password, Integer, Double or Decimal, the Control field defaults to an appropriate auto-generated control.

Auto-generated controls support calculated values — There's no need to set parameters, such as Calculated Value, to an auto-generated control that is the target of a Declare Expression rule. At runtime, the system automatically renders values in read-only format.

To see these features in action, see the Controls category in the UI Gallery.

Repeating Layouts

Tree Grids support summary-type report definitions — The report definition columns that contain counts appear on the right side of the grid; the other columns are combined into the tree on the left.The system automatically adds a grand total row, which you can style in the Branding wizard.

View flow actions in an expanded pane — Users updating data in a Grid can click a row to access flow action details in an expanded pane. In certain contexts, this is a useful alternative to the modal dialog.

Filter the layout results — Column filters in Grids and Tree Grids enable users to display only rows that match unique values in a column, or specify ad hoc filters based on property types; for example, text strings for text types, date ranges for date types, or boolean expressions for numeric types.

A "No Results" message appears if your filter criteria produce no rows.

Locking used in Trees and Grids — Items edited in these layouts are now locked using the same rules used in the Perform harness. Any active item derived from Work- or Assign- takes out a lock in the modal dialog, expand pane, and embedded pane edit modes.

To see these features in action, see the Repeating Layouts category in the UI Gallery.

Branding

Branding wizard and recommended skin— The Branding wizard provides more complete branding of all the visible elements of your application.

  • A standard skin EndUser62 is available and is recommended for applications created in 6.2, or as a starting point for your own application's skin.
  • You can customize form and field-level error messages. See How to apply styles to user form error messages using the Branding wizard.
  • Three out-of-the-box style choices (known as Standard, Simple, Strong), can be applied to buttons and links. You can redefine them to suit your requirements, or use the Custom option to create any number of your own styles.

Button Styles

  • You can now apply bolding to all headings and tab labels. There are more choices for font size, including an option for entering a freeform value.
  • A new setting enables you to differentiate field labels from other on-screen text.
  • You can set the left, right, and center alignment for Tree and Grid headers.

Improved Performance

  • A new Defer Load option in section rules enables you to delay rendering the section on the user's screen until other layouts or sections have been displayed. This feature enables users to immediately start using the form rather than waiting for all the sections to load. Defer Load can dramatically improve the "perceived performance" of a Process Commander web application.
  • Client response time has been accelerated due to optimized scripts, reduced markup, reduced onload JavaScript processing, CSS and panel set optimizations, and other modifications.

Other Improvements

  • The user can click anywhere on a header to expand or collapse a section.
  • A option on the harness rule lets you hide all default container icons in one step rather than having to delete them individually.
  • The work area control contains a new height setting so that the area expands to fill the available space regardless of the content’s height. This feature prevents the compression of modal dialogs when there's little content on the page. You can also insert icons in work area tabs. This helps users can easily identify the area's purpose even when it's overlayed by other tabs.

Published August 1, 2011 — Updated October 9, 2015


100% found this useful

Have a question? Get answers now.

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