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.
Tabs
Navigation buttons enable users to scroll through open tabs and access a drop-down menu of all open tabs.
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.
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.
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.
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.
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.
- 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
- a custom icon or link that you locate anywhere in the repeating grid
- an icon in the expand/collapse column on the left, or
See How to display row details in expanded panes in a repeating grid.
- 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.
- You can configure actions based on keyboard events, enabling users to use the keyboard to navigate and open items within grids and tree grids.
- 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 - You can set styles in the Skin rule that enable users to easily distinguish between a selected row and a row that has focus.
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.
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.
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.
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.