durab Member since 2016 3 posts
Posted: 5 months ago
Last activity: 5 months 2 weeks ago

Improved case utility widgets from Ui Kit 12

From Uikit 12, the design and the user experience of utility widgets has been improved. Utility widgets on a case are helpful as it contains all the assets such as the documents, files and attachments, followers of the case and the interested participants etc.

Comparison of utility widgets in UI kit 11 and 12:

UIkit 11

UIkit 12

In the new design, all the widgets follow a certain pattern. The widgets are divided in to 2 main areas:

1. Header Bar

    - In header bar, the title of the widget along with the count is present

    - Action button - It  has been moved to the header bar from the main content area as from previous designs

       - Action button now uses a icon rather than a text

2. Main content area

    - This is the main area where the contents of the widgets go


Empty state of the widgets:

In the new design, all the widgets use a standard empty state template, to indicate there are no contents in the widgets.


Custom widgets in the application:

If a application uses a custom widget, it's design should follow the OOTB widget pattern. For empty state, use the "pyEmptyStateForList" OOTB rule


How does this impact applications:

By default, these are OOTB widgets, and it will work after the applications are upgraged from UIkit 11. 

Issue will arise if the rules are being overridden in the application layer. Please try to use the rules from OOTB as much as possible.

Issues found in application:

In one of the applications, Attachment widget was overriden in the application layer.

Problem statement : Attachment link was missing from the widget

Root cause : Attachment widget was overridden in the application.

Solution: The attachment link was present in "pyCaseAttachments" rule in UIkit 11.

As per the new design, all the widget actions are moved to the header of the widget.

If the widget is overriden in the application, use the "pyCaseAttachmentsTopWrapper" section that contains the action button in the header


Pega Platform 8.1 User Interface Front-End Developer Developer Knowledge Share
Share this page LinkedIn