Skip to main content

Creating a composite tab

Archived

3 Tasks

5 mins

Visible to: All users
Advanced 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.

Scenario

As a system architect, you have a requirement to create a new tab to display the first name, last name, and mobile phone number for a contact in a separate tab.

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

Role

User name

Password

System Architect

casysadmin

rules

Your assignment consists of the following tasks:

Task 1: Create a new section called ContactInfo

In PegaCA-Work > User Interface > Section, create a new section called ContactInfo, and then add the fields First Name, Last Name, and Mobile Phone to the section.

Task 2: Create a new tab and add the ContactInfo section

Find the section that is used to display the customer composite tabs and add the section you created.

Task 3: Confirm your work

In the Interaction Portal, start an interaction with John Brown and verify that the new Contact tab is displayed.

Challenge Walkthrough

Detailed Tasks

1 Create a new section called ContactInfo

  1. Log in a system architect with User name casysadmin and Password rules.
  2. In the App Explorer, click PegaCA-Work > User Interface > Section.
  3. Right-click Section, and then click Create.
  4. On the Create Section landing page, enter the following information:
    1. Label: ContactInfo
    2. Ruleset: PegaCS-Sample
    3. Version: 08-05-02
  5. In the upper right, click Create and open.
  6. In the pane on the right, click the Add icon.
  7. In the Data Display section, click the Text object to add the field to the section.
  8. Select the newly added field and click the Edit icon to open the Cell Properties dialog box.
    CH25231-2-EN-Data Display
  9. In the Cell Properties dialog box, in the Property field, enter .Contact.FirstName
  10. Click Submit to close the dialog box.
  11. Repeat steps 5- 7 to add properties for .Contact.LastName and .Contact.MobilePhone.
    CH25231-2-EN-design
  12. In the upper right, click Save to save the section.

2 Create a new tab and add the ContactInfo section

  1. In the header of Dev Studio, search for CPMCompositeTabs.
  2. Click Section in PegaCA-Work class, select CPMCompositeTabs to open the section form.
    CH25231-2-EN-CPMCompositeTabs
  3. In the header of the section form, click Save as to save the tab and confirm that the ruleset is PegaCS-Sample and version 08-05-02.
    CH25231-2-EN-Save Composite tab
  4. Click Create and open.
  5. On the Design tab of the section form, click Structural, and then drag a Dynamic layout object to the area above the Account layout.
    CH25231-2-EN-Dynamic layout
CH25231-2-EN-Drag dynamic layout
  1. On the new Dynamic Layout, click the Gear icon to access the Dynamic layout properties dialog box.
  2. On the General tab of the Dynamic layout properties dialog box, in the Container Settings section, in the Title field, enter Contact.
    CH25231-2-EN-Container settings
  3. Click Submit to save the tab settings and close the dialog box.
  4. On the section form, click Structural, and then drag an Embedded Section object inside the Contact layout.
    CH25231-2-EN-Embedded section
  5. In the Section Include dialog box, set the name of the section to ContactInfo.
    CH25231-2-EN-section include
  6. Click Submit to the add new section to the tab.
    CH25231-2-EN-results
  7. Click Save.

3 Confirm your work

  1. In the header of Dev Studio, click Launch web interface > Interaction Portal to open the Interaction Portal.
  2. In the Interaction Portal, click New > Demo Screen Pops > Demo Pop - BROWN to start an interaction with John Brown.
    CH25231-2-EN-interaction portal
  3. Click Accept to accept the incoming call.
  4. Verify that the Contact tab you added is displayed.
    CH25231-2-EN-Contact results


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