Skip to main content

Blending Traditional UI and Constellation

5 Tasks

30 mins

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

Scenario

The  Tell Us More application and Instance 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

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

Role User name Password
System Architect Author@SL pega123!
Note: Your practice environment may support the completion of multiple challenges. As a result, the configuration shown in the challenge walkthrough may not match your environment exactly.
Note:  The challenge walkthrough video is coming soon.

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 Pega instance for the challenge, enter the following credentials:
    1. In the User name field, enter Author@SL.
    2. In the Password field, enter pega123!
  2. Switch to Dev Studio.
  3. In the header of Dev Studio, click Application: Tell Us More > Definition.
  4. On the Definition tab, click Add application, and then add ProConfig 01.01.01 as a built-on application.
    Add ProConfig 01.01.01 as a built on application.
  5. Click the Cases & data tab.
  6. 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 column, enter SL-ProConfig-Work-CreateProduct.
      Adding the Create Product Case Type to the Tell Us More application Definition.
  7. Click Save.
  8. In the search box, search for the pyEnableTraditionalUICoexistence When Rule.
  9. In the pyEnableTraditionalUICoexistence Rule, click Save As.
  10. In the Context section, select SL Ent > Apply to @baseclass > Add to Ruleset Ent > Ruleset Version 01-01-02.
    Image showing SL Ent, @baseclass, Ent and 01-01-02 selected in the When Record configuration
  11. Click Create and open.
  12. On the Advanced tab, modify or confirm the Expression so that it evaluates to true.
    Image showing the expression true = true
  13. Click Save.
  14. Switch to App Studio.

2 Generate the Traditional UI in Constellation assets

  1. In the navigation pane of App Studio, click Settings > Traditional UI in Constellation.
    Traditional UI in Constellation path.
  2. Click Generate assets.
    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 > Create Product.
    5. Click Save.
      Traditional UI in Constellation
      Note: If you fail to generate assets, repeat step 3 but in the Application Skin list, select CosmosSkin. All of the other information remains the same.
  4. Confirm that the wizard has completed the configuration, and then click Done.
    Generating assets completion
    Connected Traditional UI application confirmation

 

3 Refresh the routing table in Dev Studio

  1. Switch to Dev Studio.
  2. Open the Tell Us More Application Definition.
  3. On the Definition tab, scrolling down to the Advanced section, click Generate routing table.
    Generate routing table
  4. Click Save.

4 Add Create Product Case Type to the Portal

  1. Switch to App Studio, and then in the navigation pane, click Channels.
  2. In the Current Channel interfaces section, open the Portal Channel.
    channels open portal
  3. In the Main navigation window, in the Create menu section, add the Create Product Case Type.
  4. Click Save.
Note: In the Create Menu Section, if Add Case Type does not show Create Product Case Type, log out and log back in again.

5 Add a Constellation application to Theme Cosmos

  1. Switch to Dev Studio, and then click Configure > Org & Security > Organization > Operators.
  2. Open the Author@SL operator profile.
  3. In the Application Access section, add the TrackIT:Authors Access Group.
    TrackIt Access group added
  4. Click Save.
  5. In the header of Dev Studio, click Application: Tell Us More > Switch Application > TrackIT.
    Switch application to TrackIT
  6. Open the TrackIT Application Definition in Dev Studio.
  7. Confirm that Shipment is listed as a built-on application.
    Built on applications
  8. Click the Cases & data tab.
  9. 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 column, enter SL-Shipment-Work-ShipParcel.
      Add Case type ship
  10. Click Save.
  11. In the Case Types navigation menu, click Refresh Case Types and confirm Ship Parcel appears in the list.
    Image showing the Refresh case types menu option in the case type navigation pane
  12. Switch to App Studio.

Confirm your work

  1. In App Studio, click Preview. 
  2. In the Create menu, open the Ship Parcel Case.
    Image showing the ship parcel case type present in the create menu
  3. Confirm that the Ship Parcel Case opens on the Schedule deliver Task. The Traditional UI of the TrackIT User Portal is blended with the Constellation UI of the Ship Parcel Case. Note the behavior and style of the Case Status chevron Widgets and the appearance of the navigation pane.
    Confirm ship parcel
  4. Click Exit Preview to return to App Studio. 
  5. In App Studio, switch to the Tell Us More application and click Preview.
  6. In the navigation pane of the application, create a new Create Product Case.
    Image showing the Create Product case type in the Create new case menu
  7. Create a new product. The Constellation UI of the Tell Us More User Portal is blended with the Traditional UI of the Create Product Case. Note the altered style and behavior of the Case Status chevron widgets and the outer UI elements.
    Create new product
    Traditional UI
  8. Click Create and then click Approve to submit and approve the new product.
  9. Click Exit Preview to return to App Studio. 
  10. In the navigation pane of App Studio, click Data > Product > Records, and then confirm your new product is included.
    Image showing Constellation Cookies as a data record

This Challenge is to practice what you learned in the following Module:

Available in the following mission:

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

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

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