UI-Kit 12 provides the tools that you need to build applications with greater consistency through the use of common UI elements and styling that helps you to avoid the duplication of work across multiple applications.

This version of the UI-Kit includes significant styling changes, mobility enhancements, more usage of design templates, and the ability to easily configure your application name and logo in App Studio. Also, to reduce application complexity and generated CSS size, deprecated skin formats have been removed from the default UI-Kit skin. Finally, to reduce redundancy, the Case Default portal has been removed.

• Updated styles
• Mobility enhancements
• Design templates
• Portal updates
• Deprecated skin formats

Updated styles

The latest Pega design standards are reflected in UI-Kit 12 so that all applications built on UI-Kit 12 are aligned with current designs. The design changes introduced in UI-Kit 12 are intended to promote more consumer-oriented software experiences in Pega applications.

UI-Kit 12 introduces the following major style changes:

• The default application font size has been increased to 16px to improve the readability of page content.
• The font style and size for headings has been changed to make page content easier to scan.
• The button formats have been modified to make them more visually distinct from other user interface elements.
  

  Sample screens showing updated styles

For more information, see Pega Design System.

Mobility enhancements

UI-Kit 12 includes several enhancements that make it easier for you to design and build consistent and user-friendly mobile experiences.

• All mobile header sections have been changed to use the Mobile page header with a left and right actions design template. For more information, see Design templates.
• Mobile harnesses are now configured with custom-generated skeletons. Skeletons are used during page transitions and render a temporary placeholder UI that closely matches the actual UI while data is being loaded from the data store.
  

  Sample skeleton transition

• The mobile review harness now uses the Mobile page with a content and layout group design template. This tab-based layout optimizes the user experience on mobile devices so users can more easily view and manage case details, Pulse activity, and case attachments. The tab-based layout also provides more flexibility when editing pages in App Studio.
  

  Mobile app with tab-based layout

Design templates

A design template is a special type of section that contains predefined layouts and regions. UI-Kit 12 includes the following new and updated templates:

• Card with image – Use this new template to display a section with two regions in which one region contains an image and one region contains a stacked layout. To see a sample implementation of this template, open the UI Gallery in Dev Studio by clicking Configure > User Interface > Gallery > UI Elements, and then open the Drag & drop sample.
  

  Card with image template sample implementation

• Mobile page header with left and right action – Introduced in Pega Platform 7.4, this template captures the standard mobile pattern in which the header contains a left action, such as a back button; a title; and right actions, such as icons for the screen’s primary actions. In Pega Platform 8.1, to minimize distraction and provide more mobile screen real estate to the work area, you can use the new subtitle section on this template to define a subtitle in a mobile page header that replaces the existing header and its icons as you scroll down the page. The original header is restored when you scroll back up the page or click the subtitle while the header is collapsed.
  

  New subtitle section in the Mobile page header with left and right action template

  The following figure demonstrates how the collapsing header provides more space in the work area as you scroll down the page in a mobile app.

  

  Collapsing header in a mobile app

You can select a design template on the Design tab of the Section form. For more information, see Apply design templates for sections.

Portal updates

To eliminate redundancy, the Case Default portal has been removed. The Case Worker and Case Manager portals are the only portals that are now supported.

You can now update your logo and application name in App Studio so they display in the portal header, instead of the Case Worker or Case Manager labels.

You can configure your application banner by selecting one of the following Show on banner options:

• Logo + Application name
• Application name only
• Logo only
• None
  

  Application name and logo options

Deprecated skin formats

Deprecated formats have been removed from the pyEndUser skin. This change significantly reduces the generated CSS size and skin complexity, making it easier to maintain your application skin and styles. For more information, see UI-Kit deprecated and removed skin formats.