Skip to main content

Designing Views with Constellation

4 Tasks

30 mins

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

Scenario

Sweet Life Inc. (SL) wants to replace its legacy complaint management solution. SL has engaged Pega to develop an application called Tell Us More, which can allow Sweet Life to learn more about how its customers perceive their products and services.

The Tell Us More application will be built over an Enterprise Layer that has already been configured for Sweet Life. The Tell Us More application currently consists of three Case Types:

  • Incident: Allows users and Case workers to track customer issues and initiates Sweet Life's response to their customers. Incident is the primary Case Type associated with the Tell Us More application. 
  • Process Payment: Supports payment processing when the resolution of an Incident Case involves a refund or compensation.
  • Ship Parcel: Supports package shipment when the resolution of an Incident involves the replacement of a faulty or broken product or the delivery of a gift.

Sweet Life decides to build its Tell Us More application by using the Pega Constellation architecture. You are a member of the team of System Architects who work to configure the UI of the application with Constellation and add missing pieces to the Data Model and application logic as needed to produce an MLP1 solution.

At this point in the application development process, the team focuses on the Incident Case Type. As a System Architect on the Sweet Life application project, your challenge is to configure the Determine Category View that is associated with the Determine Incident Type Step of the Create Stage.

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 Review the Dictionary data object

  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 Data to see the list of data objects built for the Tell Us More application.
  3. Click the Dictionary data object.
  4. Click the Records tab, and then review the available records.
    Note the relationship between the records for Incident Type and Incident SubType.
    The Records tab with the parent/child relationship.

2 Add fields to the Incident Case Type Data Model

  1. In the navigation pane of App Studio, click Case Types > Incident to open the Incident Case Type.
  2. Click the Data Model tab to open the Incident Case Type Data Model.
  3. Click Add field to add a new to the Data Model:
    1. In the Field name field, enter Incident Type.
    2. In the Type list, select Picklist.
    3. In the Display as list, select Drop-down list.
    4. In the Picklist options list, select Data Page.
    5. In the list that is displayed, select Dictionary >  List Dictionary Filtered to configure the Data Page source.
    6. In the Data view parameters section, to the right of the Constant value, enter IncidentType.
    7. Leave the value for the ParentKey constant empty.
    8. In the Identifier field and Display field lists, select Key
    9. Click Submit & add another.
      Configuration for the Incident Type field.
  4. Configure another field for the Data Model:
    1. In the Field name field, enter Incident SubType.
    2. In the Type list, select Picklist.
    3. In the Display as list, select Drop-down list.
    4. In the Picklist options list, select Data Page.
    5. In the list that is displayed, select Dictionary >  List Dictionary Filtered to configure the Data Page source.
    6. In the Data view parameters section, to the right of the Constant value, enter IncidentSubType.
    7. In the ParentKey list, select Field, and then enter or select Incident Type as the value.
    8. In the Identifier field and Display field lists, select Key.
    9. Click Submit.
      Add Incident SubType field.
  5. Click Save.

3 Configure the Determine Category View

  1. In the Incident Case Type, click the UX tab.
  2. In the pane on the right, click the Other Views tab, and then click Determine Category.
    Determine the category view on the Other View tab.
  3. In the Fields section, click Add, and then click Fields.
  4. In the list of available fields, select the Incident SubType and Incident Type checkboxes, and then click Add.
    The active selection for the Incident Type and Incident SubType fields.
  5. Click the handle for the Incident Type field, and then drag it above the Incident SubType field.
    The Incident Type and Incident SubType fields added to the Determine Category View
  6. To the right of the Incident Type field, click the Gear icon to open the Configure field: Incident Type window: 
    1. Confirm that the configuration of the Display as field is Dropdown.
    2. In the Conditions section, in the Required field, select Always
    3. Click Save.
  7. To the right of the Incident SubType field, click the Gear icon to open the Configure field: Incident SubType window:
    1. Confirm that the configuration Display as field is Dropdown.
    2. In the Conditions section, in the Required field, select Always
    3. In the Visibility section, select Custom Condition
    4. To the right of Custom Condition, click the Gear icon, and then create a Condition where Incident Type is not null.
      Condition builder for Incident Type
    5. Click Submit, and then click Save.
Note: Constellation automatically saves changes to Views when the changes are submitted. Real-time changes to the View are displayed in the Preview pane of the Edit View window.

4 Configure user instructions and helper text

  1. In the Edit View: Determine Category window, in the Instructions list, select Override Case Step instructions.
  2. In the Instruction text field, enter Please select type and subtype of your incident.
    Instruction override on Determine Category view
  3. To the right of the Incident Type field, click the Gear icon to configure the text for the field:
    1. In the Helper text field, enter Select category of your incident. Is it related to a purchased product or requested service?
    2. Click Save.
  4. To the right of the Incident SubType field, click the Gear icon to configure the text for the field:
    1. In the Helper text field enter Choosing the proper subtype allows for faster incident resolution.
    2. Click Save.
  5. Click Save to save your work.

Confirm your work

  1. In the header of App Studio, click Preview.
    Preview button
  2. In the navigation pane of the Web Portal, click Create > Incident to create an Incident Case.
    Create Incident case
    Tip: Open the Network tab of your browser's DevTools. Here, you will be able to observe the validation processing locally. No network traffic will be generated when the validation on Incident Type is performed. DX API calls are made on-demand to gather data for the Incident SubType drop-down lists.
  3. Click Next, and confirm you see an error message indicating that the Incident Type cannot be blank.
    Determine incident type View shows an error for Incident type field
  4. Select a value for the Incident Type field.
  5. Confirm that the Incident SubType field is displayed.
    Determine incident type view with Incident SubType field displayed
  6. Select a value for the Incident SubType field, and then click Next

 


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