Discussion
Pegasystems Inc.
PL
Last activity: 15 May 2025 20:15 EDT
Constellation Flexible UI
Hi and welcome to series of articles about Constellation and UI choices it offers called Constellation Flexible UI. I will share my knowledge and experience implementing new Pega UI architecture, Constellation, precisely I will concentrate on custom UI choices offered.
If you would like to know more about basics of Constellation I invite you to take a look on another series of post Constellation Hands-on. Me and my colleagues covered there a wide range of topics related to Constellation that will give you a jump start with Pega new UI capabilities. In this series of posts I assume you already have a sound understanding of Constellation.
I will start from briefly explaining architectural building blocks, discussing new parading of building apps. Then we will go into more advanced topics and see what are our options to implement custom UI utilizing Constellation. Take a look on demo of application that we will build:
- Ul choices with Constellation - https://support.pega.com/discussion/ui-choices-constellation-architecture
- Getting started with SDKs - https://support.pega.com/discussion/getting-started-sdks
- React starter pack - https://support.pega.com/discussion/react-sdk
- Preparing for development with SDKs - https://support.pega.com/discussion/preparing-development-sdks
- Refactoring sample app - https://support.pega.com/discussion/refactoring-sample-application
- Installing tech stack of choice - https://support.pega.com/discussion/installing-tech-stack-choice
- Integrating with Constellation JS via SDK - https://support.pega.com/discussion/integrating-constellationjs-sdk
- Mashup API - https://support.pega.com/discussion/mashup-api
- Overriding components - https://support.pega.com/discussion/overriding-components
- Creating Custom DX component - https://support.pega.com/discussion/creating-custom-dx-component
- Other ways to communicate with Constellation - https://support.pega.com/discussion/other-ways-communicate-constellation
- Custom authentication and security considerations - https://support.pega.com/discussion/custom-authentication-and-security-considerations
Source code available on GitHub repository: https://github.com/kamiljaneczek/Sweet-Life-Pega
11.10.2024 - Update : Demo application is not longer available. Please see recorded demo (no voice): https://www.youtube.com/watch?v=LrdKmpy3QCU
Accenture
GB
@Kamil Janeczek Hi Kamil, Greetings. Hope you are well! I am looking into run this demo app in my Pega Infinity '23 Constellation based server, i have downloaded the SDK and RAP, noticed that Client registration is set to confidential, Can you please let me know if this app can be run locally and what changes are needed?
Regards,
Bharat
Pegasystems Inc.
PL
@KOMARINA yes it can be run locally. If anything is wrong with Client Registration rule ofr in general with authentication you can recreate rules to make auth the way you need it.
Accenture
GB
@Kamil Janeczek Thank you, i also have forked the github repo locally and noticed that there is a hard-coded labs url within few tsx files, example https://github.com/kamiljaneczek/Sweet-Life-Pega/blob/1ddc639f252a77efa221de03fa19ba9d1e16ce36/src/app/contact.tsx#L22
i am assuming i should be changing all these manually to my Infinity Server URL?
Regards,
Bharat
Updated: 29 Nov 2024 7:54 EST
Pegasystems Inc.
PL
One thing that might be required to configure if you experience CORS issue is to add couple of allowed headers.
Accenture
GB
@Kamil Janeczek Thank you, Kamil. I am trying a pega case in an embedded mode and wanted to have the address bar url changed when navigating from screen, do you happen know if the current Pega ReactSDK has this feature or any solution that you can suggest?
Regards,
Bharat
Aaseya It service pvt. ltd.
IN
I have a question regarding saving data to a Data Type at runtime using an embedded property in Constellation. In my scenario, I’m trying to save a record where the ID (which is the key property for the Data Type) is included. However, the ID field appears as read-only at runtime, and I'm unable to set it dynamically.
Is there a recommended approach to set and save the key (ID) field at runtime in this case? Would appreciate your guidance on how to handle this in Constellation?
Pegasystems Inc.
PL
@PreranaJ17243477you can use savable DP but as you said this property is read-only so user will not be able to provide it manually. Solution take input on some field from the user and then programaticaly set it on DP key to save the data
Updated: 23 Apr 2025 8:21 EDT
Aaseya It service pvt. ltd.
IN
@Kamil Janeczek Thank you so much kamil. I appreciate you taking the time to respond and help clarify the approach. It helps to have that validation.
Regards, Prerana
Aaseya It service pvt. ltd.
IN
@Kamil Janeczek Hi Kamil, hope you are doing well.
Actually, I have doubt. while running one case, I'm getting some error. When I reject it, I am getting parameter id error and when I try to approve it, it is displaying "contact your system administrator". why I'm getting this kind of error and is there any solution of it
Pegasystems Inc.
PL
@PreranaJ17243477 I would need some more info to understand what happened. Can you take a look into Network tab of the browser?
Aaseya It service pvt. ltd.
IN
@Kamil Janeczek For rejection I'm getting below response with code 404 not found { "errorClassification": "Resource not found", "localizedValue": "The resource cannot be found.", "errorDetails": [ { "message": "Error_Assignment_Not_Found", "erroneousInputOutputFieldInPage": "", "erroneousInputOutputIdentifier": "", "errorClassification": "", "localizedValue": "Assignment not found for the given parameter assignmentID", "messageParameters": [] } ] } and for approval with code 500 internal server, below is the response { "errorClassification": "Execution error", "localizedValue": "Execution error.", "errorDetails": [ {
@Kamil Janeczek For rejection I'm getting below response with code 404 not found { "errorClassification": "Resource not found", "localizedValue": "The resource cannot be found.", "errorDetails": [ { "message": "Error_Assignment_Not_Found", "erroneousInputOutputFieldInPage": "", "erroneousInputOutputIdentifier": "", "errorClassification": "", "localizedValue": "Assignment not found for the given parameter assignmentID", "messageParameters": [] } ] } and for approval with code 500 internal server, below is the response { "errorClassification": "Execution error", "localizedValue": "Execution error.", "errorDetails": [ { "message": "Error_Execution_Error", "erroneousInputOutputFieldInPage": "", "erroneousInputOutputIdentifier": "", "errorClassification": "", "localizedValue": "An internal error occurred. Please contact administrator.", "messageParameters": [] } ] }
Pegasystems Inc.
PL
@PreranaJ17243477hi, can you please give me a bigger picture? What you try to achieve and how errors you get relate to SDKs?
Aaseya It service pvt. ltd.
IN
@Kamil Janeczek Hi Kamil. Actually, It's just a simple case type, not exactly SDKs. I am just trying to create a normal approval-rejection flow in case type.
Pegasystems Inc.
PL
@PreranaJ17243477Thanks for clarification. Please create new Question for this particular issue that you have.
Updated: 15 May 2025 20:15 EDT
Instellars Global Consulting Pvt. Ltd.
IN
@Kamil Janeczek Hi Kamil, Thank you for your insightful article on Constellation. I found it very informative and well-structured, and I truly appreciate the time and effort you put into sharing your knowledge.
I had a few follow-up questions that I was hoping you could help clarify:
1. In the SDK package, can we leverage case type functionalities across multiple pages when using embed mode(without page reload)? 2. In a React application, if we embed the SDK package, will the case type functionalities be available across all pages, or do we need to import the SDK package separately on each page? 3. When bootstrap-shell.js get called and how does it trigger the SDK embed portal?