Skip to main content

Designing complex Views with Constellation

5 Tasks

45 mins

 Pega Platform '23 Visible to: All users
Intermediate Pega Platform '23 User Experience Constellation English

Scenario

Your work on the Tell Us More application continues. In this challenge, you use Constellation to build Views associated with the Eligibility Check and Handle Ticket Steps. You will configure several partial Views, conditional Visibility, and custom routing.

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 Create field groups in the Eligibility check View

  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. Click the UX tab.
  4. Click the Other Views tab, and then open the Eligibility check View.
  5. Create three field groups in the Eligibility check View:
    Heading Collapsible
    Review Yes
    Eligibility decision No
    Dispatching No
    The Eligibility Check View with field groups added.
  6. In the Review field group, click Add to add the Review Inner View.
  7. In the Review Inner View row, click the Gear icon to configure the View, clear the Show heading checkbox, and then click Save.
  8. In the Eligibility decision field group, click Add to add the Eligibility Type field.
  9. In the Eligibility Type field row, click the Gear icon to configure the field:
    1. In the Display as list, select Radio buttons.
    2. In the Field Label field, enter Eligibility.
    3. Select the Horizontal display checkbox.
    4. In the Helper text field, enter Identify if the incident is eligible for further processing.
    5. Click Save.
      The Eligibility Type field configurations.

2 Configure partial Views for the Eligibility decision field group

  1. On the Other Views tab, create two new partial Views:
    Name Template
    Eligibility Info Accept Details (One column)
    Eligibility Info Reject Details (One column)
  2. In the Form section of the Other Views page, open the Eligibility check View.
  3. In the Eligibility decision field group, click Add, and then add the Eligibility Info Accept and Eligibility Info Reject partial Views.
  4. Click Eligibility Info Accept to open the partial View.
  5. Add the Eligibility Info Accept field.
  6. In the Eligibility Info Accept field row, click the Gear icon to configure the field:
    1. In the Field label field, enter Next action.
    2. In the Edit mode list, select Read-only.
    3. Click Save.
      Configuration for the Eligibility Info Accept field.
  7. Repeat steps 4-6 for the Eligibility Info Reject partial View by adding the Eligibility Info Reject field and configuring the field as detailed.
  8. Return to the Edit View: Eligibility check window.
  9. In the Eligibility Info Accept partial View row, click the Gear icon and then configure the View as follows:
    1. Clear the Show heading checkbox.
    2. In the Visibility list, select Custom Condition.
    3. Configure the following custom Condition: Eligibility Type is equal to "Eligible".
    4. Click Submit, and then click Save.
      Configuration for the Eligibility Info Accept View.
  10. In the Eligibility Info Reject View row, click the Gear icon, and then configure the View:
    1. Clear the Show heading checkbox.
    2. In the Visibility list, select Custom Condition.
    3. Configure the following custom Condition: Eligibility Type is in list "Scam, Spam, Not eligible, Missing details".
    4. Click Submit, and then click Save.
      Configuration for the Eligibility Info Reject View.

3 Update the display headers for Eligibility Info Partial Views

  1. Switch to Dev Studio.
  2. In the App Explorer, in the SL-TellUsMore-Work-Incident class, open the pyDefault Data Transform.
  3. In the pyDefault Data Transform, configure the following rows:
    1. Create a set action with a .EligibilityInfoAccept target with a source equal to "Incident will be approved for further processing".
    2. Create a set action with a .EligibilityInfoReject target with a source equal to "Incident will be rejected".
    3. Click Save.
      The pyDefault data transform showing eligibility info accept and reject targets.

4 Configure the Dispatch field group

  1. Switch to App Studio, and then return to the Edit View: Eligibility Check window.
  2. In the Dispatching field group, click Add, and then add the Dispatch Incident View.
  3. In the Dispatch Incident View row, click the Gear icon, and then clear the Show heading checkbox.
  4. Click Save.
    Edit View: Eligibility Check.

5 Modify the Handle ticket View and routing

  1. On the Other Views tab, in the Form section, open the Handle ticket View.
  2. Create two field groups in the Handle ticket View:
    Heading Collapsible
    Incident Info Yes
    Incident Resolution No
    Edit View: Handle ticket.
  3. In the Incident Info field group, click Add to add Review Inner View.
  4. In the Review Inner View row, click the Gear icon, and then clear the Show heading checkbox.
  5. In the Incident Resolution field group, add two fields with the following configurations:
    1. Add the PreferredResolutionMethod field, and then configure it as Read-only.
    2. Add the ResolutionMethod field.
      The full configuration of the Handle ticket View.
  6. Switch to Dev Studio, and then open the Incident Case Type.
  7. Click on the Handle Ticket Step to open the contextual properties pane.
  8. In the properties pane, in the General tab, set up the following routing configuration:
    1. In the Route to list, select Custom.
    2. In the Assignment type list, select Work Queue.
    3. In the Router field, enter or select ToRouteToOverwrite.
      Router is set to ToRouteToOverwrite
      Note: At this time, it is not possible to set up custom routing in App Studio. Making this change in Dev Studio prevents you from making further changes to the assignment routing in App Studio.
    4. Click Save
  9. Switch to App Studio.
  10. Open the Incident Case Type, and then click Actions > Refresh.
  11. Save your work.

Confirm your work

  1. In the header of App Studio, click Preview.
  2. Create a new Incident Case.
  3. In the Incident Type field, select Product faulty or unsafe, and then enter information as needed to proceed to the Eligibility check Assignment.
  4. Click the arrow to the left of the Review field group to confirm that it is collapsible.
    Highlighting the arrow next to the review field group.
  5. Select an eligibility type of Eligible, overwrite the Assignment, and then adjust the urgency level.
    Run eligibility check view at runtime
  6. Click Submit.
  7. Proceed to the Handle Ticket Assignment.
  8. Click the arrow to the left of the Incident info field group to confirm that it is collapsible.
  9. Select a resolution method.
    Handle ticket view at runtime
  10. Create new Instance Cases to test the behavior of the application for different eligibility type selections.

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