Pega Cosmos & UI Kit: What They Mean for a BA

Description: Pega is rapidly innovating in the area of user experience through Pega Cosmos and UI Kit. This presentation will summarize important changes and describe what those changes mean for the Pega business architect.

Let's keep the conversation going! If you have any additional questions for Marc reply here to let him know and don't forget to tag him (@cheom.)

We hope you understand we couldn't get to every question during our Q&A session, but we'd like to provide answers to as many as we can. Check them out below:

Question: Is the multiple tabs option only for cases, or can we use it for options available on the left-hand side menu as well? 

Question: Are we able to open multiple portals in the same browser? 

For Cosmos running on the Section-based UI architecture (Theme Cosmos), utilizing a new browser tab in Cosmos can be initiated on any open case link (a link control that calls “Open Work”). A case opened in a new tab is a fully functioning separate thread that allows you to navigate the full application. (Tabs or browser sessions will not conflict with each other and cause the pages to refresh.) 

Unfortunately, you cannot open other links, such as landing pages from the navigation ribbon.  

Note that in the new front-end architecture (code named Constellation), all links can be opened in a new tab, and URLs (to landing pages, to cases, etc.) are semantic, so you can cut/paste them into an email, chat, etc. 

Question: Does preview lock the case momentarily? 

No, the preview capability is the same as someone fully opening the case to view it. This means someone can preview while another is working on an assignment. Or someone can open an assignment while someone is previewing, without any locking concerns. 

Question: Can you explain the differences between Cosmos on Constellation and DX API with React JS?

I’m not sure what the exact question is here, but I think it’s about how to choose between Pega’s various UI capabilities (Pega-generated UI, such as Cosmos; non-Pega-generated UI, such as with SDK’s and DX API) 

Let’s start with an overview of all our UI capabilities across platform versions, what type of developer it is targeted for, and how they are used: 

Custom components for Cosmos 

Offered starting in 8.6, this is where a professional front-end developer (knowledgeable in ReactJS/HTML/CSS/JS/etc.) extends Cosmos by writing a custom component, which can be a new View, template, or widget.  

View  An object representing the combination of data and a template, stored in the object class. 

Template  A definition for a generic rendering structure that presents data with visual style and interaction behavior.  

Widget  A pre-assembled view with pre-set template and expectation of data. May be pre-assembled by Pega or by app-builders. 

Like other front-end frameworks, we offer a CLI (command line interface), which will create a “boilerplate” sample project to get started. The developer writes the component. Then, the CLI can publish the component back to the server, and citizen developers can use the component to author their app in Pega App Studio. 

Non-Pega UI 

For customers who want to build their own front-end (non-Pega generated UI), professionals in the field often ping me about the DX API, which was our only option for release, predating 8.6. In fact, we offered (and still offer) Starter Packs with a sample application. However, the introduction of the SDKs in 8.6 and beyond is probably the better option. Here’s more detail: 

DX API 

 For non-Pega-generated UI, the DX API is no longer the only choice as of Pega 8.6 and 8.7, and it’s probably not what developers need unless they are building a new SDK. The DX API is low level, requires developer to know a lot about Pega internals, and doesn’t offer anything other than data (no state management, etc.) 

When developers want to build their own front-end, you should talk to them about the SDKs. 

SDKs 

SDKs are friendlier APIs for developers and offer more functionality, such as state management. The SDKs we currently have are for Angular, Vue, and Web Components. This is likely what developers want to build their own front-end. 

Question: Can the end user customize the portal/dashboard in the new Cosmos?

An end user has home as the standard landing page for a channel. An optional page, this is a curated experience that is defined by system architects or citizen developers but cannot be personalized for the end user. This allows a product owner to ensure that each channel/persona gets a consistent experience. 

The ‘Dashboard’ page that can be personalized is still available in Section-based architecture with Theme Cosmos. If your use case requires: 

1. Pega App Studio allows you to configure the default landing page for that channel. 

2. The dashboard page is available in Cosmos and can be made the default page. 

Dashboards that can be personalized are not yet available for Cosmos on Constellation (the new front-end architecture). 

Question: What factors should we consider when migrating an existing application from UI Kit to Cosmos?

It’s important to understand that there are currently two versions of Cosmos. 

• Theme Cosmos is the classical section-based UI architecture used by UI Kit and is recommended for all new applications when using version 8.4 or above. Theme Cosmos is a “bridge” to Cosmos on Constellation. 

• Cosmos on Constellation, a whole new UI architecture, is currently only available for early adoption. For 8.7 onwards, we hope to make it the default for production applications. 

For existing applications built on section-based architecture, Pega recommends waiting until the 8.7 period and beyond. In the meantime, developers can ease the future migration to Constellation by refactoring their application by addressing issues reported on the Pega App Studio Compliance landing page in Designer Studio. 

Question: Do we have the concept floating content on the screen? For example, "Go to top button," which floats on the screen even though the user scrolls down? 

Let’s explore this idea; it is a frequent pattern in many apps. Send a note to Sam Alexander and Erica Lee.

Question: What is the name of the UI control or steps necessary to achieve the left-hand data panel?

