Have you ever wanted to build your own side panel, similar to the Live UI, Localization Inspector and Agile Workbench panels?

In 7.2.2 a new Panel Architecture was built into the product. It is a JavaScript API for dynamically showing and hiding content on the screen.

A panel can be visualized as three layers:

The Panel Content is the view that the user sees on the screen. Ideally this would be a section or html data that is displayed to the user.

The Panel Dock is a layer that holds a series of panel contents (or panels).

The Panel Layout is a layer that holds various docks. There is currently only a ‘right dock’ to display content on the right side of the screen. In the future this could be expanded to show a panel dock for each region of a screen including Top, Right, Bottom and Left.

Example:

The following code sample can be used to create a new basic panel. The code also tells the panel manager to place it in the right dock:

The screenshot below shows the various Pega panel classes used for the existing panels in Pega:

JavaScript API:

There are multiple JavaScript files that make up the Panel Architecture API. These files should get automatically included in your Pega application by default.

The best way to understand the API is to look in these files and read the Java Doc style comments for each of the public APIs supplied in the files. Below is a high-level overview of the API which explains some of the important JavaScript files as well as briefly describes some of the public JavaScript functions:

pzpega_ui_panel_manager – this JavaScript file has the pega.ui.panelManager object which is the overall panel layout for the panel docks to live in. It has public functions to hide all panels and register a panel.

pzpega_ui_components_paneldocks_base – this JavaScript file has the pega.ui.components.panelDocks.Base object is the base panel dock which holds the panel instance. This object is intended to be inherited by other docks (such as the Right dock). Some of its public functions are used to add a panel to the dock, resize, get width and height, hide all panels for a given dock and destroy a dock.

pzpega_ui_components_paneldocks_right – this JavaScript file has the pega.ui.components.panelDocks.Right object which holds panel instances specifically for the right dock. It overrides some of the public functions specified by pega.ui.components.panelDocks.Base

pzpega_ui_components_panels_base – this JavaScript file has the pega.ui.components.panels.Base object which is used for the contents of the panel. Its public functions are used to get the panel element, get the panel ID, determine if a panel is showing, show the panel, hide the panel, add a child panel to a panel, remove a child from a panel, set the content of a panel and destroy the panel

pzpega_ui_components_panels_classloader – this JavaScript file has the pega.ui.components.panels.ClassLoader object which is specialized panel content to allow a section to be loaded into a panel. Its public functions are used to show and hide the panel, destroy the panel, load the panel by passing in a Pega class to load and load the panel based on a given section and page context