Debugging Constellation applications

8 Tasks

1 hr 15 mins

Pega Platform '23 Visible to: All users

Intermediate Pega Platform '23 User Experience Constellation Low-Code App Development English Show more

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.

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.

• Log In

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, 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.
   
5. Note the What's next section of the Confirmation View.
   
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.
   
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.
    
11. In the JSON, find the reference to .pyWhatsNext and check which property is taken and displayed on the UI.
    

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.
3. The Research Case Type should have 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.
   
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.
   
   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.
   
4. Click Submit, then Save. 
5. Click the Preview button to open the Portal window.
6. Create a Research Case Type. In the Create-Research View, click Submit.
7. In the bottom-right corner of App Studio, open the Tracer.
   
8. Click Settings. In the EVENT TYPES TO TRACE section, scroll down and enable the View Rules. Then click OK.
   
9. Navigate back to the Portal and Submit the Debug Assignment.
10. 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.
11. Find the Views associated with the pyAddressForm.
    
12. Click the DATA-ADDRESS-POSTAL!PYADDRESSFORM link to open the JSON for the AddressForm View.
    
13. 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.
   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.
    
11. Click the Information icon next to the Address section to find the metadata related to the Address property.
    
12. Click the Information icon next to the View:pyAddressForm section to find the metadata related to the View.
    
13. Navigate back to the Console and enter $pConnect;
14. Explore the information provided in the Console related to the pyAddressForm View.
    
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.
   
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
     
   • AppAnnouncement
     
5. Switch back to Dev Studio.
6. Using the App explorer, enter Rule-UI-View.
7. From the list of Views, open the pyHome View and review the JSON data.
8. Note that the datasource for the pyHome Announcements information is driven by the D_pyAnnouncements Data Page.
9. Using the Dev Studio Search bar, open the D_pyAnnouncements Data Page.
10. In the Data Sources section, open the pyInitAnnouncements Data Transform.
11. In line 3.1, update the text in the Source field to read New authoring experience with Constellation
12. Launch a new instance of the Customer Portal. On the Home page, note that the third bullet point is updated. 
    

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.
    
   
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.
   
4. In the navigation pane, click Records > Integration-Services > Service Rest to open the Service Rest that handles data Views (URL template: data_views/{data_view_ID}).
   
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 return to the Tracer.
8. Expand Resource: /application/v2/data_views/D_pyC11nOperatorsList and search for the Automation pxGetData.
   
9. Note that the pxGetData Automation returns data related to a list data View.
   
10. Access the Tracer window and select the DataTransformEnd Event type and review the list returned as JSON.
    
11. 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.
   
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:
   • For Chrome, you can add the Redux DevTools from here: Google Chrome Store Redux DevTools
   • For Firefox, you can add the Redux DevTools from here: Firefox Redux DevTools
   • For Edge, you can add the Redux DevTools from here: Edge Redux DevTools
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.
   
   
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:

• Tools for debugging Constellation applications v1

---

Available in the following mission:

• Constellation Adoption v1