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.

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.

• The 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.
• The 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.
• The 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.
• The 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 View 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.