Constellation Flexible UI

Kamil_Janeczek · August 1, 2024, 5:52am

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:

https://players.brightcove.net/1519050010001/default_default/index.html?videoId=6369959052112

This post will be updated with links to new articles being published. Topics that I plan to cover:

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
Migration to Pega SDK - Migrating Sweet Life from Pega Constellation SDK 23 to 25

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

KOMARINA · November 28, 2024, 3:08pm

@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

Kamil_Janeczek · November 28, 2024, 3:17pm

@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.

Kamil_Janeczek · November 29, 2024, 8:28am

@KOMARINA definitely please change to point it to your Infinity server

Kamil_Janeczek · November 29, 2024, 8:39am

One thing that might be required to configure if you experience CORS issue is to add couple of allowed headers.

PreranaJ17243477 · April 23, 2025, 11:21am

Hi @Kamil Janeczek

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?

Vivek.K · May 15, 2025, 7:26pm

@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:

In the SDK package, can we leverage case type functionalities across multiple pages when using embed mode(without page reload)?
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?
When bootstrap-shell.js get called and how does it trigger the SDK embed portal?

KOMARINA · November 28, 2024, 4:02pm

@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

github.com/kamiljaneczek/Sweet-Life-Pega

src/app/contact.tsx

1ddc639f2


      
          const Contact = () => {
            const [caseID, setCaseID] = useState('');
            const [email, setEmail] = useState('');
            const [subject, setSubject] = useState('');
            const [message, setMessage] = useState('');
            const isPegaReady = useConstellation();
          
            function createInquiryCase() {
              let token = '';
              (async () => {
                const responseToken = await fetch('https://lab0339.lab.pega.com/prweb/PRRestService/oauth2/v1/token', {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    Authorization: `custom-bearer`
                  },
                  body: 'client_id=11351708984521870813&grant_type=custom-bearer&enable_psyncId=true'
                });
                const dataToken = await responseToken.json();
          
                console.log('token: ', dataToken.access_token);

i am assuming i should be changing all these manually to my Infinity Server URL?

Regards,

Bharat

KOMARINA · November 29, 2024, 9:48am

@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

Kamil_Janeczek · April 23, 2025, 11:37am

@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

PreranaJ17243477 · April 23, 2025, 12:20pm

@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

PreranaJ17243477 · May 7, 2025, 12:15pm

@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.

Kamil_Janeczek · May 7, 2025, 12:43pm

@PreranaJ17243477Thanks for clarification. Please create new Question for this particular issue that you have.

Kamil_Janeczek · November 29, 2024, 12:55pm

@KOMARINA this is not that much about ReactSDK but generally React Router thing, you shall be able to achive it.

Kamil_Janeczek · May 6, 2025, 7:58am

@PreranaJ17243477 I would need some more info to understand what happened. Can you take a look into Network tab of the browser?

PreranaJ17243477 · May 6, 2025, 11:59am

@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”:
}
]
}

Kamil_Janeczek · May 7, 2025, 11:45am

@PreranaJ17243477hi, can you please give me a bigger picture? What you try to achieve and how errors you get relate to SDKs?

PreranaJ17243477 · May 6, 2025, 6:49am

@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

Conversation		Replies	Views
UI choices with Constellation architecture General constellation , lead-system-architect , other-industry , 24-2	0	688	August 12, 2024
Integrating with ConstellationJS via SDK General constellation , lead-system-architect , other-industry , 24-2	0	500	August 14, 2024
Using Constellation SDK to render pega case type UI in an external/existing Angular application User Experience constellation	2	9	March 21, 2026
Constellation hands-on User Experience constellation , lead-system-architect , cross-industry	74	7381	August 11, 2025
Constellation- Ask your Questions! General pega-platform , constellation , 24-2	93	2753	January 8, 2026

Constellation Flexible UI

Related topics