About the UI Inspector tool

Use the UI Inspector to view the UI structure of elements in your development environment or after launching the application. You can inspect:

• Harnesses
• Panels
• Containers
• Sections
• Layouts
• Flow Actions
• Cells
• Properties

Identifying these rules and other elements can be valuable as you update harness, section, and flow action rules to evolve the user interface of your application. For additional usage guideline, see PDN article: Associating a skin with the user interface.

Privileges

Two standard, out-of-the-box developer roles, PegaRULES:SysAdm4 and PegaRULES:SysArch4, include the privilege for the UI Inspector. To enable the UI Inspector for other roles, add the pxUIInspector privilege.

Starting the UI Inspector

From Designer Studio:

• On the Developer Toolbar (at the bottom of Designer Studio), click UI Inspector.
  This is a toggle; click this again to turn the UI Inspector off.
  

From an application:

• Invoke the UI Inspector from any portal as long as you have the pxUIInspector privilege assigned to your role.
  

Using the UI Inspector

When active, you can inspect elements in a developer portal or an end-user portal:

• Move your cursor over an application window for the UI Inspector to highlight each element with a red box and display its element type.
• Pause briefly on an element to display an information panel that contains the UI structure and element details.
  

UI Structure

The UI Structure appears with the selected element at the top of the list. Beneath it, a breadcrumb trail of elements, including harnesses, sections, and flow actions appears.

• Hover over one of the breadcrumb elements to display it with a label and dashed line.
• Click an item in the breadcrumb trail to change the highlighted element and update the information panel. If necessary, use the scroll bar to view all of the elements in the UI structure.

Element Type Detail

On the left side of the information panel, details for the selected element appear, including the element rule name and its containing rule. For example, on a section, the UI Inspector displays the section rule name and containing rule name, along with links to the each rule. For a cell, the property or control appears, along with the section rule that contains the cell. Click to open the rules. Standard PRPC permissions dictate which rules are editable.

User Interface category

Tools — User Interface