I assume you’re referring to the first column in the three-column layout of the full case page. This column is referred to as the summary panel. It contains critical case data that users should understand at a glance as well as tabs for switching the screen beneath assignment processing in the work area. 

Cosmos introduces a couple of important new sections: 

1. On the left-hand side and part of the summary panel, the ‘CaseDetails’ section contains the information that you see both in the Case and Preview.  

2. This is part of the wider Cosmos Design System, ‘pyCaseMainInner’ section, that allows you to add case tabs below and utilities widgets on the right.

Question: What happens to customers who have made investments in self-service channels and customized UI using UI Kit? Do they also need to move to Cosmos Constellation in 8.7? If yes, do they need to start to convert their existing sections to use templates?

We recognize the investment customers made by using UI Kit, and it is still available to existing and new applications. Pega’s mentality for UI Kit was that you can customize (fork) anything. Currently, there is no sunset date for UI Kit; it will be used for years to come. 

Cosmos is continuing to deliver a design system and new features that will allow applications to deliver low-code or no-code experiences quicker and at lower investment, allowing organizations to tackle bigger business problems quicker. It also means delivering a consistent user experience no matter which Pega based application you are using – a consistent user experience means reduced training times and quicker delivery times for our applications.

Question: If a user does not have access to a particular assignment, then will the To Do task still show the assignment to the user?

The To Do list has visibility conditions on the ‘Go’ or ‘Open’ button* that will hide this if the user cannot perform this assignment. This is the out of the box mechanism that allows a user to see what else might need to be performed but won’t allow them to launch the assignment. 

*Depending on if you configure a flat list or table in the Cosmos UI Settings in the case settings. 

Question: When will Pega stop supporting UI Kit?

Customers have a large investment in UI Kit based applications and it will be used for years to come. There are “currently” no plans to sunset UI Kit. However, new feature investment will be focused on the Pega Cosmos Design System to help support a low-code / no-code approach to application delivery.

Question: If a current client uses UI Kit, should we be planning to migrate?

Migration of existing applications is recommended to Cosmos on Constellation, which will be available for general use in the Pega Platform from 8.7 onwards.

Question: If the Pega Cosmos Design System is using React, does that mean projects can use frontend react developers to help build the app?

See answer to above question, “Can you explain the differences between Cosmos on Constellation and DX API with React JS?” 

Question: Does “one channel” mean that we can only configure for desktop and not mobile apps?    Cosmos ships with one channel out of the box. This just means that you don’t have the launch “User Portal” and “Manager Portal” channel options when developing your application, (only “User Portal”). It means that you have more control and flexibility to define your own persona and channel needs for your application.  

In Pega App Studio, there is a low code experience to create new channels including mobile apps, which are supported by Cosmos. 

Question: Are these features available in Cosmos theme (basic) or Cosmos on constellation?    The webinar focuses on a demonstration of Theme Cosmos. However, the Design System is common between both versions of Cosmos, so features are common.  

Question: What version of Pega offers Cosmos with no limitations?    Cosmos on the Section-based UI architecture (Theme Cosmos) contains full case management capabilities, just like UI Kit. 

Cosmos on the new Constellation UI architecture was missing key case management capabilities for 8.6 and thus was positioned as “early adopter.”  

 See: https://community.pega.com/knowledgebase/articles/understanding-ui-capabilities-pega-86 

For Pega 8.7, we’re focused on closing the gaps. Our hope is to make Cosmos on Constellation the default for creating new applications.  

Question: It is getting increasingly harder to convince clients on UI changes as it changes their UX and breaks automated test scripts. Do you recommend going directly to Cosmos on constellation so that we don’t have 2 steps to migrate? For example:  UI Kit > Cosmos-theme > Cosmos-constellation.   Yes, it is recommended to migrate to Cosmos on Constellation to avoid two migrations. When Cosmos on Constellation is available for production use (8.7+) we plan to offer guidance to help customers migrate. 

Question: When you say "Pega Strategic Apps" do you mean Pega marketing or Pega sales automation? 

Question: In the demo, the Pega Government platform is shown. Are all strategic applications already migrated from UI Kit to Cosmos?    Yes, applications like Customer Service, KYC-CLM, Customer Decision Hub are currently being migrated to the Pega Cosmos Design System. Many other applications/frameworks already support Cosmos: 

• Pega Marketing 1-1 Ops Manager (8.3) 

• Agile Studio (8.3) 

• Sales Automation (8.5) 

• Pega Government Platform (8.5) 

Question: Is Theme Cosmos available in v8.5?    Theme Cosmos has been available for use since 8.3 for platform builds. When building new back-office applications in 8.4 and above, we recommend Theme Cosmos.  

Question: Which application is this? I didn't see this when I gave the demo to a customer through Pega App Studio. 

This webinar showed a Theme Cosmos app built on Pega Government Platform, with some locally configured case types. Pega Government Platform does have an additional menu in Pega App Studio that you would not see in a platform build.  

Although not the purpose of this webinar, System Architects can surface up features in Pega App Studio to support a low-code / no-code development approach.  

