The UI Inspector tool allows developers and designers to easily review the structure of their application in the context of PRPC UI rules and elements.

Similar to the HTML inspector tools found in most browsers, the UI Inspector tool highlights elements such as harnesses, panels, sections, layouts, flow actions, cells and properties. As you move your cursor over the application, the UI Inspector highlights each element type with a red outline. Pause briefly while any element is in focus to see a panel with detailed information on the element's structure and configuration.

Enabling the UI Inspector

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, create a role that has access to the pxUIInspector privilege. Refresh your PRPC session after associating the role with your operator.

End user portals display the UI Inspector as a floating button which is disabled by default. Drag and drop to change its position as desired:

Click the button label to turn on the tool:

Using the UI Inspector

Once enabled, the UI Inspector immediately detects UI elements in your application.

Outline indicators update real-time as you move the mouse over different elements. In the following example, the user hovers over the text “Add Line Items” in the Case Manager portal. The UI Inspector determines this text is contained in a Cell element type and outlines the physical space associated with the element in red. The details panel indicates the Cell is configured to display the value of property pxTaskLabel using a pxTextInput control. The Cell resides in a Section named pyUserWorkList. Use the links to view these rules in the Work Area of the Designer Studio for a closer look.

The UI structure (or hierarchy) of an element illustrates its position relative to its containing elements. It reads top to bottom as “the element in focus resides in <an element type> which, in turn, resides in <an element type>…”. Click any item to put the element into focus.

In the following example, the user keeps the Cell element in focus and then clicks the first “in Section” item in the hierarchy. Now, the Section containing the “Add Line Items” Cell is in focus (red outline). The details panel indicates this Section resides in another Section named pyDashboardMiddle.

Alternatively, users may hover over any item in the hierarchy to get a visual indication of its location on the form without losing focus of the current element. In this example the Cell is still in focus (red outline) but the boundaries of its containing Section are denoted with a blue dashed outline:

The UI Structure of an element is useful when you want to trace a current element all the way up to its outermost containing element (typically a Harness):

When you are finished inspecting UI elements in your application, click to the button label to disable the UI Inspector: