Replay
Overview
In this event, we deep dived again into Constellation.
Sam Alexander (Principal Product Manager for User Experience in Pega) discussed the Constellation journey so far, including a reminder of Traditional UI pain points that Constellation UI exists to address. Sam also walked through what Constellation will fulfil in Pega Infinity '24.
Richard Marsot (Senior Director in Pega Engineering for Shared User Services) took us through advanced development tools and techniques in Constellation, including:
- A usage guide for Constellation SDK development, including component and feature availability.
- A demonstration of tools and techniques for to support debugging when developing Constellation applications.
- Fulfilling a more application-specific listing for "My Work"
- Hooks available to inject Javascript and CSS ... when you absolutely need to (use at your own risk)
- A walkthrough of additional components available from the Constellation UI Gallery
Slides and related webinars
- Slides from this webinar: Advanced Constellation UI and What's New in Infinity '24
- Related CLSA webinar: Extension DX Components - the Responsible LSA's guide
- Related CLSA webinar: Integrating Constellation with your existing (Traditional UI) apps in Infinity '23
- PegaWorld iNspire 2023: LeasePlan's transition to a fully digital business model
- PegaWorld iNspire 2023: Building for the Total User Experience with Pega Constellation
UI Gallery of Constellation DX Components
- Github home page
- Getting Started docs
- RAP downloads (usable for Infinity '23)
Constellation docs and training
- Pega Academy: Constellation Adoption Mission
- Pega Docs: Tools for debugging Constellation
- Pega Academy: Pega Tools for debugging Constellation: Topic | Challenge
- Pega Docs: PCore and PConnect Public APIs
- Pega Docs: Adding custom fonts to a Constellation theme (using pyC11nCustomFonts.css)
... plus plenty more links at the end of the slides
Questions and Answers
Here are the groupings of questions from the session.
- UI Architecture and Business Value
- App Studio
- DX Components and SDKs
- Feature Set
- Service Deployments
- Debugging
- Modernization
UI Architecture and Business Value
| Question | Answer |
|---|---|
| We understand that we want to offer really prescriptive ways to design UI. What's the philosophy behind it? We understand the benefits: upgrades are easier, development is faster, apps have similar experience so learning curve is less stiff. Is it to align with the Low-code world where products are more becoming prescriptive? | The goal is to reduce the cost of implementation and have the Pega Developers focused on implementing the digital transformation and optimizing the micro-journeys rather than spending time reskinning and coming up with specific and highly customized UI screens. |
| When we say Traditional UI to Constellation, do you mean UI-Kit or Theme-Cosmos? | The Traditional UI architecture refers to the section based UI architecture and therefore both Theme Cosmos and UI-Kit are "Traditional" UI. See https://docs.pega.com/bundle/platform/page/platform/user-experience/selecting-architecture-application.html |
| Can you have a Constellation case type and a UI-Kit case type within the same application? | Yes. This is called Blended UI. See https://docs.pega.com/bundle/platform/page/platform/user-experience/incremental-migration.html |
| Are there any plans to decommission UI-Kit down the road? | UI-Kit and the section rule architecture will be supported for many years to come. No plans to sunset. While we continue make critical bug fixes and Accessibility improvements in UI-Kit ruleset, we do not plan on building new features in it. Constellation UX is our strategic direction. |
| Do you provide also an end customer ready UI with the Constellation Pega generated UX? | You can utilize Constellation Self-Service portal, Web Embed and the SDKs to provide a user experience tailored to the needs of your end customers while still leveraging Constellation. |
| How to build the initial prototype what customer UX and SI UX SMEs used to build before development? The UX prototype creators working beforehand will be not in alignment with prescriptive UI, even if they use a tools like Figma. Please share your views. | The UX Designer can use the Figma component library available on design.pega.com to make sure that the design is aligned with the Constellation UI feature set and design system. From there, you should be able to quickly build your initial prototype in App Studio. |
| Is there any documentation regarding connecting Pega with other design system? | Start here: https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/constellation-sdks.html |
| How can we bring in Constellation where client is already using React to build UI and using DX APIs? | In this case, the client is likely using the starter packs and DX API V1 which is still using section rules. In Constellation, you no longer use section but the UI is using the view rule type. There are also SDKs on React. |
| Can I extend an existing application to mobile? | Constellation UI is fully responsive and will render fine on a mobile device without the need to circumstance the UI. |
App Studio
| Question | Answer |
|---|---|
| According to Constellation Adoption training, changes in a View are automatically saved. What if 2 different developers are changing the same View, at the same time. How does the system manages changes from both developers so we do not lose changes? | The last change wins. App Studio will alert you when multiple people are working on the same case type so you are aware when you are in that scenario. Branching is also helpful here as it will give you a chance to view the rule before it goes into the main rule set. |
DX Components and SDKs
| Question | Answer |
|---|---|
| Please provide a detailed step to create and import custom React component into Pega Constellation. | Please check out the recording, videos and input here: https://community.pega.com/event/clsa-community-extension-dx-components-responsible-lsas-guide |
| We got often requirements, to create custom widgets for the dashboard, to show a specific list view, with specific columns. This can only be implemented with a custom DX component, right? Could we, in the future, configure a (e.g. list) view which can be usable as a widget? | Insights might be a way to provide this as well; they can be used on lading pages, dashboards and inside your cases. They are fast and flexible. |
| The ComputerLand Application has lot of user cases covered. Is that available for us to download and review the examples covered in this call, or use it as a reference point? | Please see https://pegasystems.github.io/constellation-ui-gallery/?path=/docs/getting-started--docs and https://github.com/pegasystems/constellation-ui-gallery/tree/master/src/components |
| pConnect and pCore APIs are only for debugging? Or these can be used to build some components too? | pConnect and pCore are core API”s you use when extending Constellation. See https://docs.pega.com/bundle/pcore-pconnect/page/pcore-pconnect-public-apis/api/using-pcore-pconnect-public-apis.html |
| Do I have to recode on React completely if the client plans to move from bespoke React using DX API and starter pack to using Constellation? | There is re-work. The APIs are different and the way how you integrate a presentational component is different between starter packs and SDKs. Your application is also different. |
| How do I avoid security issues or detect issues when custom DX components use various npm modules? | npm audit will list some of the security issues. GitHub agents will also help in identifying security issues. |
| If the client has an enterprise-wide UI standard that cannot be met just by theming, what options do I have to incorporate in Constellation? |
Constellation UX can often match an organization’s “branding and theming” guidelines, like colors, font sizes, rounded corners, etc. The Theme also offers more granular “design tokens” developers can modify in a supported way, without CSS. See https://design.pega.com/develop/theme for the other design tokens. For customers who want complete control over the front-end and use another design system’s components, the SDK’s can be used. |
| Is there an article which shows steps to build and import new custom UI component while using Pega Constellation UI? | See https://docs.pega.com/bundle/constellation-dx-components/page/constellation-dx-components/custom-components/videos.html |
| Not every company have dedicated React devs. Do we need to learn React to deal real life complex requirements? | Often, React skills are often not required because many of the patterns you need are offered OOTB , configurable in App Studio. You also don't need dedicated resources - you likely need only a couple of Constellation DX components and a developer comfortable with front-end development should be able to accomplish this task. |
Feature Set
| Question | Answer |
|---|---|
| With Constellation coming are there any plans to update the Survey Component UI and usability (Question Page, Simple Question, etc.)? | Simple question is supported with some limitations. There are no enhancements planned in 2024 on this functionality but it will certainly be improved in the upcoming releases. See https://docs.pega.com/bundle/platform/page/platform/user-experience/constellation-limitations.html. |
| Does Pulse now work with data objects? | Yes. Pulse works in data objects in 8.8 or higher. |
| In App Studio, we had many texts e.g. Headings, Field Labels. Do they appear automatically in Localization Wizard? | Yes. Anything entered in a view as text is also copied as key value in a localization rule. Each view has its own localization rule that get pulls by the localization wizard. For more details: https://docs.pega.com/bundle/platform/page/platform/user-experience/localizing-application-constellation.html |
| Are the records for the help text/icon moved to the higher environments? Is there a way to customize based on the environment? | Currently, the contextual information configured on properties is configured once at design time, and it will cascade to higher environments. |
| Is there any improvements to have Custom Buttons/Icons/Links and associated onChange events? Our customers are asking for Buttons beyond OOB case step buttons and OnClick event. |
Constellation UI is very different the building UI with section rules. Constellation UX promotes UX consistency, seamless UI upgrades, built-in front-end and accessibility best practices, and accelerated development time. Our advice is to focus the customer on *business outcome* they are trying to achieve as opposed to building a "specific UI they have in mind." You'll find that for most use cases, you don't need buttons with onChange event - use local actions and case processing to achieve the outcome. Extensibility is also a value proposition, so for advanced, app-specific use cases, professional front-end developers knowledgeable in React can build a DX Component -- basically, composing Constellation's presentational components together in new ways to build something new. While it is expected that complex apps require a handful of DX Components, clients should leverage the OOTB patterns as much as possible. |
| Some of the clients that were using UI Kit are still looking for tabs for each case Constellation being single page app are there any plans to add that feature or support tabs in Constellation? | In terms of opening a case in tabs inside the app: The browser is much better about managing resources in browser tabs. We leverage that. You can easily open multiple cases in browser tabs. (In fact, many browsers allow you to create tab groups to group a set of tabs.) |
| Do we have pagination supported in constellation while showing list? If we have large data set how Constellation renders UI OOTB? | Constellation uses progressive scroll to load more data as you scroll. |
| Can we have one pager that list out all available patterns exist in constellation such that it will be easy to know at one place (Ex; Select and search pattern ..) | The best resources include the Constellation Adoption mission on the Pega Academy; the release notes and what's new videos for each release; and generally, trying Constellation out in your dev environment or with the Pega Platform Community Edition. |
| We used to be able to specify conditional logic (such as changing the color of a label) on the property presentation tab. In App Studio, are you planning views to allow such conditional requirements based on business logic? | We're aware of this feedback, and it's part of our backlog. We’re exploring options for doing this in the model — while maintaining UX consistency and Accessibility compliance. |
| We have a requirement to highlight all the fields that has been changed on case during perform harness. Is there any OOTB way to meet this requirement without writing CSS or some other form custom code? | Consider using OOTB Field-level auditing and history. If you wanted to compare prev and current values side by side, you might be able to adopt the “compare table layout” sample on Constellation UI gallery. https://pegasystems.github.io/constellation-ui-gallery/?path=/docs/templates-compare-table-layout--docs |
| Is it possible to have some component showing attachments as images on UI? | The OOTB Attachments widgets provides a lightbox view of images attached. Also, URL field types have an option in the view configuration to “render as image”. |
| Current Constellation doesn't support some of the UI concepts we currently have. For exampled tabbed view is not supported in a form view. Is the some information on what alternates we should consider? | Tabs are helpful for breaking up a large form into smaller parts. This is a great solution when data for the fields is coming in at any time and you need to quickly skip around to the tabs. In an upcoming release, we will provide a “Hierarchical form” that lets you break apart a large form into tabs. |
| How do we add menu controls in constellation portals and add additional UI functionalities outside of Case type? | Many controls, like Combobox and dropdowns, leverage Data Reference fields auto-populated by Data Page to get their data. It is likely that you do not need the Menu control because the same outcome can be achieved in another way. Constellation can also be extended by DX Components, which can be of type “Field”, “Layout”, or “Widget”. An example of a “Field” DX Component might be a new control to render an Integer. Extensibility is a core value of Constellation UX. |
| In our live Prod environment, we have multiple personas for the user for an application based on business rules. The users can access those personas by Pega OOTB My Application functionality of Theme Cosmos. I see that in Constellation, this functionality is not supported. Is this in your roadmap to support multiple personas? | Constellation UX offers an App Switcher widget in the application header that lets end users easily switch to other Pega apps on the same server. If you’re asking about the ability for the same user to switch portals within the same application — With Constellation UX, you can use business rules to control what the end user see, such as availability of landing pages, etc., thus switching portals often doesn’t make sense and adds more complexity. (If you wanted to create your own portal switcher, you could built that with a widget that leverages the “portal=MyPortalName” query parameter.) |
| How to validate the input fields in client side? Only Required checkbox is available for configuration. | Edit validate can be used the same as with traditional UI. Also, some field types, like URL or Phone, have built-in validation. |
Service Deployments
| Question | Answer |
|---|---|
| We have clients that want to use Constellation but they are not using the Kubernetes based deployments yet. Can Constellation be used with the VM based deployments? | There is no dependency on containerized deployment for Constellation. That being said, the VM deployment is deprecated. |
| Is it possible to use same server where Pega is deployed as Constellation server in on prem deployment? | Docker images are provided for on-prem deployment. See https://documents.constellation.pega.io/static/88/constellation-appstatic-service-docker.html. |
| Does Constellation need an additional server to be configured? What are the changes expected to an existing on premise client set up? | Constellation architecture includes a front-end service and static content server. It is automatically configured for customers in Pega Cloud. For on-prem customers, containerized images can be downloaded. |
| 23.1 Constellation is a separate image. How does the cache management synchronize between the nodes. Also, are there any hardware recommendations needed if we start using Pega Constellation? | Described here https://docs.pega.com/bundle/platform/page/platform/user-experience/constellation-service.html, the Constellation UI service is managed for you for Pega Cloud customers. For On Prem customers, it can be downloaded as a container image and deployed in your environment. |
| What happens when the UI service goes down? | For Pega Cloud customers, the UI service is managed for you, with redundancy built in. For on-prem customers, the Constellation UI service can be downloaded as image and deployed in your environment. Constellation UI service must be running for Constellation applications to render. |
| Having the UI Service separate, does it not come under same cluster as Pega backend server with all the nodes configured ? How does load balancer come into play here? | See https://docs.pega.com/bundle/platform-241/page/platform/user-experience/constellation-service.html. |
Debugging
| Question | Answer |
|---|---|
| Can we use Trace open rule from Constellation? | Yes. See https://docs.pega.com/bundle/platform/page/platform/user-experience/debugging-UI.html. You can use Trace Open Rule on the Service rule of the DX API operation you are calling. The default tracer also categorizes the server-side events by each DX API operation that they are servicing. |
| Are these built-in debug tools or should we install them separately? Clients may have restrictions to install additional tools. | React Developer Tools, built by Meta, is available as a Chrome extension. Same with Redux Developer Tools. Chrome Developer tools is built in to Chrome. Tracer is part of Pega. Other Pega-supported browsers have Developer Tools built-in as well. |
Modernization
| Question | Answer |
|---|---|
| Is there any automated migration path provided by Pega from UI Kit to Constellation or it would be complete rewrite if customer wants to change current UI to Constellation? | Pega is working on a tool that will help you to modernize your application and migrate from Traditional UI to Constellation UI. This tool is under early adopter program and would be available to all developers in Q3 or Q4 of 2024. In the meantime, the recommendation is to learn more about Constellation UI by building new app on Constellation UI or using the blended mode and creating a new case type on Constellation. See https://docs.pega.com/bundle/platform/page/platform/user-experience/blending-traditional-constellation-uis.html |
| Can you please provide Community links to migrate to UI constellation from UI Kit? | First, be sure to understand Constellation via enablement like the Constellation Adoption Mission on the Pega Academy. Then, watch the Pega Marketplace; in Q3 or Q4 2024, the tooling to help you migrate will be available there. We will announce it in other places, too. |
| Are the other strategic applications such as FS and Insurance moving to Constellation in upcoming Pega releases? | Yes. Many strategic apps we ship have a roadmap to Constellation adoption. Work through your Pega Account team to understand the Constellation roadmap for those products. |
| If we want to implement Constellation UI for an application which uses Web Kit, the only option is to rebuild the application from scratch in Constellation UI. Is that correct? | Pega is working on some tooling that will ease the migration and will help you to modernize your application running on UI-Kit to Constellation UI. This tool is expected to be available towards the end of the year |
| Can we get a preview into the modernization tool, and see if its a fitment for the client? | There will be more communication including likely an LSA webinar once the tool is available. Right now, the recommendation is to learn more what Constellation UI can deliver by creating new apps on Constellation UI or using the blended mode and creating a new case type with Constellation. |