User Interface Modernization
+
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 Controls | Modern Replacement |
PromptSelect, DynamicSelect | pxDropdown |
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 |
Previous topic Internet Application Composer (IAC)