Unable to attach document in mobile browser

We have a requirement where the user should be able to attach documents from a mobile browser. When we open the case, we can see the utilities tab at the top of the screen, but we are facing two issues:

  1. Primarily, when the user clicks on the Utilities tab and then tries to click on “Files and documents”, the screen is unresponsive.
  2. When we scroll down in the case, the utilities tab disappears and is only visible at the very top of the screen.

@bansa6 :warning: This is a GenAI-powered tool. All generated answers require validation against the provided references.

Below some relevant information that might help address these challenges.

Issue 1: Unresponsive Screen When Accessing “Files and Documents”

The first issue you described—where the screen becomes unresponsive when clicking on “Files and documents” from the Utilities tab—appears to match a known issue in Pega. There’s a documented problem called “Unresponsive Utility Panel” that occurs in certain Pega Platform versions.

This issue typically happens after updating from Pega Platform 8.7.6 to later versions, where the utility panel becomes unresponsive when clicked. The root cause involves changes to the toggleUtilityPane function in the pz-cosmos-ui-portal JavaScript file.

Potential solutions:

  1. Use the template pxCaseMainPageTemplate in the pyCaseMainInner section, as it contains the updated changes aligned with the out-of-the-box functions responsible for toggle functionality.
  2. If you’ve customized the template, you could SaveAs the updated pyCaseMainInner Template and:
    • Adjust the visibility conditions for pxAssignmentView
    • Add the utils-header class in the layout responsible for displaying the utilities

It’s worth noting that this issue typically doesn’t occur when out-of-the-box sections aren’t customized. If you’re using custom settings, reverting to out-of-the-box configurations might help avoid further issues.

Issue 2: Utilities Tab Disappearing When Scrolling

For your second issue—the utilities tab disappearing when scrolling down—I haven’t found a specific documented solution. However, based on Pega’s mobile interface best practices, here are some recommendations:

  1. Responsive Design: Ensure your application uses responsive design principles without fixed widths. For table-style layouts such as grids, setting width to 100% allows the display to adapt to different devices.
  2. Minimize Vertical Scrolling: Pega’s best practices recommend minimizing vertical scrolling in mobile interfaces to improve user experience.
  3. Consider Sticky Headers: While not explicitly documented for the Utilities tab, implementing sticky or fixed headers is a common approach to keep navigation elements visible when scrolling.

There was a resolved issue in Pega Mobile Client version 8.8.100 related to improper display on scroll, but it was specific to the iOS bottom navigation bar rather than the Utilities tab.

Next Steps

Since these issues are affecting your user experience, I would recommend:

  1. If you have access to Pega Support, consider submitting a support ticket with the specific details of your configuration and the versions you’re using. Reference the “Unresponsive Utility Panel” known issue for the first problem.
  2. If you have development resources, examine the custom CSS or responsive design settings that might be affecting the Utilities tab visibility during scroll events.
  3. Test the application across different mobile devices and browsers to see if the behavior is consistent, which might help identify whether it’s a device-specific issue.

References: