Discussion
Pegasystems Inc.
NL
Last activity: 23 Sep 2024 11:06 EDT
CLSA Community Meetup: Pega's latest UX capabilities: a deep dive (February 2022) Recording + Handout
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: https://collaborate.pega.com/discussion/clsa-community-meetup-pegas-latest-ux-capabilities-deep-dive-february-2022-qa
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.
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.
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.
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.
Next is the presentation about web self service; the use of web embed and SDKs. The second video is the Q&A
The final recordings are about when to use what capacity and the migration path options.
Accenture GmbH
DE
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
Pegasystems Inc.
NL
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 (https://docs-previous.pega.com/user-experience/87/setting-constellation-service-pega-platform).
Accenture GmbH
DE
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
Pegasystems Inc.
NL
Here (https://docs-previous.pega.com/pega-platform-client-operating-system-and-browser-support) 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.
Accenture GmbH
DE
The DX API already allows us to integrate with a custom UI framework such as Angular. What benefits is the constellation architecture bringing about?
Pegasystems Inc.
NL
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.
Cognizant Technology Solution
IN
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?
Pegasystems Inc.
NL
@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: https://docs-previous.pega.com/dxcustomcomponents/87/cosmos-dx-components-cosmos-react
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
Updated: 7 Dec 2022 20:02 EST
Virtusa UK Ltd
GB
@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
Evoke
IN
@GaneshKumarC3200 Hi Ganesh, did you find the answer on how to enable search feature for caseReference or dataReference.
Pegasystems Inc.
NL
@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
Virtusa UK Ltd
GB
@DionLammersThanks a lot Dion
Royal Bank of Canada
CA
@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?
Rabo Bank
NL
@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?