This content has been archived and is no longer being maintained.

Table of Contents

Article

Introducing PRPC 6.2 SP2 - Building UI

Design intuitive user interfaces using new features and enhancements, launching flows in modal dialogs and supporting multiple tab positions. Work faster by leveraging design-time improvements, such as copy and paste within and between sections.

 

Run a Flow in a Modal Dialog

You can run any flow in a modal dialog from any actionable UI element, for example, a Button, Link, Icon, or right-click context menu or menu bar.

When running a flow in a modal dialog, only the action section containing the flow action displays. The flow action provides the section or sections containing the form fields that the user is to complete. When the user submits the form, the system updates the work item and the modal dialog closes. The user can then continue working with the main screen display.

A modal flow runs on its own Thread, on the primary page, on current context, on a different page via “using page” concept, or on a work/non-work page. The modal dialog is automatically dismissed at the last step.

To configure your Control or navigation rule to run a flow in a modal dialog, specify the Flow in Modal Dialog action.

Launch Flow in Modal Dialog

Modal flows are useful for screen flows, which present a series of forms to the user. When the user submits the final assignment in the modal flow, its page merges into the parent flow's primary page. If the user cancels the modal dialog, none of the modal flow's data is copied to the primary page or committed to the database.

The modal dialog is a template that you can modify and brand as desired.

Sample of Flow in Modal dialog

 Multiple Tab Positions and Formatting Options

This version provides optimized markup for tabs, as well as support for multiple tab positions. Using the Tab control, you can position SmartLayouts, each with a visible tabbed header, within a Tab group. You can orient tabs across the top, bottom, right, or left of a layout and stretch the tabs across the width or height of the content. You can also refresh the tab contents whenever the tab becomes active.

Refresh

Position tabs across the top, bottom, left, or right of a layout.

Tab Positions

 

If desired, position tabs vertically and rotate the text of the Tab title.
Vertical Tabs

Stretch the tabs across the width or height of the content, if desired.

Stretch Tabs

You can specify tab styles using the Branding wizard. By default, the system automatically generates a rotated version of the image you specify for each of the four tab positions. If desired, you can specify a different image for each tab position in the Branding wizard.

Harness Buttons and Icons

In this version, harnesses use pxIcon and pxButton, giving you access to the full menu of Click actions. Existing harnesses are upgraded automatically, replacing the previous icons and buttons with the updated verisons.

Harness Buttons and Icons

Action Area Parameter for Enter key

Determine whether the Enter key submits the Flow Action using a new parameter added to the Action Area.

Cut, Copy, and Paste

Build UI rules faster using Cut, Copy, and Paste for Layouts, Section Includes, Columns, Rows, and Cells.

You can use the toolbar icons, shown below, the right-click menu, or keyboard shortcuts: Cut (CTRL + X), Copy (CTRL + C), and Paste (CTRL + V). You can change the key combinations in Keyboard Preferences.

When copying an entire layout, select Paste Above or Paste Below.

Cut, Copy, and Paste icons

Custom Styles in Smart Layouts

Smart Layouts use the Read-Write Style and Read-Only Style to apply widths and other attributes. These styles are now applied behind the scenes, enabling you to style the cells, just as you would in a Free Form layout.

Styles

Intuitive Layout Width Options

Layout width options have been renamed to reflect their functionality:

Pixels (Fit Content) To set minimum column widths within the layout during runtime. A column expands if the content exceeds its minimum width.

Fill (100%)

To have column widths measured as fractions of the total width of the layout area. The widths of the matrix columns (specified in pixels) collectively represent 100% of the whole. During runtime, a column expands if the content exceeds its minimum width.

Pixels (Fixed)

To specify the column widths within the layout exactly as the fixed column width during runtime.

Width Options

Harness Bundling

Optimize initial loading time using harness bundling. This optimizes script download time, resulting in a faster initial load and fewer round trip HTTP calls for each harness.

Harness bundle

Linked Properties

Harness, section, and flow actions in your application can display read-only values from Operator ID instances, access groups, workbaskets, work groups, and Organization instances using linked properties. For example, a user form can include the last name (pyLastName) of the create operator.

Special clipboard pages to support the display are created automatically upon first use and are cached to eliminate unnecessary database accesses.

See Use linked properties to display data from related objects.

Tags:

Published January 31, 2012 — Updated February 16, 2016

Have a question? Get answers now.

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