# CLSA Community Meetup: Pega's latest UX capabilities: a deep dive (February 2022) Recording + Handout **URL:** \ **Category:** Knowledge Share\ **Tags:** 8-7, user-experience, lead-system-architect\ **Created:** [March 2, 2022, 3:02pm UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306 "2022-03-02T15:02:24Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![DionLammers](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/dionlammers/32/7249_2.png) [@DionLammers](https://forums.pega.com/u/DionLammers)\ **Post date:** [March 2, 2022, 3:02pm UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306/1 "2022-03-02T15:02:24Z")
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](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. [https://players.brightcove.net/1519050010001/default\_default/index.html?videoId=6299284195001](https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299284195001) [https://players.brightcove.net/1519050010001/default\_default/index.html?videoId=6299284266001](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=6299283166001) [https://players.brightcove.net/1519050010001/default\_default/index.html?videoId=6299282634001](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=6299281069001) [https://players.brightcove.net/1519050010001/default\_default/index.html?videoId=6299282918001](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=6299284194001) [https://players.brightcove.net/1519050010001/default\_default/index.html?videoId=6299284021001](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=6299284089001) [https://players.brightcove.net/1519050010001/default\_default/index.html?videoId=6299283321001](https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299283321001) [https://players.brightcove.net/1519050010001/default\_default/index.html?videoId=6299284263001](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=6299283100001) [https://players.brightcove.net/1519050010001/default\_default/index.html?videoId=6299282920001](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=6299284022001) [https://players.brightcove.net/1519050010001/default\_default/index.html?videoId=6299284025001](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=6299283102001) [https://players.brightcove.net/1519050010001/default\_default/index.html?videoId=6299284094001](https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6299284094001) [CLSA Community UX Deep Dive handout.pdf](https://forums.pega.com/uploads/short-url/7bQc17GCBMDOw3IeME38eNUg3yQ.pdf) (7.26 MB) ---
**Author:** ![VitaliG7](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/vitalig7/32/17113_2.png) [@VitaliG7](https://forums.pega.com/u/VitaliG7)\ **Post date:** [March 31, 2022, 2:38pm UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306/2 "2022-03-31T14:38:13Z")
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 ---
**Author:** ![VitaliG7](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/vitalig7/32/17113_2.png) [@VitaliG7](https://forums.pega.com/u/VitaliG7)\ **Post date:** [March 31, 2022, 2:39pm UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306/3 "2022-03-31T14:39:00Z")
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 ---
**Author:** ![VitaliG7](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/vitalig7/32/17113_2.png) [@VitaliG7](https://forums.pega.com/u/VitaliG7)\ **Post date:** [March 31, 2022, 2:39pm UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306/4 "2022-03-31T14:39:26Z")
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 ---
**Author:** ![DionLammers](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/dionlammers/32/7249_2.png) [@DionLammers](https://forums.pega.com/u/DionLammers)\ **Post date:** [April 1, 2022, 12:33pm UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306/5 "2022-04-01T12:33:26Z")
@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. ---
**Author:** ![DionLammers](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/dionlammers/32/7249_2.png) [@DionLammers](https://forums.pega.com/u/DionLammers)\ **Post date:** [April 1, 2022, 12:36pm UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306/6 "2022-04-01T12:36:18Z")
@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](https://docs-previous.pega.com/user-experience/87/setting-constellation-service-pega-platform)). ---
**Author:** ![DionLammers](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/dionlammers/32/7249_2.png) [@DionLammers](https://forums.pega.com/u/DionLammers)\ **Post date:** [April 1, 2022, 12:40pm UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306/7 "2022-04-01T12:40:46Z")
@VitaliG7 Here ([Pegasystems Documentation](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._ ---
**Author:** ![ANKITMITRA](https://avatars.discourse-cdn.com/v4/letter/a/a183cd/32.png) [@ANKITMITRA](https://forums.pega.com/u/ANKITMITRA)\ **Post date:** [June 24, 2022, 10:28am UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306/8 "2022-06-24T10:28:26Z")
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? ---
**Author:** ![GaneshKumarC3200](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/ganeshkumarc3200/32/6875_2.png) [@GaneshKumarC3200](https://forums.pega.com/u/GaneshKumarC3200)\ **Post date:** [December 7, 2022, 5:28pm UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306/9 "2022-12-07T17:28:23Z")
@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 ---
**Author:** ![DionLammers](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/dionlammers/32/7249_2.png) [@DionLammers](https://forums.pega.com/u/DionLammers)\ **Post date:** [June 24, 2022, 5:58pm UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306/10 "2022-06-24T17:58:54Z")
@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](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](https://support.pega.com/discussion/video-steps-create-cosmos-dx-component) ---
**Author:** ![SravanKumarK16850390](https://avatars.discourse-cdn.com/v4/letter/s/87869e/32.png) [@SravanKumarK16850390](https://forums.pega.com/u/SravanKumarK16850390)\ **Post date:** [June 20, 2023, 1:59pm UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306/11 "2023-06-20T13:59:18Z")
@GaneshKumarC3200 Hi Ganesh, did you find the answer on how to enable search feature for caseReference or dataReference. ---
**Author:** ![DionLammers](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/dionlammers/32/7249_2.png) [@DionLammers](https://forums.pega.com/u/DionLammers)\ **Post date:** [June 23, 2023, 1:59pm UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306/12 "2023-06-23T13:59:14Z")
@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](https://forums.pega.com/uploads/short-url/uptSAR2WC1ZsvwFkbZ2tvdQTMKs.doc) (160 KB) ---
**Author:** ![GaneshKumarC3200](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/ganeshkumarc3200/32/6875_2.png) [@GaneshKumarC3200](https://forums.pega.com/u/GaneshKumarC3200)\ **Post date:** [June 23, 2023, 9:21pm UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306/13 "2023-06-23T21:21:42Z")
@DionLammers Thanks a lot Dion ---
**Author:** ![krishnateja](https://avatars.discourse-cdn.com/v4/letter/k/5f8ce5/32.png) [@krishnateja](https://forums.pega.com/u/krishnateja)\ **Post date:** [December 5, 2023, 2:17pm UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306/14 "2023-12-05T14:17:01Z")
@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? ---
**Author:** ![Amarjit\_Singha\_Roy](https://yyz2.discourse-cdn.com/pega/user_avatar/forums.pega.com/amarjit_singha_roy/32/9158_2.png) [@Amarjit\_Singha\_Roy](https://forums.pega.com/u/Amarjit_Singha_Roy)\ **Post date:** [September 23, 2024, 3:06pm UTC](https://forums.pega.com/t/clsa-community-meetup-pegas-latest-ux-capabilities-a-deep-dive-february-2022-recording-handout/2306/15 "2024-09-23T15:06:44Z")
@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?