Creating field groups in Constellation Views

6 Tasks

35 mins

Pega Platform '23

Pega Platform '24.2

Visible to: All users

Intermediate

Pega Platform '23

User Experience

Constellation

English

Scenario

Important aspects of the UI configuration for the Tell Us More application from Sweet Life Inc. are field groups and the Search and select pattern for navigating product list information. As a System Architect on the Sweet Life application project, you are tasked with configuring the Service Details and Product Details Views that incorporate these UI features.

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 Add fields to the Data Model of the Incident Case Type

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 Data Model tab.
4. Add the following fields to the Data Model:

   Name	Type	Picklist options	Choices
   What happened?	Text (paragraph)	Not applicable	Not applicable
   When did this happen?	Date only	Not applicable	Not applicable
   Communication channel	Picklist	Local	In person, Email, Phone, and Postal

5. Click Save.

2 Configure a field group and Validation in the Service Details View

1. In the Incident Case Type, click the Workflow tab.
2. Click the Service Issue Step to open the contextual properties pane on the right.  
3. Click Configure View to open the Edit View: Service Details window.
4. In the Fields section, click Add > Fields > Communication channel > Add to add the field to the View.
5. Click Add, and then click Create Field Group.
   
   Note: Field groups are unique to the View in which they are created. For more information about field groups, see Configuring field groups.
6. In the New field group window, enter the following information:
   1. In the Heading field, enter Incident details.
   2. In the Instructions list, select Show instructions.
   3. In the Instructions text field, enter Please answer the questions below.
   4. Click Submit.
      
7. In the Incident details field group row, click the Add icon.
   
8. Click Fields, select the What happened? and When did this happen? checkboxes, and then click Add.
   
9. To the right of Communication channel, click the Gear icon to display the Configure field window.
10. In the Conditions section, in the Required field, select Always, and then click Save.
11. Repeat Steps 9-10 for the What happened? and When did this happen? fields.
12. In the Service Details window, click the Conditions tab.
    
13. Click Add condition, and then in the Message field, enter The date must be in the past.
14. Create a Condition that states When did this happen? is after Today, and then click Submit.
    
    Note: For more information about building a custom Condition, see Defining Conditions in the Condition builder.
15. Click Save.

3 Configure the field groups for the Product Details View

1. In the Incident Case Type, click the UX tab.
2. Click the Other Views tab, and then in the Form section, click the Product Details View.
3. Click Add > Create field group to create a new field group with the following details:
   1. In the Heading field, enter Select product.
   2. In the Instructions list, select Show instructions.
   3. In the Instruction text field, enter Please select the product that was involved in the incident.
   4. Click Submit.
      
4. Repeat step 3 to create a new field group with the following details:
   1. In the Heading field, enter Incident details.
   2. In the Instructions list, select Show instructions.
   3. In the Instruction text field, enter Please answer all of the questions below.
   4. Click Submit.

Tip: This Incident details field group is unique to the Product Details View and is not related to the Incident details field group created for the Service Details View in Task 2 of this challenge.

4 Configure the Select Product field group

1. In the Select product field group row, click Add, and then click Fields > Create new field.
2. Create a new field with the following details:
   1. In the Name field, enter Product.
   2. In the Type list, select Data Reference.
   3. In the Data object list, select Product.
   4. In the Options section, select Single record.
   5. Expand the Advanced section, and then select the Reference data is copied to the Case checkbox.
   6. In the Data Page list, select Product.
   7. Click Submit.
      
3. Click the Product field.
   
4.  In the Edit field: Product window, in the Input settings section, configure the following details:
   1. In the Data Page field, select List Product.
   2. In the Mode field, select Single-select.
   3. In the Display as field, select Table.
   4. In the Display field, select Name.
   5. In the Columns section, add the following columns to the view:
      • Name
      • SKU
      • Category Name
   6. Select the Enable search checkbox.
   7. In the Search fields section, add the following fields to the view:
      • Name
      • SKU
      • Category Name
   8. Click Back to return to the Product Details View.
      
5. Add the Cost field to the Product data object:
   1. In the Select Product field group row, click Add.
   2. Click Fields > Product > Fields > Cost.
      Note: Click the arrow located to the right of a data object to access the associated fields and Views.

      
6. In the Select product field group row, click Add, and then click Fields > Create new field.
7. Create a new field with the following details:
   1. In the Name field, enter Picture.
   2. In the Type field, select Attachment.
   3. In the Attachment category field, enter Picture.
   4. In the Type field, select Single record.
   5. Click Submit.
      
8. In the Picture field row, click the Gear icon. 
9. In the Configure field: Picture window, complete the following details:
   1. In the Label value field, enter Proof.
   2. In the Helper text field, enter Please attach proof of issue.
      
   3. Click Save.
      The following figure shows the configuration of the Select product field group:
      

5 Configure the Incident details field group

1. In the Incident details field group row, click Add.
2. Click Fields, select the What happened? and When did this happen? checkboxes, and then click Add.
   

6 Configure Validation on the Product Details View

1. In the Incident Case Type, click the Workflow tab.
2. Click the Product Issue Step to open the contextual properties pane on the right.
3. Click Configure View to open the Edit View: Product Details window.
4. In the Edit View: Product Details window, click the Conditions tab.
5. Click Add Condition.
6. Complete the following steps to create the conditional Validation:
   1. In the Message field, enter The date must be in the past.
   2. Create a Condition that states When did this happen? is after Today.
   3. Click Submit.
      
7. Click Save.

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 Customer service issue, and then select an Incident SubType. Click Next.
4. Review the content of the Service Issue View, specifically noting the contents of the Incident details field group. 
   
5. In the When did this happen? field, enter a date that is in the future. Confirm that you receive error messages for the required fields and the incorrect date.
   
6. Cancel out of the existing Case and create a new Incident Case. 
7. In the Incident Type field, select Product faulty or unsafe, and then select an Incident SubType. Click Next.
8. Review the content of the Product Issue View, specifically noting the contents of the Select product and Incident details field groups.
9. To confirm that the Search and select pattern is working for the Product list, in the Category Name field, enter Lollipops,  and then click Search.
10. Still in the Select product section, click Clear, then in the Category Name field, enter Cookies and click Search.

---

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

• Fundamental concepts of Constellation v1

---

Available in the following mission:

• Constellation Adoption v1