Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

User Interface Modernization

Updated on October 8, 2023

+

This content applies to On-premises, Client-managed cloud and Pega Cloud environments

If your application was built on a version of Pega Platform prior to 7.x, the application may require a significant amount of work on the User Interface (UI).  This is especially true if the application received only tolerance level updates.  Multiple areas of the UI might require modernization.  

UI modernization improves responsiveness, page rendering, and compatibility with multiple client device types.

ActiveX / Custom Objects   

ActiveX was deprecated by Microsoft in 2013 and is no longer supported by the Pega Platform.  Remediate any use of ActiveX and any other deprecated or unsupported client-side components.

How to identify

The rows in the report for ActiveX / Custom Objects are:  

Area:  ActiveX / Custom Objects
Sub-Area:  ActiveX / Custom Objects

How to modernize

See Microsoft Client Side End-User Technologies Support for more details.   

Custom / Deprecated Control Usage  

Deprecated Controls are no longer supported.  Although they will generally continue to work, they should be refactored or replaced.

How to identify

The rows in the report from the Pega Cloud Readiness Tool are:

Area:  Custom / Deprecated Control Usage
Sub-Area:  Deprecated HTML directives

Area: Custom / Deprecated Control Usage
Sub-Area:  Custom / Deprecated Control

How to modernize

Deprecated HTML directives: Replace these directives with Java Server Pages (JSP) or OOTB controls wherever possible.  

Custom / Deprecated Control:  Replace custom and deprecated controls with OOTB controls wherever possible.  Some specific controls are listed in the table, along with their modern equivalents.  

Deprecated User ControlsModern Replacement
PromptSelect, DynamicSelectpxDropdown  
Date, Date-Calendar, DateTime-Medium pxDateTime
Text   pxTextInput
Integer, Percentage, Scalar, FormatDecimal pxNumber
Checkbox, CheckBoxEnabled pxCheckbox  
AppCommentsTextArea, TextAreaExpanded pxTextArea
RadioButtons, RadioButtonsForLayout, RadioButtonYN  pxRadioButtons

Custom Code   

Pega has created OOTB features that can replace many of the customizations built by app developers.  Use these OOTB capabilities wherever possible.

How to identify

The rows in the report from the Pega Cloud Readiness Tool are:

Area: Custom Code   
Sub-Area:  Hand-coded Table

Area: Custom Code   
Sub-Area:  any other sub-area

How to modernize

Hand-coded Table: Replace with modern layout types available in Pega’s auto-generated UI.  

Any other sub-area:  Replace custom functionality with OOTB features and functionality in the Pega Platform.   

Custom / Fixed Portal(s) Upgrade  

Replace all traditional portals with the latest Pega portals. Modern portals provide improvements in flexibility, appearance, user interaction, and functional capabilities.

How to identify

The rows in the report from the Pega Cloud Readiness Tool are:

Area: Custom / Fixed Portal(s) Upgrade

How to modernize

Replace all custom and legacy Portal types with modern OOTB portals. Ensure that portals reference the application skin for improved maintainability and consistency.  

HTML5 / CSS3 Style Compliance   

Using HTML5 and CSS3 Styles ensures that Pega applications are compatible with modern browsers.  It ensures cross-browser and cross-platform compatibility, and that new Pega features can be leveraged.

How to identify

The rows in the report from the Pega Cloud Readiness Tool are:

Area: HTML5 / CSS3 Style Compliance
Sub-Area:  Inline Style

Area: HTML5 / CSS3 Style Compliance
Sub-Area:  Portal Other Skin

Area: HTML5 / CSS3 Style Compliance
Sub-Area:  other sub-areas

How to modernize

Inline style:  Remove inline styles and replace them with Skin formats or helper classes.  If Paragraph or Correspondence rules contain inline styles, use the source view to ensure they are not overly bloated with excessive markup and layered style tags.  This often happens when styles are copied and pasted directly from other applications.  

Portal Other Skin: Update Portals to reference the application Skin for improved maintainability and consistency.  

Other sub-areas:  Use the Skin rule to replace custom CSS. Where custom CSS is still required (such as defining custom helper classes), add it to the Skin rule (Skin > Included styles > Additional style sheets > Add style sheet)

Responsive User Interface  

Replace deprecated, non-responsive layouts and UI elements with modern alternatives. Design Templates and responsive layout types ensure flexibility and consistency across all channels and devices.

How to identify

The rows in the report from the Pega Cloud Readiness Tool are:

Area: Responsive User Interface
Sub-Area:  Deprecated Container / Panel Set

Area: Responsive User Interface
Sub-Area:  Not a Work Area Harness

Area: Responsive User Interface
Sub-Area:  Non-Responsive / Deprecated Layout

How to modernize

Deprecated Container / Panel Set:  Replace deprecated containers and panel sets with modern Screen Layouts.  

Not a Work Area Harness:  For a portal used for the work area (an inner harness), rather than for the portal as a whole (defined in Data-Portal), specify that it is a Work Area Harness.  This enables additional options on the Design tab for that harness.

       To specify a work area harness:
       From the Harness Rule, click Advanced > Harness usage, then select the Work area check box. 

Non-responsive / Deprecated Layout:  Replace deprecated layout types (freeform, Smart, etc.) with modern equivalents.  Some specific layout types are listed in the table, along with their modern equivalents.   

Deprecated Layout Type  

Modern Replacement

Smart, freeform, custom 

Dynamic Layout

Tabs, accordions 

Layout Group

Row repeat, column repeat 

Repeating Dynamic Layout

List/summary view  

Report Definition-sourced Table
Tree grid  

 

Hierarchical Table

 

 

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us