Skip to main content

Debugging Constellation applications

8 Tasks

1 hr 15 mins

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

Scenario

Due to the stateless nature of a Constellation application, it is not possible to run the Pega Clipboard from the user Portal, or from Dev Studio and then switch the thread to investigate live data. As a result, it is important to become comfortable debugging Constellation applications using the Tracer tool, as well as your browser's DevTools.

Note: DevTools are programs that are included with your browser that enable you to create, test, and debug software. With the Chrome, Edge, and Firefox browsers, you can access the DevTools by pressing F12 on your keyboard.

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.

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

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

Challenge Walkthrough

Detailed Tasks

1 Access View JSON data in Dev Studio

  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. In the navigation pane of App Studio, click Case Types > Incident to open the Incident Case Type.
  3. On the Case Types UX tab, select Other Views tab, and navigate to the Confirmation Partial View.
    Note: Pega provides several out-of-the-box Views that can be used in developing Case Types. Some of these Views have unusual configurations. An example of this is the Confirmation View (ID: pyConfirm). This View is responsible for displaying information in the Assignment confirmation.
  4. Hover over the Information icon to see the View's metadata.
    Confirmation View metadata
  5. Note the What's next section of the Confirmation View.
    What's next
  6. Switch to Dev Studio.
  7. Search for the Rule named pxEnableC11nDev. ​​​​If the Rule cannot be found in the search menu of Dev Studio, click Records > Decision > When and filter the Name column by pxEnableC11nDev to locate the Rule.
  8. Open the pxEnableC11nDev Rule, continue with a Private edit, and then set the value equal to true.
    pxEnableC11N
  9. In the Search bar of Dev Studio, enter pyConfirm pxObjClass:Rule-UI-View to open the pyConfirm View.
  10. Select the pyConfirm View Rule associated with the SL-TellUsMore-Work-Incident class.
    The pyConfirm View list
  11. In the JSON, find the reference to .pyWhatsNext and check which property is taken and displayed on the UI.
    Highlighting the pyWhatsNext section on the Confirm View JSON

2 Create a Research Case Type

  1. Switch to App Studio, and in the navigation pane, click Case Types.
  2. Create a new Case Type named Research using Standard Template.
  3. In the Research Case Type, create two additional Stages: Debug and Resolve.
  4. In the Resolve Stage contextual properties pane, select Resolve the Case.
  5. In the Debug Stage, create a Collect information Step labeled Debug.
    The Research Case Type
  6. Click Save.

3 Examine View Rules using the Tracer

  1. In the Research Case Type, open the Case Type Data Model.
  2. Add a new Address field named Address.
    The Address field
    Note: By default, the Address Field Type has a default View named pyAddressForm.
  3. From the Debug Step, open the Debug View, and add the Address field to it.
    The Debug View with the Address field
  4. Click Submit, then Save
  5. Click the Preview button to open the Portal window.
  6. In the bottom-right corner of App Studio, open the Tracer.
  7. Opening the Tracer
  8. Click Settings. In the EVENT TYPES TO TRACE section, scroll down and enable the View Rules. Then click OK.
    Tracer settings
  9. Navigate back to the Portal and Submit the Debug Assignment.
  10. Navigate back to App Studio and create a Research Case Type. In the Create Research View, click Submit.
  11. Navigate back to the Tracer, expand Resource: /application/v2/assignments and search for View Start to locate the name of all the Views requested for rendering.
  12. Find the Views associated with the pyAddressForm.
    The AddressForm View located in the Tracer.
  13. Click the DATA-ADDRESS-POSTAL!PYADDRESSFORM link to open the JSON for the AddressForm View.
    The JSON associated with the AddressForm View
    Note: Alternatively, open the pyAddressForm View using the Search bar of Dev Studio.
  14. Close the Tracer tool.

4 Explore View metadata with X-Ray

