Skip to main content

Blending Traditional UI and Constellation

5 Tasks

30 mins

Visible to: All users Applies to: Pega Platform '26
Intermediate
User Experience
Constellation
Low-Code App Development
English

Scenario

The Tell Us More application and Incident Case Type is not Sweet Life's first project with Pega Platform™. Sweet Life management wants to consolidate work from existing Pega applications to improve efficiency for their employees. The following table provides information on the existing applications in Sweet Life's portfolio:

Application Name UI Architecture Application Purpose

Tell Us More

Constellation Customer needs and incident management.

ProConfig

Traditional UI New product configuration.

TrackIT

Traditional UI Schedule and escalate deliveries.

Shipment

Constellation Schedule and process deliveries.

In this challenge, you are tasked with blending Sweet Life's Traditional UI and Constellation applications so that they can seamlessly work together. In Tell Us More, you will implement the Create Product Case Type from the ProConfig application. In TrackIT, you will implement the Ship Parcel Case Type from the Shipment application.

To assist you in identifying the difference between the two UI architectures, a Senior System Architect has provided review materials in the following tables:

Recognizing Portals in Traditional UI and Constellation
Traditional UI Traditional UI Constellation
Image showing the navigation menu of the Traditional UI TrackIT application
Image showing the Traditional UI navigation pane collapsed
Image showing the Constellation UI navigation pane of the Tell Us More application

Expanded Navigation Pane

(Create menu embedded)

Collapsed Navigation Pane

Navigation Pane

(Create menu pops out)

Identifying Traditional UI and Constellation Case Status chevron widgets
Traditional UI Constellation
Image showing Case Status chevron widgets for Traditional UI
Image showing Case Status chevron widgets in Constellation UI
Note: This challenge has been configured with Single sign-on (SSO) using your Pega Academy credentials. If you are not automatically signed-in to the challenge environment after initializing the instance, you may use the credentials provided.

The following table provides the credentials you need to complete the challenge:

Role User name Password
System Architect Author@SL pega123!

You must initiate your own Pega instance to complete this Challenge.

Initialization may take up to 5 minutes so please be patient.

Detailed Tasks

1 Add the Create Product Case Type to the Tell Us More application

  1. In the top-left application switcher, click Tell Us More, and then click View Application Rule.
  2. On the Definition tab, in the Built-on applications section, click Add application, and then add ProConfig version 01.01.01.
    Definition tab of the Tell Us More Application rule with ProConfig 01.01.01 added to the Built-on applications list
  3. Click the Cases & data tab.
  4. In the Case Types section, click Add item, and then add a Case Type:
    1. Select the checkbox for the row.
    2. In the Name column, enter CreateProduct.
    3. In the Work ID prefix column, enter C-.
    4. In the Implementation class column, enter SL-ProConfig-Work-CreateProduct.
      Cases and Data tab of the Tell Us More Application rule with the CreateProduct Case Type, Work ID prefix C-, and implementation class SL-ProConfig-Work-CreateProduct
      Note: If ProConfig does not appear in the Implementation class dropdown, log out and then log back in.
    5. Click Save.
  5. In the Search field, search for the pyEnableTraditionalUICoexistence When rule.
    Advanced tab of the pyEnableTraditionalUICoexistence When rule in the Pega-EndUserUI ruleset with the condition true = true
    Note: If the pyEnableTraditionalUICoexistence When Rule is not displayed in the search results, open it from the navigation pane. Click App, and then on the Classes tab, enter @baseclass and expand Decision > When.
  6. Click Save as, and complete the Context section: apply to @baseclass, add to Ruleset Ent version 01-01-02 in the SL Ent context.
  7. Click Create and open.
  8. On the Advanced tab, modify or confirm the Expression so that it evaluates to true.
    Advanced tab of the pyEnableTraditionalUICoexistence When rule saved in the Ent:01-01-02 ruleset with the condition true = true
  9. Click Save.

2 Generate the Traditional UI in Constellation assets

  1. In the application switcher menu, click Settings, and then click Traditional UI in Constellation.
    The Tell Us More application switcher menu with the Settings submenu open and the Traditional UI in Constellation option
  2. Click Generate assets.
    Traditional UI in Constellation page with no application selected and the Generate assets button
  3. Complete the Traditional UI in Constellation wizard:
    1. In the Application list, select ProConfig.
    2. In the Application Version list, select 01.01.01.
    3. In the Application Skin list, select ProConfig.
    4. In the Case types section, click Add, and then select Create Product.
    5. Click Save.
      Traditional UI in Constellation page with Application ProConfig, Application Version 01.01.01, Application Skin ProConfig, and the Create Product Case Type selected
    Note: If asset generation fails, repeat this step but select the CosmosSkin application skin.
  4. Confirm that the wizard completed the configuration, and then click Done.
    Generating assets dialog confirming that the assets have been generated, with the Done button

3 Refresh the routing table

  1. Open the Application Definition (Tell Us More > View Application Rule).
  2. On the Definition tab, scroll to Advanced, and then click Generate or update routing table.
    The UI Runtime part of the Advanced section with the Modern UI technology option selected and the Generate or update routing table button
  3. Click Save.

4 Add Create Product Case Type to the Portal

  1. In the navigation pane, click Channels, and then open the Portal.
  2. Click the Portal navigation tab.
  3. In the Create menu section, click Add case type, and then add Create Product.
    Create menu section of the Portal navigation tab listing Incident, Research, and Create Product
  4. Click Save.
Note: If Create Product does not appear, log out and then log back in.

5 Add a Constellation application to Theme Cosmos

  1. Open the Author@SL operator:
    1. In the header, click Configure > Org & Security > Organization > Operators.
    2. In the Search Text field, enter Author@SL, and then click Search.
    3. In the search results, click Author@SL.
  2. In the Application Access section, add the TrackIT:Authors Access Group.
    The Application Access section of the Author@SL operator with the TrackIT:Authors access group for the TrackIT 01.01.01 application
  3. Click Save.
  4. In the application switcher menu, click Switch Application, and then select TrackIT.
  5. Open the TrackIT Application Definition:
    1. In the studio switcher, click App Studio, and then click Infinity Studio.
    2. In the application switcher, click TrackIT, and then click View Application Rule.
  6. Confirm that Shipment is listed as a built-on application.
    Built-on applications list of the TrackIT Application rule with Theme-Cosmos 04.01 and Shipment 01.01.01
  7. Click the Cases & data tab.
  8. In the Case Types section, click Add item, and then add a Case Type:
    1. Select the checkbox for the row.
    2. In the Name column, enter Ship.
    3. In the Work ID prefix column, enter S-.
    4. In the Implementation class column, enter SL-Shipment-Work-ShipParcel.
      Cases and Data tab of the TrackIT Application rule with the Ship Case Type, Work ID prefix S-, and implementation class SL-Shipment-Work-ShipParcel
  9. Click Save.
  10. In the Case Types pane, click the More icon, click Refresh, and then confirm that Ship Parcel is listed.
    The Case Types pane of the TrackIT application listing Escalate delivery, External delivery, and Ship Parcel


Available in the following mission:

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice