CLSA Community Meetup: Pega's latest UX capabilities: a deep dive (February 2022) Recording + Handout

User Experience Knowledge Share
, ,
1

Pega now offers extensive user experience (UX) capabilities and enhancements, including Cosmos React – the latest version of the Pega Cosmos design system, and Pega Constellation – a new UI architecture that shifts the way low code and experienced developers build Pega applications.

On February 22 and 24 we hosted the cLSA Community event where Sam Alexander (Sr Product Manager
User Experience) covered the key design constructs and workings of Cosmos React, its design philosophy, and the latest capabilities, as well as how you can select the right front-end solution for your applications. In this event he also discussed the Constellation UI architecture for advanced use cases, including extension of DX components, a breakdown of new web self-service capabilities, and API integration. The presentation concluded with reviewing the phased approach for migrating applications to Cosmos React on Constellation.

In this post you will find the recordings of the presentation, the Q&A recordings off the live Q&A and the slides downloadable as PDF and the Q&A of the session (below the recordings).

The rest of the Q&A you can find here: CLSA Community Meetup: Pega's latest UX capabilities: a deep dive (February 2022) Q&A | Support Center

The first recordings are the introduction where to talk about the how and why of the re-acrhitecture of Pega’s UI to Cosmos. The second video is the combined live Q&A of the two sessions.

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299284195001

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299284266001

The next part is all about the new UI architecture that we refer to as Constellation. The first video is the presentation and the second the combined live Q&A.

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299283166001

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299282634001

We will now dive into Cosmos React. First the presentation, then the combined live Q&A and then the 5 demo video’s that are shown in the presentation.

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299281069001

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299282918001

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299284194001

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299284021001

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299284089001

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299283321001

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299284263001

The next part is about the option to create Cosmos DX Components for advanced use cases. This functionality is still for early adopters and does require professional front-end development skills.

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299283100001

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299282920001

Next is the presentation about web self service; the use of web embed and SDKs. The second video is the Q&A

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299284022001

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299284025001

The final recordings are about when to use what capacity and the migration path options.

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299283102001

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299284094001

CLSA Community UX Deep Dive handout.pdf (7.26 MB)

2

Hi everyone,

We have a couple of questions on Cosmos React.

Do we have to import some starter pack to use Cosmos React, as we have it for DX API’s to have React front-ends?

@DionLammers

3

Will there be any browser compatibility issues for using Cosmos UI in PEGA 8.7? When we use Cosmos in 8.5, we are using Chrome for better loading of application.

@DionLammers

4

The DX API already allows us to integrate with a custom UI framework such as Angular. What benefits is the constellation architecture bringing about?

@DionLammers

5

@VitaliG7

As of version 8.6, Pega consists of the Constellation technology stack and Cosmos design system. Constellation contains the Constellation DX API, Constellation JavaScript Engine and Constellation JavaScript API. Constellation combined with Cosmos is referred to as Cosmos React. However, not all Pega customers want to use the Cosmos React user interface. Pega SDKs provide a front-end developer friendly toolset to use an alternative design system. On the marketplace you can find multiple SDK that are available as a starting point.

When you want to use DX API v2, you will be using Constellation. When creating your own front-end using Angular for example provides you with a lot of freedom and allows a different design than Cosmos brings. With the OOTB Cosmos React you don’t need to invest in the creation of an angular (or other technology) front end interpreter. But the creation of your cases will remain the same.

6

@VitaliG7

Cosmos React is available in 8.7 and doesn’t require any installation of starter packs or SDK. You need to have a constellation service setup in the environment (Pegasystems Documentation).

7

@VitaliG7

Here (Pegasystems Documentation) you can find the browser support for the current Pega versions.

In the browser notes there is a statement about the use of React in IE11:

The Cosmos React UI has a number of features, such as Landing Pages in Portals, which are based on the React Javascript library. Some of the functionality in the React library does not have any support in the Microsoft Internet Explorer 11 browser; therefore, Pega components rendered with React do not work in Internet Explorer 11. If you try to use Internet Explorer 11 with the Cosmos React UI, a message will display stating that this feature is not supported and recommending that you use a supported browser.

8

Hi @DionLammers - As you mentioned, could you please provide the detailed documentation(developer guide) on how to create react component in a front end tool, publish that in constellation server and use hat from app studio?

9

@DionLammers In the handout, its mentioned a feature “Search & select for data ref and case ref” for constellation. Is there any guidance on how to use? We need a simple case search based on few exposed columns. I am using 8.7. I have tried to add CaseReference field but I am not getting the “Enable Search” checkbox shown by Sam in the video

10

@ANKITMITRA hi, this landing page contains all the pages required to be able to learn how to create DX components, how to publish them to your pega environment and to use it in your pega environment: Pegasystems Documentation

You can also use this post that I created with a video of the steps: https://support.pega.com/discussion/video-steps-create-cosmos-dx-component

11

@GaneshKumarC3200 Hi Ganesh, did you find the answer on how to enable search feature for caseReference or dataReference.

12

@SravanKumarK16850390 & @GaneshKumarC3200
I have attached a document to this post; I hope it is helpful as a description on how to get the search & select to work on an external data source

Search+&+Select+via+External+Data+Source.doc (160 KB)

13

@DionLammers Thanks a lot Dion

14

@DionLammers Hi Dion. You mentioned in step 5 and step 6 to use it in a case type. Will this work in landing pages without associating it to the case types i.e. a reusable landing page that returns external system of records value like customer ID and details with edit/delete capabilities?

15

@DionLammers - For the search and select pattern to work can we pass a range of value? Example if I have a date field and I want to check all dates upto 18 months from now is it possible to do that after enabling search?