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.
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:
For more information, see Pega Design System.
UI-Kit 12 includes several enhancements that make it easier for you to design and build consistent and user-friendly mobile experiences.
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
- 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.
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:
For more information, see Changing your theme.
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.