Skip to main content

Customizing the user interface for agents


2 Tasks

15 mins

Visible to: All users
Beginner Pega Customer Service 8.5 English
This content is now archived and is no longer updated. Progress is not calculated. Pega Cloud instances are disabled, and badges are no longer awarded. Click here to continue your progress in the latest version.


You have been asked to make the following changes to the Pega Customer Service user interface (UI), which is displayed when a customer service representative logs in.

To complete this challenge:

Task 1: Change the label Avg monthly balance to Average monthly balance.

Task 2: Modify the Address Change service request to use a three-column layout.

Use the following credentials to log in to the exercise system:

Role User name Password
Application administrator CSExpressAdmin rules

Challenge Walkthrough

Detailed Tasks

1 Change the Avg monthly balance field label to Average monthly balance

  1. Log in to the Interaction Portal with username csexpressadmin and password rules.
  2. Click Preview Application to access the Interaction Portal.
  3. Click New > Demo Screen Pops > Demo Pop - CONNOR to start an interaction with Sara Connor.
  4. Click Accept to accept the incoming call. The composite view for Sara Connor is displayed.
  5. Click Design to enable design mode.
    Design mode icon
  6. Hover over the Avg monthly balance label, and then click the edit icon to enable edit mode.
    Highlight the section
  7. Inside the section, hover over the label to display the Field selection, and then click the edit icon. The label properties are displayed in the pane on the right.
    Selecting a field
  8. In the Label field of the properties panel, enter Average monthly balance.
    Update the label
  9. Click Apply to save your update.
  10. In the upper-left corner of the pane, click X to close the edit view.

2 Modify the Address Change service request to use a three-column layout and add a Business phone field to the new column

  1. Click Add Task, and then double-click Address Change to start the case.
  2. Click Design to enable design mode.
  3. Hover over the Address line 1 area and click the edit icon to edit the section.
    Edit a section
  4. From the pane on the right, click Change to display the available design templates.
  5. Click on the 3 Column design template icon to change this layout from the current two-column layout to the new three-column layout.

    The section now shows the three-column layout, with columns A and B automatically populated with the previous two-column layout fields.

  6. In the pane on the right, on the C tab, click the Add icon to view the available reusable fields.
  7. Hover over the Business phone field, and then click the Add to view icon to add the field to column C.  After the screen refreshes, the Business phone field is applied to column C.
    Select the business phone
  8. In the upper-left corner of the pane, click X to close the view, and then click X again to close the pane.
  9. Click Wrap Up to conclude the interaction with Sara.
  10. Click Submit to close the interaction.

Available in the following mission:

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