Note: The X-Ray tool provides an intuitive way to debug screen issues, such as metadata, fields metadata, and state properties. X-Ray is primarily used for debugging Views and other UI controls, rather than Assignments.
  1. In App Studio, open the Research Case Type.
  2. Click the UX tab, and open the Details Partial View.
  3. Delete the Primary fields View and add the Address field to the Details Partial View.
  4. Switch to Dev Studio, and launch the Customer Portal.
  5. Create a new Research Case.
  6. Navigate to the Debug Assignment.
  7. Open the Dev Tools for your browser - likely using F12 ( for Chrome, Fire Fox, Edge)
  8. Navigate to the Console tab and clear the window.
  9. In the Dev Tools Console, enter: PCore.getDebugger().toggleXRay(true); to start the X-Ray tool.
    Devtools console
    Note: If you see the following message: PCore is not defined in the Console, it is probable that you launched the Portal from App Studio. The PCore and PConnect methods are not available in the App Studio shell. For PCore and PConnect to work, you must launch the Portal from Dev Studio.
  10. Navigate to the Details tab, and then find the Partial View that is related to the Address property.
    Details partial view
  11. Click the Information icon next to the Address section to find the metadata related to the Address property.
    Address metadata in Xray
  12. Click the Information icon next to the View:pyAddressForm section to find the metadata related to the View.
    pyaddressform metadata
  13. Navigate back to the Console and enter $pConnect;
  14. Explore the information provided in the Console related to the pyAddressForm View.
    pConnect results
  15. To stop the X-Ray tool, enter PCore.getDebugger().toggleXRay(false);

5 Examine the App Announcement Section of the Portal Home Page

  1. In the Customer Portal, navigate to the Portal Home page.
  2. Note the contents in the Announcements banner.
    Announcements banner
  3. Enable your Dev Tools (F12), and in the Console, enter PCore.getDebugger().toggleXRay(true);
  4. Investigate the metadata for the Views associated with the Tell Us More announcements, including:
    • View: pyHome
      pyHome
    • AppAnnouncement
      Appannouncement
  5. To stop the X-Ray tool, enter PCore.getDebugger().toggleXRay(false);
  6. Switch back to Dev Studio.
  7. Using the App explorer, enter Rule-UI-View.
  8. From the list of Views, open the pyHome View and review the JSON data.
  9. Note that the datasource for the pyHome Announcements information is driven by the D_pyAnnouncements Data Page.
  10. Using the Dev Studio Search bar, open the D_pyAnnouncements Data Page.
  11. In the Data Sources section, open the pyInitAnnouncements Data Transform.
  12. Update the text in the Source field to read New authoring experience with Constellation.
    Update data transform announcements
  13. Launch a new instance of the Customer Portal. On the Home page, note the updated bullet point.
    Updated announcements

6 Debug DX API calls

Note: You can collect more details about the request and response of your DX API with the DebugPegaAPI system setting. When you set the DebugPegaAPI to true, your system captures information about API errors in the PEGA log. The DebugPegaAPI system setting is particularly useful for debugging page instructions and field security errors.
  1. Switch back to App Studio. In the Research Case Type Data Model, create a field named User Reference Test with a Type of User reference.
     
    Add User reference test field
  2. Add the User Reference Test field to the Debug Step View.
  3. Switch back to Dev Studio, search for the DebugPegaAPI Dynamic System setting and set it equal to true.
    Debug the Pega API REST service DSS
  4. In the navigation pane, click Records > Integration-Services > Service Rest > data_views/{data_view_ID}). to open the Service Rest that handles data Views.
    Data views Service REST
  5. Select Actions > Trace to start tracing the service.
  6. Launch the Customer Portal and create a new Research Case.
  7. Navigate to the Debug Assignment, and in User Reference Test field, select Author@SL.
  8. Return to the Tracer.
  9. Expand Resource: /application/v2/data_views/D_pyC11nOperatorsList and search for the Automation pxGetData.
    pxgetdata-tracer
  10. Click pxGetData to open the Get list data view Automation. 
    Automation Get list data view
  11. Access the Tracer window and select the DataTransformEnd Event type and review the list returned as JSON.
    Data transform end
  12. Close the Tracer windows related to the DataTransformEnd Event type.

7 Review the Data Page cache

  1. Return to the Customer Portal and create a new Incident Case.
  2. Navigate to the Contact Info Step.
  3. Open the Developer Tools (F12), navigate to the Console tab, and enter: PCore.getDataPageUtils();
  4. Explore the Data Pages that are cached at the Contact Info Step.
    Cached data pages
  5. Close the Developer Tools window.

8 Examine React Changes with Redux Dev Tools

  1. Install the Redux-DevTools in your browser by searching for Redux DevTools, or:
  2. Open the Dev Tools (F12) and navigate to the Redux Tab.
  3. Create a new Incident Case, and navigate to the Determine Incident Type Step.
  4. Note the changes to the Action information as you fill out the form.
    Redux- nothing selected in Incident type
    Redux - Incident type selected
  5. Continue through the Incident Case and note how changes are recorded in the Redux Dev Tools.

Confirm your work

Your work has been confirmed as part of the steps in the Detailed Tasks section of this challenge.


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


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