Understanding UI Capabilities in Pega Platform 8.6
While your existing applications remain unaffected upon upgrade, Pega Platform™ 8.6 provides early adopters the choice of our new UI technology stack as well as enhancements to our current UI technology stack. Review this document to understand UI offerings in 8.6 and guidance on what is appropriate for your application at this time.
- About Pega’s UI capabilities
- Cosmos React UI for early adopters
- Choosing between Cosmos React UI and Theme Cosmos with Section-based UI
- Hybrid mode: Blend Cosmos React UI features into existing Theme Cosmos applications
- Configuring on-premises deployments for Cosmos React UI and Hybrid mode
- Learning more
1. About Pega’s UI capabilities
Pega Platform 8.6 offers the following architectures:
Theme Cosmos
Built with the classic section-based UI architecture and offering full case management capabilities since Pega Platform 8.3, Theme Cosmos is mature, reliable, and is the default and recommended architecture for most new applications in 8.6.Cosmos React (early adopter)
Offered in early adopter mode, Cosmos React is a new and modernized UI technology stack built with ReactJS and a client-side orchestration layer. Currently offering a limited feature set. Review current limitations below to help you decide whether to deploy it to production with 8.6.
Both architectures offer an implementation of Pega’s Cosmos design system.
Hybrid mode allows blending of the two technologies by running select Cosmos React UI assets within existing section-based UI with Theme Cosmos (UI Kit is not supported).
Explore this document to understand which of these architectures are appropriate for your applications.
2. Cosmos React UI for early adopters
Cosmos React UI is designed to offer the following capabilities:
- Faster performance
- Improved accessibility,
- A modern UI technology stack with technologies including ES6, Redux, ReactJS, and V2 of the DX-API
- Simple authoring and upgrades
- Improved interaction behavior and UI modelling constructs
- Semantic URLs
However, Cosmos React UI currently prioritizes known usage patterns and high-priority use cases and configurations. As described in the following sections, many capabilities are not yet available in 8.6.
3. Choosing between Cosmos React UI and Theme Cosmos with Section-based UI
| Recommendation for 8.6 | |||
| Cosmos React UI | Theme Cosmos with Section-based UI | ||
| New applications | |||
| New applications that require capabilities NOT supported in Cosmos React UI for 8.6. See sections 3.1 and 3.2. | ✅ | ||
| New, simple applications that do not require unsupported features of Cosmos React UI in 8.6 and can be enhanced incrementally as the new Cosmos React UI evolves. See sections 3.1 and 3.2. | ✅ | ||
| Existing and built-on applications | |||
| Applications “built on” other section-based UI applications or Pega Customer Service or Sales Automation stack | ✅ | ||
| Surfacing Pega UI within other web applications | |||
| Web self-service (Mashup) | ✅ | ||
| Mobile | |||
| Mobile web (browser running on mobile device) | ✅ | ||
| Mobile app (native) | ✅ | ||
| Mobile app (native) offline capabilities | ✅ | ||
| Accessibility and localization | |||
| Accessibility | ✅ | ✅ | |
| Localization | (US English only for Pega Platform 8.6) | ✅ | |
| Reporting | |||
| Simple reporting and data exploration needs | ✅ | ✅ | |
| Complex reporting needs with sub-reports, and joins | ✅ | ||
| Applications with UI that uses data from reports that leverage complex joins | ✅ | ||
| Authorization and authentication | |||
| Attribute-based access controls (ABAC) | ✅ | ||
| OAuth 2.0 authentication schemes | ✅ | ✅ | |
| Deployment configuration changes for on-premises environments | |||
| Deployment of the Constellation static content server | ✅ (See section 6) | ||
3.1. General capabilities of Cosmos React UI for Pega Platform 8.6
The following list includes general, high-level capabilities. If a capability is not listed, assume it is not supported for Cosmos React in 8.6.
Persona-specific portals
Landing pages (lists views, tabbed and standard layout-based)
Out of the box widgets for worklist and Pulse
Case lifecycle with stages and steps
Optional actions and processes
Back-to-back assignments and multi-step forms
Approval/rejection flow
Alternative stages
Optional actions and processes
Questionnaire support
Automation support
Attachments
Case History
Case Followers
Sub-case support
Open cases from landing pages and other case references
Open assignments from worklist, workbaskets, and to-do lists
Forms with input fields, and relationships between cases and data objects, and the user (operator)
Form validations, stage entry validations
Client-side expressions and when rule-based expressions
Server-side declaratives
Initial set of collaboration capabilities via Pulse
Advanced search result functionality
3.1.1. Data visualization capabilities supported in Cosmos React for Pega Platform 8.6
The following list includes visualization capabilities. If a capability is not listed, assume it is not supported for Cosmos React in 8.6.
Filter
Advanced filter
Sort
Grouping (Tables) / Dimensions (Charts)
Legend
Tooltip
Drilldown
Export to Excel (table insights)
Visibility (Private, Shared, Public)
Dual Axis charting
Combo Charts
3.2. Capabilities not supported in Cosmos React for Pega Platform 8.6
The following list provides a non-exhaustive list of currently unsupported capabilities:
General:
Localization
Building implementation layer on top of Pega CRM and industry apps
Web mashup
Mobile (mobile web, native, and native offline)
User-configurable dashboards
Notification channels (publish / subscribe)
Multi-channel features, including email and chat integration
Rule delegation
Property-level attribute-based access control (ABAC)
Reports and report browser (use the data explorer and Insights instead)
Paragraph rule
Custom action sets
Designing and building custom layouts or components
Exporting tabular data to Excel
Development branching
Case management:
“Search duplicate cases”, “Generate PDF” and “Generate document” automations
Adjust SLA action
Field-level auditing
Specifying category for attachments
Geolocation tracking
Tagging
Stakeholders widget
Related cases widget
Team widget
Work queue / work basket widget
Questionnaire:
Some question types (Slider, Checklist, Multi textbox, Build a list, Radio button matrix)
Composing question text with Rich Text options (piping a response to next question, dynamic values in info text)
Collaboration:
Private messaging in Pulse
Documents
Spaces
When building new applications, use the New Application wizard in Dev Studio to choose Theme Cosmos and Cosmos React (early adopter).
3.3. Data visualization and reporting capabilities in Theme Cosmos and Cosmos React for Pega Platform 8.6
The following table provides a list of currently supported capabilities in data visualization and reporting in Pega Platform 8.6. For more information, see the Reporting documentation.
| Supported in Theme Cosmos (Section-based UI) in Pega Platform 8.6 | Supported in Cosmos React (early adopter) in Pega Platform 8.6 | ||
| Chart Control | Data Visualization Control (DEV Studio) | ||
Single Axis Combo Chart (Cluster, Stack) | ✅ |
|
| ✅ |
Dual Axis Combo Chart (Cluster, Stack) | ✅ |
|
| ✅ |
Area (Overlaid, Stack, 100%) | ✅ | ✅ |
| ✅ |
Funnel | ✅ |
|
|
|
Pyramid | ✅ |
|
|
|
Bubble | ✅ |
| ✅ | ✅ |
Pie (Normal, Exploded, Donut) | ✅ | ✅ |
| ✅ |
Bar (3 types) | ✅ | ✅ |
| ✅ |
Column (3 types) | ✅ | ✅ |
| ✅ |
Line | ✅ | ✅ |
| ✅ |
Spark (Line, Column) | ✅ |
|
|
|
Gauge – 270 Arch | ✅ | ✅ |
|
|
Gauge – Speedometer | ✅ | ✅ |
|
|
Gauge – Half-Dial | ✅ | ✅ |
| ✅ |
Gauge – Half Arch | ✅ | ✅ |
|
|
Gauge – Dial | ✅ | ✅ |
|
|
Gauge – Linear | ✅ |
|
|
|
Gauge – Horizontal LED | ✅ |
|
|
|
Gauge – Vertical LED | ✅ |
|
|
|
Gauge – Cylinder | ✅ |
|
|
|
Gauge – Thermometer | ✅ |
|
|
|
Gauge – Progress |
| ✅ |
|
|
Map | ✅ |
|
|
|
Pareto Chart |
|
|
| ✅ |
Scatterplot |
|
| ✅ |
|
Double Donut |
|
| ✅ |
|
Radar Chart |
|
| ✅ |
|
Bullet Chart |
|
| ✅ |
|
Concentric Circles |
|
| ✅ |
|
Simple Value |
|
|
| ✅ |
4. Hybrid mode: Blend Cosmos React UI features into existing Theme Cosmos applications
Hybrid mode blends, or embeds, certain Cosmos React UI capabilities into your existing application based on Theme Cosmos with section-based UI.
The advantage of the hybrid is that it allows you to incrementally update your existing application in smaller chunks, taking advantage of the enhanced speed and user experience of certain Cosmos React UI capabilities.
The following Cosmos React UI capabilities are supported in hybrid mode:
Tables
Hybrid mode offers enhanced performance for rendering, sorting, filtering, and grouping tabular data. Specifically:
Tables on landing pages
Landing pages are top-level pages with lists of data, often in tabular format. When you create landing pages with App Studio, the runtime will embed the table from Cosmos React UI. (Since 8.5)
Tables inside case pages
Developers replace the traditional Table layout with a new pxListView rule, specifying the data source, displayed columns, and other table personalization features that you can enable. (New in 8.6)
Explore Data page
The Explore Data table for impromptu data exploration. (Since 8.5)
For more information, see Enhance the user experience with new Cosmos React tables (8.6).
Full case view
If you use App Studio to build new case types in existing applications, the end-user experience renders the full case view from Cosmos React UI’s implementation.
5. Configuring on-premises deployments for Cosmos React UI and hybrid mode
On-premises deployments of applications built with the Cosmos React UI or hybrid architecture require a configuration of the Constellation Service. Refer to the following guide:
The Constellation Service is already configured for cloud-based deployments.
6. Learning more
To learn more and to stay up to date with Pega’s user experience capabilities, visit Pega User Experience.