Use the Live UI tool to identify UI elements rendered on the current page. Once an element is selected, you can:
With Live UI, rule management is automated in Designer Studio, enabling less technical developers to modify the UI.
Live UI replaces the UI Tree and UI Inspector tools from previous versions of PRPC. Live UI editing works in all browsers supported by Pega 7.1.7 and later, including Internet Explorer 9 and later.
Note: Internet Explorer 8 users will only have access to the older UI Inspector tool.
Use the Live UI tool to intuitively view and edit the UI structure of elements in your development environment or after launching the application. You can inspect:
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 guidelines, see the PDN article: Associating a skin with the user interface.
Two standard, Pega-provided developer roles, PegaRULES:SysAdm4 and PegaRULES:SysArch4, include the privilege for Live UI. To enable Live UI for other roles, add the pxUIInspector privilege. Additionally, you can easily enable or disable Live UI by updating the pyEnableUIInspector when rule.
From Designer Studio:
From an application:
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.
Check toggle interaction at the top-left of the sidebar or use the Control + Shift keyboard shortcut to regain access to page navigation while keeping the Live UI tool active. Deselect to regain the ability to view artifact hierarchy through highlighting.
For additional usage guidelines, see the PDN article How to use the Live UI tool.
Tab |
Description |
Tree |
Displays a fully expanded hierarchical list of all artifacts on the current page. Clicking any of the items collapses the list to show only the hierarchy specific to the selected element. Navigate through artifacts on the page using either the tree or by directly hovering over the artifact on the page itself. |
Pending |
Displays a time-stamped log of records you have edited and saved but not yet published. These changes have been saved to the checked-out version and are visible only to you. Click to publish (check in) the selected record from the list of pending rules. Click to dismiss the edits you made to the selected record. A message displays in blue above the sidebar tabs if you have records available to publish. Click this link to switch to the Pending tab. |
History | View a log of all records published across all users in the run-time branch sorted by a time-stamp record and corresponding Operator ID. Expand a record to view a list of rules published in the publish event. |
Localization | Opens the Field Value Inspector. Displays a field value list with icons for translated elements or existing field values. In the Localization tab you can open the field value rule or create the field value if it doesn't already exist. |
The Pending and History tabs correspond to the run-time edit branch. If a record is not in the run-time branch, then it will not show up in either of these tabs.
When starting Live UI, the complete UI structure appears in the Tree tab of the Live UI sidebar.
Click an item in the tree to change the highlighted element and ancestor structure. If necessary, use the scroll bar to view all of the elements in the UI structure.
When an item is focused, it presents a Live UI toolbar showing a set of activities available for the item.
To display an element's toolbar, hover over and then click the element's name in the Live UI tree or click directly on the element's name on the document itself.
Depending on the element type, this toolbar may display:
Icon |
Tool type |
Description |
Breadcrumb trail |
Displays a breadcrumb trail panel with a list of immediate ancestors. Only sections and harnesses are shown in the list. From the ancestor panel, you can:
|
|
Info panel |
Individual UI structure appears in an information panel below the element's name upon first clicking the element and then selecting i in the toolbar. Depending on the element type, this panel may display:
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. |
|
Open rule |
Opens the selected rule. Standard Pega 7 Platform permissions dictate which rules are editable. |
|
Edit Cell Properties panel | Opens the Cell Properties panel for the element in edit or read-only mode, depending on user and record permissions. | |
Scratch Pad |
Adds the 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. |
|
View / Add / Delete | View the properties of the selected element. Elements (dynamic layout, section, paragraph, etc.) may also be added within, before, or after the selected element. You can also add the selected element to the scratch pad. |
With the Live UI tool enabled, you have the option to undo the last edit made to a property.
Undo button - Pega 7 Platform stores a copy of the rule you are editing as you make changes to it. Click the arrow at the top-left of the Live UI sidebar to undo the last change you made to a record.
Live UI allows a lead developer to set up and manage a run-time branch that adheres to a governance model in which automated rule management handles the copying, check out, and check in of modified rules by less technical developers. Rules can be directly edited by a less technical user via Properties panels and stored in the run-time branch for later review and merge by the lead developer. Using run-time editing, less technical users can quickly edit most common properties of a control or a layout.
To enable run-time editing in your application:
Users of applications that do not have run-time editing enabled will see the following error message: "Run-time editing has not been configured for this application." In this state, the Properties panels are read-only.
When you make edits with Live UI enabled, the rules are automatically copied to the run-time branch and checked out to the user. This provides less technical users with the ability to edit the UI in a controlled way without needing to understand the complexities of branches, save as, checkout, and check in.
Once a user has edited a rule, it remains checked out to them until they either publish or discard the rule.
As a user or group of users makes edits to the UI using Live UI, the run-time branch will contain the collection of all rules that have been edited. The lead developer can then validate these changes and decide which rules require merging.
If a user tries to open a property currently being edited by another user (the property hasn't been published yet), they will receive an error message: "This element is locked by another user, username."
While using Live UI to edit an application, you can batch publish or discard all records edited during the current session by using the Publish all and Discard all buttons located at the top of the Live UI sidebar. The total number of records you have edited that are available to publish is displayed below the Publish all button.
Before you start, verify that Live UI is enabled.
You can publish records individually from the Pending tab.