About the UI Tree tool

Use the UI Tree to view the hierarchy of artifacts in your development environment or after launching the application at runtime. You can view:

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

Identifying the hierarchy of 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.

Privileges

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

Starting the UI Tree

From Designer Studio:

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

From an application:

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

Using the UI Tree

When active, a collapsible list displays on the right-hand side of the screen listing the hierarchy of elements in a developer portal or an end-user portal.

• Move your cursor over either an element on the page or item in the list to highlight it with a blue box. Every item in the list corresponds to an element on the page.
• Click the element to change the blue box to a green box and to display an information panel detailing the UI structure for the element. The right-hand list will also automatically collapse to show the immediate hierarchy of the element.

For additional usage guidelines, see the PDN article How to use the UI Tree tool.

UI Structure

The UI Structure appears in an information panel below the element's name upon first clicking the element or when selecting the "i" icon in the toolbar. Depending on the element type, this panel may display:

• Element type
• Control type rule (if applicable)
• Layout rule (if applicable)
• Section rule (if applicable)
• Containing rule

For example, on a section, the panel 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 a link in this information panel to open a rule. Standard PRPC permissions dictate which rules are editable.

Interacting with Element Properties

When an element is selected and is outlined by a green box, a gear icon appears next to the element's name. Clicking this gear opens the Cell Properties panel for the element in read-only mode.

Adding a Property to the Scratch Pad

With the UI Tree enabled, you can select an element populated by a property and add that property to the Scratch Pad. This makes the property available to add as a column in a report you are editing in the Report Editor for the duration of your current session.

Add an item to the scratch pad either by clicking the "sheets of paper" icon next to the element's name or by selecting the "Add property to scratch pad" link from the information panel that appears for the element.

User Interface category

Tools — User Interface