Skip to main content

Challenge

Configuring the view of a case

4 Tasks

45 mins

Visible to all users
Intermediate Pega Platform 8.5 User Experience English

Scenario

Caseworkers who process a service request case need an optimized information architecture to understand and process the case quickly. 

Using App Studio, configure the view of a case by mapping case data into regions defined in the Cosmos template-based architecture. Further refine the information architecture of the case by creating case tabs to explore other case details.

The following table provides the credentials you need to complete the challenge.

Role User name Password
Application Developer author@mytown cosmos123!

Challenge Walkthrough

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

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

Detailed Tasks

1 Configure summary panel case details

  1. In the header of App Studio, click Preview application.
  2. In the navigation pane on the left, click Create > Service Request to create a new Service Request case.
    Use the Create menu to create a new Service Request
  3. In the new case creation modal, continue through the workflow, entering data for all fields.
  4. On the Request updates step, click Create.
    service-req-sample-data
  5. On the new case, in the header of App Studio, click Design to enable Design mode.
  6. In the Summary pane, hover over the case details section, and then click Edit this section.
    Click the pencil icon to modify the case details section of the summary panel
  7. In the configuration pane on the right, in the Additional critical details region, click the Add icon to add fields to the region.
    Click the plus icon to add a field to the region
  8. In the Add pane, in the Fields menu, click Add to view for the Issue severity and Requestor name fields.
    Tip: Click the Add icon to the right of each field to add it to the region.
    Click the plus icon to add a field to the region
  9. Close the Add pane.
    Tip: Click the X icon in the upper-left corner of the configuration pane to close open panes.
  10. Repeat steps 7-9 for the Primary case data region to add the Request date and Requestor Email fields.
    request-date-requestor-email
  11. In the configuration pane, hover over Requestor name to reveal the field drag handle.
    Drag fields to reorder
  12. Drag Requestor name and drop it above Issue severity.
    additional-critical-data-fields-reordered
  13. Hover over Requestor name, and then click the Edit icon to display the field property panel. 
    Click the pencil icon on a field to reveal the property panel
  14. On the Presentation tab, in both the Cell read-write classes and Cell read-only classes fields, enter or select the urgency-cnt out-of-the-box (OOTB) Cosmos helper class to increases the font size and font weight of the field.
    Tip: Cosmos includes many out of the box helper classes for customizing text styling.
  15. Exit Design mode to verify that the case details area of the summary pane reflects the changes in the following image.
    The completed case details area of the summary panel
    Note: In addition to the fields that you mapped into regions, notice that the case details section displays other fields by default, including Priority, Status, Created, and Updated. You can remove some default fields as required.

2 Configure default case details fields

  1. In the same case, enter Design mode to enable or disable default fields in the preconfigured case details area.
  2. Hover over the case details section of the Summary pane, and then click Edit this section.
  3. Click Settings.
    Click the settings link at the top of the Case Details panel to reveal more settings
  4. Select the Hide priority and Hide default case data checkboxes.
  5. In the header of the configuration pane, click Apply to display the Summary pane case details without the PriorityCreated, and Updated fields.
    hide-priority-default-case-data
  6. Clear the Hide default case data check box.
  7. In the header of the configuration pane, click Apply to display the Created and Updated fields.
  8. Exit Design mode.
Note: The CaseDetails section rule copied into your application ruleset and specialized by the class of your case type is based on a Cosmos detail template. Review the rules in your application ruleset list to view the copy of the CaseDetails section rule.

3 Customize the details tab

  1. In a new or existing Service Request case, click the Details tab in the Summary pane to open the details screen in the work area.
  2. Enable Design mode.
  3. In the work area, hover over the case details section, and then click Edit this section.
    edit-details-screen
  4. Verify that the section is using the Case information UI template design template. 
  5. In the Primary information region, add the Note to technical team and Repair notes fields. 
    map-into-primary-region
       
  6. In region A, hover over the Main case information, and then click More options > Delete to delete the default embedded section dynamically displaying all case data. 
    Removing the embedded section for Region A
  7. Map fields to regions A and B according to the following table.
    Region A Region B
    Requestor Email Create Date/Time
    Issue Severity Update Date/Time
    Due date Update Operator Name
     
    regions-A-B-mapping
  8. Exit Design mode.
  9. Verify that the Details tab matches the following image.
    completed-details-tab
    Note: As you reduce the size of the browser window, the default responsive features of the Case Details UI Template stacks region A on top of region B and may change the way the regions are displayed.
    completed-details-tab-responsive

4 Configure additional tabs and tab content

  1. From a new or existing Service Request case, enter Design mode.
  2. Hover over any editable area, and then click Edit to edit the region.
  3. In the contextual pane on the right, use the drop-down menu to locate and select pyCaseMainInner from the nested page structure.
    select-pyCaseMainInner
  4. In the Main content region, click the Add icon to display the list of existing sections.
    Click plus button to add a tab
  5. In the Add pane, under Sections, click Add to view to add a new tab and section.
    Click plus button to create a brand new tab and section
  6. In the Create new section dialog box, enter Service Request Notes.
  7. Click Submit.
    create-new-section
  8. Verify that the Add pane now displays the Service Request Notes section and the Summary pane displays the New items tab.
    new-section-new-tab
  9. Close the Add pane.

Rename the tab

  1. In the in pyCaseMainInner pane, edit the settings for the Service Request Notes section.
  2. In the Title field, enter Service notes.
  3. In the header of the configuration pane, click Apply.
    renaming-tab
  4. Close all open panes.
  5. Verify that the new Service notes tab displays in the Summary pane and a new section displays at the bottom of the Work area.
    new-tab-default-data

Populate the content of the tab

  1. In App Studio, in Design mode, click the Service notes tab.
  2. In the work area, hover over the New section, and then click Edit.
    tab-content-edit
  3. In region A, hover over the default Text Input tab, and then click More options > Delete.
    Delete the placeholder text input
  4. In region A, click Add and map in the Note to technical team and Repair notes fields to the section.
    map-notes-fields
  5. Close the Add pane.
  6. Verify that the new fields are displayed in the section.
    service-notes-tabs-in-section
     

Make the tab content a card

  1. Hover over region A, and then click the Edit icon.
    tab-content-region-edit
  2. In the Region properties dialog box, select the Override default region settings check box. 
  3. In the Container format list, select Default.
  4. Click Submit to submit the region properties.
    enable-override-region-format
  5. Close the section pane.
  6. Exit Design mode.
  7. In the work area, verify that the Service notes tab is displayed as a card.
    service-notes-final-card


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