Skip to main content

Creating a custom case utility widget

Archived

4 Tasks

25 mins

 Pega Platform 8.5 Visible to: All users
Intermediate Pega Platform 8.5 User Experience 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.

Scenario

The stakeholders of the MyTown311 want Service Request cases to show relevant repair manuals based on the repair type of the request. For example, a repair type of Pothole would render manuals related to repairing potholes. Using Dev Studio and App Studio, create a custom utility widget and add it to the case utility panel.

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

Role User name Password
Application Developer author@mytown cosmos123!

 

Detailed Tasks

1 Create widget placeholder with App Studio

  1. Log in to App Studio and create a new Service Request case with sample data.
  2. In the header of App Studio, click Design to enter Design mode.
  3. In the pane on the right, in the drop-down menu, select pyCaseMainInner.
    Traverse up to pyCaseMainInner
  4. In the the Utils section, click Add to add a new utility.
    Clicking the plus button to add a new utility in the Utils region
  5. In the Add pane, click Add to add a new section. 
    Click plus button to add a new section
  6. In the Create new section field, enter Repair manuals as the new section name.
  7. Click Submit to submit the section name.
    Specify a name for the new section
  8. Close all the Add pane to return to pyCaseMainInner and verify the new section displays in the panel.
    The new section is added to the panel
  9. In the header of App Studio, click Design to exit Design mode.
  10. On the user portal, expand the utility panel.
  11. Verify that a New section placeholder displays.
    Expanded utility widget with default content

2 Configure the utility widget container with Dev Studio

  1. Enter Design mode.
  2. Expand the utility column.
  3. On the user portal, hover over the New Section utility, and then click the Edit icon to configure the utility.
    Click the pencil icon to edit the newly created utility section
  4. In the configuration pane on the right, click the More icon, and then select Open in Dev Studio to open the section in Dev Studio.
    Open the section for the utility in Dev Studio
  5. In Dev Studio, at the top of the section, click Convert to full section editor to convert the 1-column design template.
    Convert to full section editor in dev studio
  6. In the Confirm section conversion dialog box, click Submit.
    Click submit when prompted to confirm section conversion
  7. On the New section text input, right-click, and then select Delete.
    Delete the default text input
  8. Click Dynamic Layout (Stacked) > View properties to open the Dynamic Layout properties.
    dynamic-layout-edit
  9. In the Dynamic Layout properties dialog, in the Container format field, select Other to display the other container format field.
  10. In the open field, enter or select Utility Open the property pane for the and set the container format to Utility.
  11. Select the Display header and title check box.
  12. In the Container settings section, to the right of Text, enter or select Repair manuals.
  13. In the Heading level list, select Heading 3.
    Specify the header and title
  14. Select the Include icon or value check box.
  15. In the Icon or value type list, select Standard icon.
  16. In the Icon field, enter cmicons/pydocument.svg.
    Specifying an icon on the container
  17. Click Submit to close the Dynamic layout properties dialog box.
  18. Verify that your section resembles the following image.
    Repair manuals utility widget with no content
  19. In the header of Dev Studio, click Launch portal > User Portal to open the User Portal in a new tab and test your changes.
    Select User Portal to launch the portal from Dev Studio
  20. In the User Portal, create a Service Request case.
  21. Verify the collapsed state of the new utility widget.
    Collapsed state of the new utility widget
  22. Verify the expanded state of the new utility widget.
    Expanded state of the new utility widget

3 Configure the utility widget content with Dev Studio

