This knowledge-sharing article demonstrates a design pattern for launching a Constellation case from an existing UI-Kit case and exchanging data (and also managing process dependency) between the two cases of different UI architectures.
This blended UI pattern enables organizations with established UI-Kit applications to incrementally adopt Constellation for new case types, accelerating modernization while preserving existing investments and minimizing disruption to business operations.
Pega Infinity version used: 25.1.3 (and also verified in 26.1)
Runtime behavior
Step 1 - Launch a UI-Kit case and enter two decimal numbers that will be copied to the Constellation case later.
Click Submit.
Upon Submit, the Create case step in the UI-Kit case lifecycle creates a Constellation case behind the scene. If we go back to the My Work landing page, we can also verify that the Constellation case is created and assigned to My Worklist.
Step 2 - In the UI-Kit case > Review questionnaire step, click the following link (shown in the screenshot below) to launch the Constellation case.
The link has Click event > Open Assignment UI action defined.
Step 3 - Verify that the Constellation case is launched successfully inside the UI-Kit application.
In addition, verify that the two decimal numbers entered in the UI-Kit case are copied onto the Constellation case.
Note: The Constellation case is defined using the ‘Questionnaire’ case type.
Step 4 - Go back to the My Work landing page and open the UI-Kit case.
At this point, if you try to submit the UI-Kit case, it will throw an error message. In our use case, the Constellation case must be completed before we can proceed in the UI-Kit case. This shows that we can effectively manage the dependency between the two cases of different UI systems.
Click the link to open the Constellation case again.
Step 5 - Answer the questionnaire and resolve the Constellation case.
Notice that we updated the decimal numbers here, which will be later copied back to the UI-Kit case.
Click Next.
Enter the wrap-up comment.
Click Submit to resolve the Constellation case.
Step 6 - Go back to the My Work landing page and open the UI-Kit case.
Notice that the questionnaire answers are copied from the Constellation case to the UI-Kit case. This demonstrates that we can successfully exchange data between the two cases of different UI systems.
Step 7 - Click Submit to resolve the UI-Kit case.
How to configure
Step 1 - Define the Constellation case type in Constellation application.
For this example, we created a simple Questionnaire case type.
At runtime:
Step 2 - Add the necessary configurations in the main UI-Kit application to use the Constellation case type.
2-1) Add the Constellation application as a built-on application of the UI-Kit application.
2-2) Select the following UI Runtime configurations.
2-3) Add the Constellation case type under Cases & data.
Step 3 - Ensure that the pyEnableCoexistence When rule returns true.
Step 4 - Define a UI-Kit case type and add the Create case step in its case lifecycle to launch the Constellation case and copy data from the UI-Kit case to the Constellation case.
4-1) Select the ‘Case’ option under the ‘Create’ radio buttons and provide the Constellation case class name.
- Note: A Constellation case should not be launched as a child case of a UI-Kit case. This type of parent-child case relationship (where UI-Kit case is a parent) might not be supported in Pega Infinity 25.1.3 that unexpected glitches might occur if tried.
4-2) Select a data transform rule (“CopyToQuestionnaire”), which is used to copy the data from the UI-Kit case to the Constellation case. The detailed DT configurations are shown in Step 5.
4-3) Select a property (“QuestionnaireCaseID”) in the ‘Property to store ID of case’ field to store the new Constellation case ID in the UI-Kit case. This property will be later used to retrieve the Constellation case data from the UI-Kit case for further processing.
Step 5 - Configure the CopyToQuestionnaire data transform rule.
This DT is created in the Constellation application (not UI-Kit) and used to copy the UI-Kit case data (source) to the Constellation case (target) when launched.
Under Pages & Classes:
Step 6 - In the UI-Kit case > Review questionnaire flow action, define a pre-processing activity.
In this activity, we open the Constellation questionnaire case and copy its case data to the UI-Kit case properties. We also set the questionnaire assignment key that will be used to launch the questionnaire case assignment from the UI-Kit case.
Step 7 - In the UI-Kit case > Review questionnaire section, define the UI including a link to launch the Constellation case assignment.
The following screenshot shows the Link > Click event > Open Assignment UI action configuration. Notice that we set the QuestionnaireAssignKey in the flow action pre-processing activity above.
Step 8 - In the UI-Kit case > Review questionnaire flow action, define a post-processing activity.
This activity throws the error message if the Constellation questionnaire case is not resolved.
Additional notes
- If possible, we recommend to use the Constellation application as the main application and launch the existing UI-Kit cases inside the Constellation application.
- A Constellation case should not be launched as a child case of a UI-Kit case. This type of parent-child case relationship (where UI-Kit case is a parent) might not be supported in Pega Infinity 25.1.3 that unexpected glitches might occur if tried.
Other references (Blended UI)
Please feel free to leave any question or comment. If you have implemented any other blended UI pattern, appreciate if you can share as well.