Conversation
Pegasystems Inc.
GB
Last activity: 9 Dec 2025 8:48 EST
Webinar Replay! Extending Constellation: A Deep Dive into Constellation DX Components
This is a webinar replay for Extending Constellation: A Deep Dive into Constellation DX Components. The original event posting contains the full synopsis of this event, below is the reply of session 1 and session 2.
Two sessions, same content EXCEPT...
The two sessions were attended by different experts from our field, the questions of our experts were the same so you can watch your preferred session / experts. We highly recommend watching both replays when it comes to item 9 and 16, where examples of DX components were shown and audience questions were asked.
- These were different between the sessions, you will get more from this replay by watching both sections.
Event table of contents
- What is a DX Component? Session 1 (08:59) | Session 2 (08:12)
-
How do I add custom UI to my application? Session 1 (08:59) | Session 2 (08:12)
-
What should I consider before implementing DX Components? Session 1 (13:01) | Session 2 (10:58)
-
What do you need to build a DX Component? Session 1 (17:31) | Session 2 (13:06)
-
What types of DX Components are there? Session 1 (25:28) | Session 2 (17:55)
-
What is the Constellation UI Gallery? Session 1 (28:38) | Session 2 (20:00)
-
Are Constellation UI Gallery components supported? Session 1 (30:56) | Session 2 (21:20)
-
How do we actually create a DX Component? Session 1 (34:02) | Session 2 (25:16)
-
What are examples of DX Components you have built? Session 1 (52:43) | Session 2 (36:06)
-
The panelists showed different components that they had individually been involved in. We highly recommend watching both sessions to see these different of real life DX components built.
-
-
How do we size a DX Component? Session 1 (58:34) | Session 2 (52:21)
-
What is the difference between SDKs and DX Components? Session 1 (01:02:00) | Session 2 (57:24)
-
If you had tips for those starting DX Components, what would they be? Session 1 (01:09:35) | Session 2 (01:03:08)
-
Where would you start learning about DX Components? Session 1 (01:11:41) | Session 2 (01:05:18)
-
Host Summary: Session 1 (01:14:11) | Session 2 (01:07:58)
-
Quiz Session 1 (01:15:17) | Session 2 (01:09:01)
-
Q&A from the audience Session 1 (01:26:04) | Session 2 (01:17:59)
-
Each session tackled different questions from the audience. We recommend watching both sessions to get the full answers to these questions:
-
Session 1 (01:26:04)
-
UI gallery, and the question was what we do, when there is a new version of PEGA, like a '24 and '25, what we need as a project team, to do with the components that we've got from the UI gallery.
-
-
Session 2 (01:17:59)
-
I have a customer who's well organized and has their own design system, with their own functional React components. Is it advisable to port those DX components into Infinity?
-
Using DX components, in the Out of the Box portal, and for the SDKs. what's the difference?
-
-
-
Closing and future events Session 1 (01:27:59) | Session 2 (01:21:41)
Links and QR Codes show in this Webinar
- Constellation Bootcamp: Extending Constellation
- DX Component Lifecycle
- Pega GitHub (UI Gallery)
- Pega GitHub (UI Gallery) RAP file
- Pega GitHub (UI Gallery) feedback and contributions
- DX Component Full Lifecycle Demonstration Video
- Pega Design Tokens (Only shown in Session 1 - Examples of DX Components)
- User Experience Expert Circle Webinar: Unlock Advanced UI Customization with Constellation SDKs
- Where to start learning:
- Experience Designer Role Hub
- Figma:
- Learn about Constellation patterns
- Academy:
- Pega Documentation:
- Pega GitHub (UI Gallery)
- DX Component Builders
-
This is the platform DX Component Builder in which you can utilize to extend and add onto the Constellation Design System.
-
Integrated DX Component Builder – Specifically built for the SDK. This DX Component Builder allows you to extend and override Constellation Design Components. https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/using-dx-component-builder.html
-
- Constellation 101 series - articles relevant to webinar:
Session 1 (Ian Ovenden & Francine Ong)
Session 2 (Joshua Helmbrecht, Rich Oren and Mark Hurd)
Additional Resources
- Summary Blog: https://community.pega.com/blog/extending-constellation-deep-dive-constellation-dx-components
- Event Q&A: Below
Q. Do we get access to slide deck after the presentation?
A. Recording will be shared in follow up email as well posted on UX Expert Circle This video is also already available on our Expert Circle: https://community.pega.com/video-library/extending-constellation-ui-dx-component-full-lifecycle
Q. I hope you been running a Pega video.Could you please increase the screen resolution?
A. This is a recording, it is available here: https://community.pega.com/video-library/extending-constellation-ui-dx-component-full-lifecycle
Resolution doesn't play back so well in webinar, apologies. We are also playing this at 2x for sake of speed, but you can watch this at the right pace. It's a 20 minute video, voiced over by one of our consultants.
Q. Is the gallery to be used as a launchpad rather than use it as is ?
A. Exactly correct. These are well-thought-out components developed by our engineering team at Pega. However, we cannot guarantee that they will work as expected in your particular environment & application.. So it is a great idea to use them as example starting points from which to build upon and refine for your needs.
Q. On filed, when a customer has well organized and functional react components, is it advisable to port those DX components into Infinity. @Josh
A. live answered in session 2
Q. This is great, unfortunately have to drop, Will there be a session where the requirement is converse, Pega case to be surfaced on client Digital factory as per their design system ?
A. this use case is covered with SDK, we had previous webinar about SDKs. BTW in SDKs we also can use custom DX Components, we will touch on this https://community.pega.com/event/extending-constellation-unlock-advanced-ui-customization-constellation-sdks
Q. I have created custom DX component from a component in the UI gallery. Is there a way to do the same from an OOTB component in the platform?
A. Yes, you can use Overrides to overide an OOTB component. A lot of the process is similar to what you will see today. The SDK then uses your component and not the one provided by Pega
Q. I created a custom dx component using font-awesome css library ,when i published the component , i observed the css changes are not reflecting over the UI but the changes were reflecting on storybook , what might be the reason ?
A. That could happen if you’re watching the SDK Storybook and publish the constellation one. Did you check that?
Q. How can i customize constellation OOTB Header and add an DX component to it?
A. there are parts of ootb portal that do not support customization, some component are part of design system and should not be modified. IF you require your own portal and to control the user experience with your own design system then SDKs might be an option for you.
Q. I'm not sure I understand the difference between usign VS and SDK. I was under the impression that the SDK was to have a UI with a client Design System (headless pega)
A. clients use SDKs when they want to implement theor own DS in oppose to DX Components route. DX Components use Constellation Design System we will cover some of this today too :)
Q. I am using UI Gallery components version 2. Now it is on version 3. How can we upgrade to the latest one – download and re‑upload? If yes, here is my question: for one of the components (FormFullWidth) we have a “NumCols” is text input in the config for the version 3, and in version 2 we have a dropdown in the new version, will it auto‑update? If I do not upgrade the UI Gallery in my application, will it cause any issue when Pega upgrades its product?
A. after upgrading Infinity version it is advides to update UI Gallery version. I believe we don't have automatic update. Updates needs to be reconciled manually. If not upgraded it migth breaks
Q. Can we override the OOTB components and use those in Pega Constellation Application not an React SDK app?
A. No, you’ll need to create a custom DX Component and change the display of the component from an approach level. DX Components are to extend what is ootb not to override it
Q. What is the difference between PCore and PConnet API's. How to choose whether to use PCore or PConnect API's for case creation, processing, etc
A. PCore is the APIs communicate with the Pega platform and PConnect is component-related APIs so it depends to what you want to do. Some of the methods are global so will be available on PCore and some are obund to component so you will find them on PCore
Q. Is there few other Steps needed to be make the components tab available in the App Studio Library in Pega 24.1
A. Should be a straightforward process just to import them. Any particular issue you are facing?
Q. Will the Constellation UI Gallery Components be part of the actual product in the future or they will always remain open source and the maintenance of those remains with the organisation using them?
A. If they see heavy use, they can be added to Constellation in later versions A good example was the case hierachy widget in '25. In Infinity '24, if you wanted this you needed a DX Component, we gave an example of one in the UI Gallery. But now its Out of the Box
Q. How to manage the components when the Pega versions are upgraded. What issues/challenges may arise in components when the Pega and React SDK versions are upgraded.
A. You might check the release notes for the new version to make sure there is no change in APIs or design tokens for example. most of the time it will just work fine but as Francine respnded above Project team would need to reconsicle changes if any
Q. Let me rephrase my first question because I didn't understand the SDK part: Let's imagine that a component in the UI Gallery makes it to the platform as an OOTB component and dissapears from the UI Gallery. How can I make a fork of it?
A. old versions of galley will be still on github. You can take component of your interests and fork it - modify or upgrade as need. From now on you own it
Q. Not able to see the Component Tab in the Library, Not seeing the Component Rule in the Records tab
A. if there is no records on Rule-UI-Component class it means it was not properly imported
Q. The Component Rulesets and Library are available.
A. thanks for confirming
Q. Can we create a customized form region template layout with three columns (30/40/30)? If this is not possible with the existing templates, can we build a custom component to achieve this layout?
A. Yes
Q. Hi - Can we not clone and rename the component and then update the configurations, as needed?
A. Yes and then you’ll need to make sure you’re actually using it because that would be another component in your infinity server
Q. Is there any documentation for the skeletons/structure that are created , when we use the ´, npm run create?
A. it is just a base/example, the best way is to run the command and study what is get created
Q. will there be a recording available for this event?
A. it will posted on UX EC page and also in a followup email
Q. Do we need to add UIGallery ruleset to the application as previously when working in '23 we did it
A. yes ruleset with components needs to be in app stack
Q. If I publish to a specific application, can I later change it to all applications? Does that mean I need to republish? If yes, do I need to bump the version, or is that not required?
A. From v25, when you publish your components it will be available on your instance - you can add and remove from your applications accordingly. They are also now versionable, so you could use different versions of components within different applications.
Q. Is the components available in Github is common for all general applications?
A. can you please rephase the questions so I can best answer it
Q. Is there any reason why some field sub-types of a component are not available when creating a component in a Pega Constellation app, even though those sub-types are visible in the SDK? Example : Semantic link has field sub type as action
A. no everthing that is available in Constellation Design System (thus available in SDKs) is authorable in App Studio/Dev Studio there is distinction between what DS is and what can be autorable in low code manner
Q. I developed a component on Pega Infinity 24 and deployed it to production with no issues. I tested the same component on the Community Edition running Pega Infinity 25, and it works as expected. Do I need to update or rewrite the same component specifically for version 25 as well?
A. Check the release notes here : https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/whats-new-constellation-dx-component-builder.html
If there is nothing affecting your component, there is no need to rewrite or update
Q. Can we directly use the components which are available in github by importing the file or do we need to specifically publish again to our application
A. you can file RAP on UI Gallery, so it is enough to just import components via RAP without the need to publish from code
Q. When developing a Constellation DX component, do we need to consider Pega Content Security Policies (CSP) and ensure that the component complies with the configured CSP?
A. definietly yes
Q. I have developed a page template layout (403030) and i m able to see the layout in the landing pages as well
But for adding the elements in the regions its not showing the regions in the side pane like Region a , b and c
Can you please let me know how can we update the config .json for achieving this
A. Whether you consider that the list of added elements will automatically go to one columns to another.
Or, you want 3 distinct regions, and then youll have to set multiple “CONTENTPICKER” : https://github.com/pegasystems/constellation-ui-gallery/blob/master/src/components/Pega_Extensions_FormFullWidth/config.json#L32
Q. Can you show the qr again
Q. design.pega.com used to have all constellation constructs/patterns available as templates (react code). in later versions that has been removed, is there a specific reason for it?
A. good question, I don't have answer. I will ask internally
Q. For Content Security Policy (CSP), is there any documentation specific to components that explains where to configure it and how to use it?
A. there is no dedicated documentation. It highly depends on you components. what is uses and what it is loading, so you need to configure it in CSP rules
Pegasystems Inc.
GB
@MarcCheongthis post has been updated with links for all the QR codes / hyperlinks shown during the webinar.
Please see section "Links and QR Codes show in this Webinar"