Note: In this challenge, you add a Repeating Dynamic Layout (RDL) to render the repair manuals. The source of the RDL is a list group property bound to parameterized data page that, based on the passed repair type, returns a list of manuals. For brevity, the target section rule of the RDL, page list property, the data page, and the underlying report definition already exist.
  1. Return to the Dev Studio browser tab.
  2. In Dev Studio, click the RepairManuals section rule tab.
    Repair manuals utility widget with no content
  3. On the Design tab, expand the Structural list, and then drag and drop a Repeating dynamic layout to the outer Dynamic Layout.
    Drag and drop a Repeating dynamic layout into the Dynamic Layout
    An empty repeating dynamic layout
  4. Click View properties to open the Repeating dynamic layout property dialog box.
  5. In the Repeating dynamic layout properties dialog, in the Source fiedl, select Property.
  6. In the List/Group field, enter or select .RepairManuals.
  7. Select the Display message when there are no rows to display check box.
  8. To the right of the Section list, enter or select UtilityNoResultsMessage.
    Repeating dynamic layout property panel
  9. Click Submit to save and dismiss the Repeating dynamic layout property dialog box and return to the section form.
  10. On the Design tab, expand the Structural list, and then drag and drop an Embedded Section to the Repeating Dynamic Layout. The Section Include dialog box is displayed.
    Drag and drop an Embedded Section into the RDL
  11. In the Section Include dialog box, to the right of By name, enter RepairManualsListItem as the section name.
    Enter the name of the section when prompted
  12. Click Submit to close the Section Include dialog box and return to the section form.
  13. Verify that the RepairManuals section rule resembles the following image.
    Completed section rule
  14. In the header of Dev Studio, click Launch portal > User Portal to open the User Portal in a new tab and test your changes.
    Select User Portal to launch the portal from Dev Studio
  15. Create a new Service Request case.
  16. In the New Service Request window, in the Type list, select a value (for example, Pothole).
    Selecting a type of service request
  17. Enter other sample data to complete the Service Request details.
  18. When the case is opened, expand the utility panel and verify the Repair manuals utility widget renders a list of manuals.
    The repair manuals widget rendering a list of repair manuals
    Note: The links to the sample repair manuals are not configured to navigate to an actual website.
  19. Create additional case types with different Type list values (for example, Park maintenance or Road debris). 
  20. Confirm that the utility widget renders different manuals depending on the Type list value.

 

4 Add the number of repair manuals to collapsed and expanded state

When warranted, a utility widget renders a badge in a collapsed state to help the user understand the contents of the widget. Often, this badge is a count of items in the widget. Similarly, when a widget renders items, the expanded state should indicate the number of items.

Note: This challenge involves using a property to hold the item count, a declare expression to set the property with the correct item count, and a field value to append the item count to the header title of the widget. For brevity, these rules have been created for you.
  1. Return to the Dev Studio browser tab.
  2. In Dev Studio, click the RepairManuals section rule tab.
  3. On the Design tab, expand the Data display list, and then drag and drop a Text control above the Repeating Dynamic Layout.
    Drag a Text control and drop it before the Repeating Dynamic Layout
    Drop a text control just before the repeating dynamic layout
  4. Select the Text field, then click View Properties to open the Cell Properties dialog box.
    text-cell-properties
  5. On the General tab, set the following properties:
    1. In the Property field, enter or select .RepairManualsCount.
    2. To the right of Label, clear the Use property default check box.
    3. Clear the Label value field.
    4. In the Visibility list, select Always.
      Specifying properties of the text control
  6. On the Presentation tab, set the following properties:
    1. Clear the Reserve space for label check box.
    2. In the Cell read-write classes and Cell read-only classes fields, enter or select utils-badge.
      Configuring properties on the Presentation tab of the text control
    3. Click Submit to save your changes and close the Cell Properties dialog box.
  7. Open the Dynamic layout properties dialog box again.
  8. On the General tab, in the Container settings section, in the Title list, select Field Value.
  9. To the right of the Title list, in the field, enter or select RepairManuals.
    Use a field value as the heading text
  10. Click Submit to save your changes and close the Dynamic layout properties dialog box.
  11. In the header of Dev Studio, click Launch portal > User Portal to open the User Portal in a new tab and test your changes.
  12. Create a Service Request case.
  13. Notice that in a collapsed state, a badge under the icon indicates the number of repair manuals that are available.
    The utility's collapsed state now renders a badge with the item count
  14. Expand the utility panel and verify that the number of repair manuals is appended to the title in the expanded state.
    In expanded state, repair manual item count is appended to the header title

Available in the following mission:

Return to mission Continue 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