Table of Contents

Article

Simplifying UI development with the UI Gallery

The UI Gallery provides an extensive selection of examples that demonstrate Pega 7 user interface (UI) features and UI design best practices. Review these examples to learn Pega 7 UI configuration techniques, and even incorporate them into your own applications. You can also add your own samples to the UI Gallery.

Explore the UI Gallery

To access the UI Gallery, click Designer Studio > User Interface > UI Gallery.

UI Gallery Overview landing page

The UI Gallery Overview, as viewed in Pega 7.1.6.

The UI Gallery consists of two main sections, the Showcase and Available Components.

The Showcase section contains several example UI screens, such as product information and shopping cart forms. Each example allows you to explore the behavior of a purpose-specific UI, such as selecting items from a list and adding them to a shopping cart.

The Available Components section focuses on the individual elements of a user interface, such as dynamic layouts, overlays, and grids. The examples in this section are organized into four themes, which you can explore to better understand the UI capabilities provided in Pega 7.

  • Examples of button controls provided in the UI GalleryThe Components topic contains examples for individual UI controls, such as buttons, icons, and lists. Each page demonstrates several examples of a specific control, and allows you to explore the full range of formatting and functionality options available for that control.
  • An example of a tabbed layout, provided in the UI GalleryThe Layouts & Containers topic contains examples for non-repeating layouts and containers, such as dynamic layouts, layout groups, tabs, and accordions. This topic also provides examples of modal dialogs and overlays.
  • An example of a repeating grid layout, provided in the UI GalleryThe Tables & Grids topic contains examples for repeating layouts, such as grids, trees, and tree grids, and includes examples of repeating layout behavior, such as filtering and embedded panes.
  • A UI Gallery example that uses icons and events to implement a rating systemThe Samples & Combinations topic contains examples that use action sets to provide interactive capabilities to a UI, such as a button that the system enables only when a user enters the correct code.

Each page in the UI Gallery provides one or more usage examples, along with an explanation of the UI concepts involved. Click 157286_View_icon.pngView design-time configuration to open the source record and review the configuration for each example.

You can browse through the UI Gallery by using the Navigate menu. When you finish browsing the examples, click Return to UI Gallery Overview to return to the UI Gallery main page.

Published April 10, 2015 — Updated February 12, 2016


50% found this useful

Related Content

Have a question? Get answers now.

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