The second of two sessions on improved capabilities delivered in Pega Platform 8.8, focusing on user interface, user experience (including Constellation) and Insights. See here for our first session on Low code and AI for everyone.
In this session, past presenters to our community return to provide the 8.8 update on their product set:
Sam Alexander (@Sam Alexander - Principal Product Manager - Front End; UX Direction & Standards) takes us through what's new in Pega Platform 8.8 in UI, UX and Constellation in particular, including:
Pega Infinity's two UI architecture choices
Components and enefits of the Constellation UI architecture
Why you should focus on Outcome Parity more so than Feature Parity
What is new in Pega Platform 8.8 for each UI architecture option
The roadmap for UI on Pega Platform 8.9, including a proposed ability for case types implemented using either UI architecture option to co-exist within the same application.
Adam Torrey (@AdamTorrey - Senior Product Manager - Insights & Visualizations) takes us through what's new in Pega Platform 8.8 in Insights & Visualizations, including:
Explore Data personalization
End user dashboards
Primary fields as defaults
A peek into the roadmap
Paul Barnes (@barnp - Senior Director, Business Excellence - Intelligent Automation) also discusses:
Pega's updated vocabulary towards the term Constellation
Appropriate use cases for Constellation
If you missed Sam's and Adam's 8.7 updates to the CLSA Community earlier in 2022, check them out here:
Pega's 8.7 UX capabilities: a deep dive: Replay and Q&A
Here are some the key animations played back by our experts during the webinar
UI/UX: Search and Select pattern
Contrast the low-code, configuration-driven implementation of the Search and Select pattern in the Constellation UI architecture; compared with higher customization needed to implement the same pattern using Traditional UI architecture.
Traditional UI architecture
Constellation UI architecture
Search and Select pattern - Traditional UI
Search and Select pattern - Constellation UI
When outcome parity for a business need can be achieved using Constellation, you leverage Pega's prescribed, consistent design and implementation best practices through low-code configuration that is more resilient to updates.
Focus less on using the same UI components in Constellation as you would have used in the Traditional UI architecture. Focus more fulfilling the same outcome using the patterns that Constellation provides.
What's new in Constellation 8.8
Constellation 8.8 - Field groups
Maintain panel collapsed state
Constellation 8.8 - Maintain panel collapsed state
Create/Retrieve/Update/Delete (CRUD) on data objects
Constellation 8.8 - CRUD on data objects
Constellation 8.8 - Instruction text
Self service portal
Constellation 8.8 - Self service portal
Get Next Work (on a top-level page)
Constellation 8.8 - Get Next Work on a top level page
Get Next Work (on a case)
Constellation 8.8 - Get Next Work on a case
What's new in Insights 8.8
End user dashboards
Insights - End user dashboards
Improved user experience
Insights - Improved UX
Questions & Answers
UX / UI - Role of the System Architect
What is the role of the CLSA in UI/UX design in the future?
The LSA's role is to know which UI architecture is going to best position the customer for success given the customer's goals and roadmap. The LSA does not need to be an expert front-end developer but does know the capabilities and limitations of each of the Pega UI architectural approaches and feature set.
The more acquainted the LSA is with modern front-end development technology and design, the better they can have these conversations. The key thing is that LSA knows what Pega has to offer and how to help the client make the best architectural choice for their organization.
What will be the role of current Pega UI developers in future?
The Pega UI developer in Constellation configures user experiences in App Studio by assembling channels, landing pages and insights. For each of the steps in a case type workflow, a view is configured. At the View level, they focus on identifying the fields that need to be shown or captured to complete a step in the workflow; each configured to use the most appropriate component available from Constellation for the situation. Constellation also makes best practice user experience patterns available (for example, the "Search and Select" pattern as showcased in this event) for Pega UI developers to configure outcomes in their application, rather than custom-building these patterns from scratch.
In the rare case where customized components are needed that are not available from Constellation's component library, professional front-end developers can be engaged to implement these as reusable components using React and publish them to Pega Infinity. Once published, the components become available for selection in App Studio in the right context and become available to the users' browser alongside the Constellation component library.
Pega System Architects are not expected to become professional front-end React developers, and it is expected that the Constellation component library will meet the vast majority of your clients' user experience needs. Delivery teams will benefit from having access to such front-end development expertise whose involvement would likely be on-demand.
UX / UI - When to use Constellation UI or Traditional UI
Are Customer Service and Sales Automation the only applications whose new application should build on the Traditional UI, or does this also apply to other Pega applications and frameworks?
New applications building on any framework or application that has not been built from the ground up on Constellation should continue to use the Traditional UI architecture.
Is it safe to make the decision on which UI architecture to use based on the published list of Constellation limitations published?
OOTB Constellation provides a Search landing page. If I need to add new filter criteria, I could not edit the landing page. Not all the landing pages are editable?
Right now, Search is not configurable beyond what you see. Keep in mind, you can also create top-level List-based landing pages and take advantage of the table's advanced sorting/filtering/search capabilities in order to locate an object.
Can we do nested table and master detail in Constellation?
Constellation offers rich capabilities for working with tabular data including grouping, sorting and filtering.
Constellation also offers the preview panel, allowing users to preview another object (case or data object) without navigating away from a table of objects. The preview panel can show additional information about the object.
Nested table and the traditional master/detail are not in Constellation, however with a mindset of delivering the required outcomes (over resurrecting patterns unique to the Traditional UI architecture), Constellation's OOTB UX can likely achieve the required outcome.
UX / UI - Constellation
Do we have best practices for Constellation documented on Pega Docs or Pega Academy?
Watch for a comprehsive Pega Academy Mission, including exercises, in early 2023.
How does Constellation replace the Action Sets capability in the Traditional UI architecture, such as performing actions on Click or Change?
Constellation's goals include consistency of common high value patterns across the application portfolio, faster development time, less errors, and OOTB front-end and Accessibility best practices. To achieve this, many typical UX patterns developers repeatedly built with Action Sets are now offered in Constellation OOTB. Developers configure the pattern in App Studio, rather than custom-building the pattern in Dev Studio.
As an example, consider an "Add" button positioned at the top of a table:
Configured with OnClick and an Action Set in the traditional architecture, the button renders a modal to capture inputs for a new record and refreshes the table.
In Constellation, developers use App Studio to simply enable "Add new" on the table; Constellation generates everything needed to fulfil the same end to end outcome - the UX, the eventing, and the plumbing.
See also the "Search and Select pattern" videos above for another example.
For very advanced use cases, Constellation provides developers an extension point: a way to build a custom DX component. The components in Constellation's design system are available at https://design.pega.com in the event that a pattern not yet available in Constellation needs to be implemented.
For increased consistency, faster time to value, less errors, and less code maintainence, we encourage clients to leverage OOTB configurations where possible and leverage custom DX components only for advanced use cases.
I thought Pega was low-code, does Constellation have coding which developers need to learn?
We encourage clients to leverage App Studio to configure the outcomes they need.
If Constellation is stateless, then how can screen flow functionality be achieved? For instance if we need to take action on some of the items selected in previous screens?
Screen flows (aka: multi-step forms) work in Constellation just like they do in Traditional UI architecture. The stateless implications really apply to the data model.
Are we suppose to do the UX/UI designs with Summary, Activity, Utility (SUA) panels introduced recently or can we continue using the client's branding guidelines?
Will we miss out a lot in future upgrades if we do not stick to SUA panel design?
Using App Studio's branding and theming capabilities (and the presentational component's design tokens for more granular control of supported styling customizations), developers can adhere to the organization's styling and branding guidlines (font-face, rounded corners, color schems, etc).
If this question is about using an entirely different design system instead of Constellation OOTB design system, then the Constellation architecture is built to allow customers the flexibility to use their own design system using Constellation SDKs for React, Angular and Web Components. While this requires more investment compared with using pure Constellation, and you own the front-end, you're still leveraging the power of the model to build the flow, field validations, layouts, visibility conditions, etc. This still saves you time over a custom-built front-end, as you configure the workflow and UI needs once - in Pega's model - and the front-end implementation reflects the changes.
UX / UI - New features in Pega Platform 8.8
Constellation added Get Next Work in Pega Platform 8.8, but its not available in 8.7. Is there any way to achieve Get Next Work in Constellation for 8.7?
Get Next Work and the underlying API it relies on was introduced in 8.8. It is not available in 8.7.
What version is Web Embed being introduced?
Will Mashups be possible and/or discouraged going forward?
Web Embed was introduced in 8.7.
Pega Web Mashup is for embedding UI built using Traditional UI architecture;
Web Embed is for embedding UI built using Constellation UI architecture.
We continue to support both, and Pega Web Mashup remains a critical capability.
Now that the instruction text can be added through the UI model, how and where do I provide a localized version of that text?
UX / UI - Co-existence of case types using Constellation UI and Traditional UI in the same application (planned for 8.9)
In my application, can I have both UI-Kit and Constellation built-on applications?
Most of our organization layer extends UI-Kit. Now the only way I see to adopt Constellation is to create another app rule with a new name and the same set of rulesets.
As of 8.8, this is not recommended best practice. As of 8.9, we expect to communicate a clear co-existence strategy and guidance on tooling.
Would architecture co-existence work without Pega Process Fabric? Are any other dependencies expected to create an application using the co-existence architecture?
Yes, co-existence within the same app will not require Process Fabric. Co-existence is under design and development, but at this time there are no other dependencies.
In the co-existence model, can both traditional case type and Constellation case type still reuse common UI rules?
You can run the complete case built with either Traditional UI technology or Constellation UI technology in the same portal. However, you cannot intermix the lower level UI components.
For example, you can't use a traditional Button control with an Action Set inside of a View built with Constellation.
Can you have the same application render a case type A in traditional UI and case type B using Constellation? Is there a setting on the case type that allows choosing the design system?
Co-existence allows running case types built with traditional UI architecture (including UI-Kit) and case types built with Constellation in the same portal. There is not a setting on the case type for choosing the design system.
Co-existence looks promising however Isn't it confusing for end users? With different look and feel?
In terms of existing applications built with UI-Kit, the case itself will look different than the case built with Constellation. The common overall portal (that wraps everything) is intended to bring a common header and common nav, which hopefully reduces the confusion.
If the existing case type is built with Theme-Cosmos, then the experience is the same as Constellation, so the users will likely not notice a difference.
UX / UI - Custom DX components
Do custom DX components affect upgrade in anyway?
Yes. Custom DX components are code that - once deployed - needs supporting in the same way any other custom code outside of Pega needs supporting.
Are there enablement courses in Pega Academy planned for creating custom DX components in Constellation?
Custom DX components are intended to be built only by professional front-end developers as they will also need support in production, so the audience for this training is a bit different. Availability of a training course - and whether Pega Academy is the right place for it - is still under discussion.
We are soon releasing comprehensive tutorials focused on the developer experience when creating custom DX components and how to use Storybook.
Is it possible to create a new View template, or widget?
Strongly challenge whether a custom template or widget is actually needed. The same business outcome can likely be realized with the OOTB Constellation component library., and custom components add to your client's total cost of ownership.
What is the process for implementing a custom DX component?
Suppose you wanted a Slider control for specifying the value of an integer field. You could use our tooling to:
Scaffold the control
Build the presentational component in tooling of your choice
Publish it back to the Pega Infinity server
Then when when configuring a View in App Studio that captures Integer data, you could then choose to render the Integer as the Slider instead of a numeric text box
Is overriding the existing DX component implementation allowed? If I need to enhance the component with an additional parameter for example?
I am concerned that it might become similar to "Save As" or a "fork"?
Overriding out-the-box components is not planned. Aim of how to get the business outcome needed from the OOTB components available to minimise your client's total cost of ownership and update risk.
App Studio does not make buttons and other types of controls (that we are used to from the Traditional UI architecture) available when configurating Constellation views.
Is customizing how a field is rendered only possible using a custom DX component?
Constellation is not intended to be a one for one replacement for Traditional UI architecture.
Challenge whether you can accomplish the required business outcome using the OOTB Constellation components and their configuration options. You should be able to build the right outcome by keeping within the model and avoiding custom DX components unless there is no other way and your client is accepts the cost of ownership this would introduce.
Can we include a UI component library that our client has already developed?
The main options here are:
Custom DX component authoring to extend the usage of the Pega-native Constellation UI to include client-specific controls
Use the SDKs in React, Angular and Web Components if your client is pushing for adopting a complete design system onto the Constellation architecture
UX / UI - SDK & DX API
I prefer Angular over React. Is it possible to use Angular at the same depth that you are describing React?
The Constellation Angular SDK is for rendering a custom front-end based on Angular.
In App Studio, you author Constellation apps the same as you do now, even when they are intended to be presented in Angular. App Studio captures the UI model, and this in turn drives how the Constellation apps render using Pega's OOTB Constellation UI, as well as UIs based on the Constellation SDKs.
The SDKs are not intended as a drop-in replacement for Constellation front-end and there will not be feature parity between SDKs and Constellation Design System rendered applications.
Does DX API v2 support case types built on Traditional UI architecture, such as UI-Kit?
Constellation DX API is intended for use with Constellation based applications. Some endpoints will work for both where there is no View-based data.
Avoid mixing and matching APIs for normal case processing.
Does Pega provides a Typescript project template for front-end developers who want to start with development of the UI from scratch (not using Constellation)?
We have a set of open source SDKs for Constellation, built on Typescript available at Pega's GitHub site. Look for React ADK, Angular SDK and Web Components SDK.
Everything you need to get started is included. There are a comprehensive set of components as well as sample applications to get you started quickly. You can also submit Pull Requests and get involved.
UX / UI - Traditional UI
What is the schedule for when UI-Kit will get decommissioned?
There are no plans to decommission UI-Kit. There are two current stacks - Traditional and Constellation - that will both be around for the foreseeable future.
Does Theme-Cosmos traditional architecture have any limitations? Can we achieve everything with Theme-Cosmos which UI-Kit does?
Both UI-Kit and Theme-Cosmos are part of Traditional UI architecture. The two front-end architectures are not intended to be equivalent.
UX / UI - Migration tooling
Can you elaborate on the migration tool shown in the presentation?
The Migration Planning Accelerator demo shown during the meetup performs static analysis of the application and produces reports that help clients understand the level of effort, plan the work, and understand what to do.
When will the migration tooling be available?
Migration Planning Accelerator will be offered as a downloadable RAP in Pega Platform 8.9.
It is compatible with apps built in Pega 7.x and above.
What are the UI/UX considerations for a customer modernization journey?
How can we better assure that the modernization journey does not get derailed by extensive UI/UX rework?
Modernization means not only improving the UI/UX, but also the performance, maintainability, and cost of ownership of the entire application.
Clients should consider the value proposition of Constellation's prescriptive UX. That is, adopting the OOTB UX patterns that are quick to configure, deliering quicker time to value, with built-in front-end and accessibility best practices.
UX / UI - Miscellaneous
Can we have Create stage with a normal screen instead of a modal dialog?
You can bypass the Create stage using a When rule. You cannot have a Create stage that is not modal.
Whats the role of Layer Cake with respect to UI design going forward?
The Situational Layer Cake still applies. You can build a CoE layer and share UI assets across apps. For example, a CoE layer in Constellation allows you to share data models, Views, branding and theming, and other rules.
Is the Constellation service still outside of Pega Platform and configured separately with keystores, certificates, etc.?
For Client-Managed Cloud clients: yes
For Pega Cloud customers: this is all transparent
Can I run the static content UI service in my local node.js server to connect to personal edition?
The static UI service can be downloaded as a container.
Do I need an open ruleset to expose Insight self service authoring to users in Production?
What are the performance implications of using Insights?
Insights leverage both the Pega database and Elasticsearch for querying, depending on the complexity of the Insight design and the configuration options of the Report Definitions that retrieve the records used by Explore Data.
When Explore Data can retrieve data from Elasticsearch, the performance impact on the Platform is minimized.
Can I explore single-page embedded pages on cases?
For example: a Delivery Address embedded in Purchase Order cases
Yes. As of version 8.7, your Insight can report on properties from an embedded page. The properties from the embedded page need to be optimized for reporting and must also be marked as relevant records.
Can we build an insight with an external data as a micro-service where external data has no relation to Pega?
Insights can be built from external data sources only when that data is brought into the Pega ecosystem. We are looking towards expanding upon that in future, but as of version 8.7 it is internally-focused.
Are there any changes to Report Browser in 8.8, or extend its capabilities?
There are no changes to Report Browser in 8.8. Insights are the strategic direction with respect to reporting and data visualization.
Would you recommend using Insights for strategic applications such as Smart Dispute and Smart Investigate?
The recommendation is to use Insights wherever Constellation is enabled
How can we use joins in the Insight Dashboard reports?
Joins are supported in Insights by implementing simple Association rules in the data model to define how classes are related to each other in the data model. Once the simple Associations are in place, you would be able to see assoicated data objects in the available fields panel during Insight authoring.
Can we get the same Insights features in an application that uses the Traditional UI architecture?
The Explore Data (Insights) page is expected to exist in applications alongside traditional reporting UI using the co-existance strategy planned for Pega Platform 8.9, but as separate nav menu items. Insights cannot be included in Traditional UI page.
Can Insights help to load huge data volumes, such as historical data say up to one year old?
Insights will query the Elasticsearch index when instructed, falling back to the application database when querying for a feature that is not yet supported in Elasticsearch.
Having the data driving these insights indexed in Elasticsearch can help with performant data analysis of large volumes of data. Your client's business intelligence requirements may still dictate that extracting this data to a data warehouse is preferred to performing this analysis on the operational database. As such, data extraction using tools like BIX remains part of the story.