Table of Contents

Improvements and enhancements in UI Kit 11

UI Kit 11 offers new design templates, Cascading Style Sheet (CSS) helper classes, and core icons, which bring greater consistency to applications built with Pega® Platform. Sidebar navigation enhancements improve usability and increase the visibility of recent items.

Design templates

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

  • Use the 4 Column template to display content in four independent columns.
  • Use the 4 Column (Inline Wrapping) template to display content in four columns. The content first fills from left to right, and then it automatically wraps to the next logical row until all items are rendered.
  • Use the Mobile page header with left and right action template to display a header in a mobile page. Typically, the left action returns you to the previous screen and the right action is a primary action for the screen.
  • Use the Mobile page with content and layout group template for mobile pages, to show some content that is stacked and some content in a layout group. By default, the layout group is displayed with tabs.

You select a design template on the Design tab of the Section form. For more information, see Designing sections by using design templates.
UI Kit 11 also includes new design templates for inner sections. For more information, see Apply design templates to inner sections.

CSS helper classes

You apply a CSS helper class to a cell or layout to alter its default styling or behavior in a small way, without creating a new skin format. For example, use a CSS helper class to center an element in a cell.

UI Kit 11 includes the following new helper classes:

  • Apply the flex-col-4, flex-col-5, flex-col-6, flex-col-8, and flex-col-12 classes to an Inline middle dynamic layout to force items to wrap into multiple columns.
  • Apply the flex-none, flex-none-item-x helper classes to disable flexbox features on specific items in a layout. Apply flex-none directly to an element. Apply flex-none-item-x to a layout that targets a specific child layout.

You apply a standard, predefined CSS helper class by using the Open helper class picker option on the Presentation tab of the Properties panel. For more information, see CSS helper classes.

UI Kit icons

UI Kit icons (formerly known as core icons) have a new style. The UI Kit icon set is based on the Budicon Classic font.

sampleUIKiticonsUI Kit icon examples

The px-font-pega-core.css file no longer ships with Pega Platform.

To review the icons available for a skin, click Actions > Launch > Skin Preview to display the Skin Preview screen.

For more information, see Previewing and selecting predefined icons with the icon class picker.

Enhancements to the Recents section in the left navigation menu

In 7.4, the five most recent work items are prominently displayed at the bottom of the expanded left navigation menu, instead of an expandable/collapsible submenu. In addition, 7.4 includes a See all link that displays a new page that allows you to paginate through a more complete list of your recent items. For more information, see Enabling automatic expanding and collapsing for a sidebar navigation menu.

UI Gallery

The UI Gallery provides an extensive selection of examples that demonstrate user interface (UI) features and UI design best practices. You can copy these examples and adapt them for use in your own applications. Enhancements to the UI Gallery include new examples for dynamic layout groups, repeating dynamic layout groups, and master detail, which you can use to drill down for detail in a mobile application. To access the UI Gallery, click Designer Studio > User Interface > Gallery > UI Elements.

For more information, see Simplifying UI development with the UI Gallery.

Suggest Edit

100% found this useful

Have a question? Get answers now.

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