Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Simplifying UI development with the UI Gallery

Updated on May 3, 2020

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.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us