Table of Contents

Improve design consistency with UI-Kit 13 (8.2)

Build applications with greater consistency with UI-Kit 13, which provides common UI elements and styling that help you avoid duplicating work across multiple applications. The latest Pega design standards are reflected in UI-Kit 13 so that all applications built on UI-Kit 13 are aligned with current designs. The design changes introduced in UI-Kit 13 are intended to promote more consumer-oriented software experiences in Pega applications. For more information, see Pega Cosmos Design System.

This version of the UI-Kit includes enhancements to font icons, a new design template, a new location for the Pulse panel, and changes to the Recents panel.

Font icons

UI-Kit 13 introduces new font icons to streamline application design, heavier line weights for improved legibility on core UI icons, and enhanced artwork on existing icons. In addition, duplicate icons have been merged to improve consistency.

To view all available icons, complete the following steps:

  1. In Dev Studio, click Configure > User Interface > Skins, interfaces, & templates.
  2. On the Skins tab, open your skin.
  3. Click Actions > Launch > Skin Preview.
  4. In the navigation panel, click Icons.
Thumbnail

Pega Icons

Design template

A design template is a special type of section that contains predefined layouts and regions. In UI-Kit 13, a new Page Header with Actions template has been added. Use the Page Header with Actions template to create a page header title that meets accessibility standards. Optionally, the header can contain actions.

Thumbnail

Page Header with Actions template

To set a header title by using the Page Header with Actions template, complete the following steps:

  1. In the Section rule that uses the Page Header with Actions template, place your cursor over the Actions region and click the Pencil icon.
  2. On the Region properties dialog box, select the Override default regions setting check box and enter a title.
  3. Click Submit.
Thumbnail

Page Header with Actions - Region properties dialog box

To see sample uses of this template and other templates in the Case Worker and Case Manager portals in UI-Kit 13, complete the following steps.

  1. In Dev Studio, click Configure > User Interface > Skins, Interfaces, and Templates.
  2. Click the Templates tab.

Pulse panel

Previously, the Pulse panel was located in a slide-out panel on the upper right of the screen. To improve the visibility and usability of Pulse for team collaboration on work objects, the Pulse panel has been moved into the main case work area.

Recents panel

For increased flexibility when you customize the user interface and for a more efficient Document Object Model (DOM), the Recents panel in the left navigation pane is now generated by using a repeating dynamic layout instead of a table.

Suggest Edit

66% found this useful

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.