Question: Can you change the default time and date to MMM-DD-YY? And time in a different field?     Cosmos uses the underlying Pega configuration settings. There are multiple ways to change time defaults including on the UI control itself or the Operator Record (local settings). 

Question: What is the recommended approach to do customer-based branding for the application? Skins, CSS, or both? All options are not available in Skin rules. 

Pega App Studio is the recommended approach to modifying the application theme. Although Cosmos Theme will allow you to modify CSS or Skins, doing so will require additional migration steps to support the new UI architecture in Cosmos on Constellation.  

Please check out best practices on customising a Cosmos Theme application. 

Often, customers implement their branding and styling in an enterprise layer, and each application builds on that layer. This allows branding and styling to be controlled in one place and it filters down to other apps.  

Question: Does Cosmos provide better performance over UI Kit?    Theme Cosmos is the classical section-based UI used by UI Kit. However, the UI is structured in a way that utilizes less refreshes of the entire screen (and loading of data) so you will notice performance improvements.  

The new UI architecture provided in Cosmos on Constellation will be considerably faster since activity over the wire is mostly data. (Cosmos on Constellation uses Single Page Application (SPA) architecture). 

Question: The user portal and the design in Cosmos is great for employees that use the application often. It isn't that great for external users that use the application only once. Will there be a "light" version of the user portal? 

By “external users” do you mean consumer-facing?  

When exposing Pega-generated UI to consumer-facing applications, this is where Mashup and Web Self Service (WSS) come in.  

In section-based architecture, the Clarity theme was used for this instead of UI Kit. Developers modify the clarity theme (a dedicated Skin, CSS, etc.) to match the website for which Pega-generated UI is being embedded.  

For the new Constellation architecture, Mashup is being developed for 8.7.  Web Self Service was descoped. Contact my colleague, Tim Martel for further information. 

Question: I am limited to Pega App Studio if I want to design UI with Cosmos?    Pega App Studio provides a low code way of modifying your UI in Cosmos or UI Kit. It ensures that you stay within the design system and configure elements that are allowed, avoiding unnecessary customization that might impact upgrades in the future. 

However, you can still use Pega Developer Studio to configure advanced UI configurations. If doing so, please check out the best practices on customizing a Cosmos Theme application. 

Question: I understand that this current session is about the UI and app changes, but is there a way to find out a way to design these as a BA?    The Pega Academy is a wonderful place to learn.  

• The Low Code App Builder Extended mission allows you to build an application and configure the UI in Pega App Studio with a Cosmos-based application. Within this mission the specific modules of interest would be: 

• Customizing UI elements 

• Customizing a portal 

• Customizing a dashboard 

• For a more in-depth look at Cosmos check out these missions: 

• Theme Cosmos Foundation  

• Pega Cosmos Designer 

Question: Any enhancements or new features in terms of Pega OOTB AUT and scenario testing if we use Cosmos UI? 

Contact Linoy Alexander for answers to this question. 

Question: What are the best UI/UX design/development practices Cosmos is using? Is there any documentation that shows that?    Please check out https://design.pega.com/.    The site has a wealth of documentation on the guidelines and components to the Pega Cosmos Design System. 

Question: Could you also present Cosmos UI for mobile devices?    A great suggestion! Please check out: 

What’s new 8.6: Mobility    https://pegasystems-my.sharepoint.com/:p:/g/personal/kara_manton_pega_com/EeRvVnNmga9BozyVFH1nsO0BY4nTq7S5AlhVqeYRvUHp6Q?e=p5ZSc7  

Two-minute video: What's new in Pega 8.4, which includes the Cosmos mobile experience:    https://pegasystems-my.sharepoint.com/:v:/g/personal/sam_alexander_pega_com/EVhLSzyvHG5CtOv339jthLsBZP6rHE0c0EC-il6cD04eVQ?e=ZDaFyq  

Question: Can we configure the summary panel in Cosmos to be narrower than the default?    It is not recommended to customize the width of these sections. Speaking from personal experience, it can have upgrade impacts. 

In Cosmos 8.5+ the user can choose to minimize the case details (summary panel) or utilities if they need more space to work on their form.  

Question: Can we upgrade an application built before version 8.4 with Cosmos?    For simple applications, a migration to Cosmos Theme is possible. The older the version, the more steps or complexity may be involved. For more complex applications, it is recommended to wait for Cosmos on Constellation (8.7) before attempting any migration. There will be additional tools made available to assist in a migration.  

Question: Can we use Cosmos on applications built on a CLM framework?    This CLM framework is currently being migrated to the Pega Cosmos Design System. Until this becomes available you should continue to use UI Kit. 

Question: What is a case icon? 

The case icon is the icon shown in the case header. This is a configurable item in Cosmos UI settings on the case (including turning off).  

For an application that has lots of case types and if you’re often jumping between them, the icon can help visually differentiate between the case types you are viewing. 

If you'd like to download this presentation in PDF format and are logged in to your Pega Collaboration Center account, you can access the attachment below.

Thank you again for attending, and we hope to see you at our upcoming events. 

You can find the full schedule on our Pega Community Events page.

File Attachments

Pega Cosmos & UI Kit - What they mean for a BA.pdf