Table of Contents

Article

User Interface features in PRPC 6.3

New features and enhancements make it easier than ever to build and brand dynamic and intuitive user interfaces.

Dynamic Containers

Auto-generated Dynamic Containers support the runtime presentation of work items and worklists in composite portals. You can use containers to present dynamic content in:

  • a single document: the content of the container is replaced with each new work item; no new tabs are created
  • multiple documents in a tab group: each new work item is rendered in a separate tab which is created at runtime. You can specify the maximum number of tabs configured in the tab group. See the Case Manager portal for an example.

Dynamic Containers provide functionality similar to the Work Area control, but are easier to configure, offer greater flexibility, and provide better performance.

Dynamic Container

Tabs

Navigation buttons enable users to scroll through open tabs and access a drop-down menu of all open tabs.

Tab navigation and menu

You can also create multiple tab formats in the Skin rule and apply them in your application. For example, you could create a tab format called Top Navigation in the Skin rule.

Add a tab format

You can then apply this custom tab format to tab groups in your application. See How to add custom tab formats to your application skin.
Apply a custom tab format

Up-to-date Property Values

In PRPC 6.3, the user interface is even more responsive to changes in property values. The UI can update whenever a property value changes — regardless of whether that change is the result of a user interaction, or a server side update triggered by a declare expression, a data transform or an activity.

Every interaction between the client and the server now automatically checks for updates to the values of properties displayed in the UI and reflects those changes. There is no special configuration required for this behavior. Any time there is a post from the client to the server, server side changes are automatically updated on the client.

Client Expressions (Visible When, Refresh When, Disabled Conditions), grid and control actions, and buttons, icons, and links use up-to-date property values. Links, buttons, and icons can now display information and navigate to targets based on user interaction after the UI is rendered. For example, you can change the Link target, after the UI is rendered, by changing the property value that is bound to the link as its target. When the value of the property changes, the link is automatically updated to reflect that change.

See Automatically updating the UI to reflect clipboard changes.

Apply Conditions

Using the Apply Conditions keyboard event, you can evaluate conditions, such as Refresh When or Visible When, on the client as the user types, displaying and refreshing sections dynamically. For example, you might configure a Search text input field to apply conditions as the user types and dynamically display a results section, visible only when the search input text field is not blank.

Apply Conditions

Change Events

You can configure Change Events for auto-generated controls in the same way that you configure other UI Events, such as Click events. Change Events now support Post Value, Refresh Section, Set Value, and Set Focus. You can configure multiple actions on a Change Event, for example, refresh a section, immediately followed by setting focus to a control in that section.

Change Event

Grids

PRPC 6.3 provides new ways to present and interact with repeating grids.

  • Grids now support nested pages as a data source.
  • Grids can display filtered data from a report definition upon initial load when a parameterized Report Definition is bound to a grid.
    Report Definition Parameters
  • Users can view the details of grid rows in single or multiple expanded panes by clicking either:
    • an icon in the expand/collapse column on the left, or 
      Expand/Collapse column
    • a custom icon or link that you locate anywhere in the repeating grid
      Custom icon

See How to display row details in expanded panes in a repeating grid.

Multiple Panes Expanded

  • You can set focus to a grid row from within or outside of the grid. For example, you can configure a Click action on a button to set focus to the first row of a grid.
    Set Focus
  • You can configure actions based on keyboard events, enabling users to use the keyboard to navigate and open items within grids and tree grids. 
    Keyboard Events
  • Grids, trees, and tree grids each have their own default actions, accessible in a template rule that you can copy and customize. This enables you to provide quick and easy access to common grid interactions, such as Add, Edit, and Delete.
    Grid at runtime Tree Grid layout in Designer Studio
    Add/Delete Item in Grid Tree Grid default actions
  • You can set styles in the Skin rule that enable users to easily distinguish between a selected row and a row that has focus.
    Focus and Selection

Overlays

You can configure buttons, icons, links, and text input controls to launch local actions in an overlay — a panel that overlays the current window. Overlays can display lists, charts, and reports. Users can set and change values in an overlay. Overlays do not require user input — the user can dismiss an overlay by clicking outside the overlay area or through an explicit Display>Close action, configured in the local action.

For example, this list of colleges, from which the user can select, displays in an overlay. See How to allow users to pick a value from a list in an overlay pop-up.

Sample overlay

Skin rules

Use the enhanced Skin rule to brand your application, auto-generating the CSS style parameters that define the appearance and behavior of user forms, reports, and portals. See How to use the Skin rule to style your application user interface.

Within the Skin rule, you can specify a group of settings that form a style, called a Style Preset. After you define a Style Preset, multiple elements and components within the skin can reference the Style Preset to define their appearance. Using Style Presets ensures consistency across your user interface, maximizes re-use, and minimizes future maintenance. A change to a Style Preset cascades throughout all elements in the Skin rule that reference the Style Preset. See How to use the Skin rule to modify the appearance of your application.
Style Presets

You can define styles for standard formats in the Skin rule, such as headers, or create custom formats for grids, tabs, smartlayouts, buttons, and links. See How to add custom tab formats to your application skin. You can also create custom styles in the skin rule and attach additional style sheets, if necessary.

Header

The Skin rule replaces the Branding wizard. Existing skins created using the Branding wizard are automatically upgraded to use the Skin rule. 

Support of Mobile Devices

The Pega Mobile add-on product allows users of your PRPC applications to create, update, and resolve work from a mobile device, including Apple's iPhone and iPad devices as well as devices based on Google's Android operating system. Pega Mobile allows users to operate the same application from a traditional (workstation) browser and from the mobile device.

These and other PDN articles describe Pega Mobile capabilities and development approach:

About Pega Mobile
Pega Mobile - Matrix of supported browsers and devices
Guardrails for developing mobile applications 
Configuring the color scheme of your Pega Mobile application

Deferred Load

You can now specify an activity to retrieve information for a section configured with Defer Load. This enables you to execute an activity, call external services, or retrieve external data without preventing the rest of the page from loading.

 Retrieve Activity on Defer Loaded section

< back to all 6.3 announcements

Published August 15, 2012 — Updated February 19, 2016

Have a question? Get answers now.

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