The Live UI tool

Use the Live UI tool to identify user interface elements that are rendered on the current page.

After you select an element, you can:

  • Open the related rule.
  • Open the rule's Properties panel to review settings.
  • Open the rule's Properties panel, make changes, and immediately see them rendered.
  • Undo the last edit you made in the rule's Properties panel. For more information, see Undo last edit
  • Navigate the UI hierarchy using the Live UI tree.
  • Publish or discard changes individually or altogether for other team members to see.

With Live UI, rule management is automated, 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:

  • Harnesses
  • Panels
  • Containers
  • Sections
  • Layouts
  • 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 guidelines, see the Pega Community article Associating a skin with the user interface.

Privileges

The 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.

Starting the Live UI tool

From Dev Studio:

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

From an application:

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

Using Live UI

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.

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 more information, see the Pega Community article Using the Live UI tool.

Sidebar tabs

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 the Tick icon to publish (check in) the selected record from the list of pending rules.

Click the X icon 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.

UI structure

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.

Selecting an item

  1. Hover over the tree or document to display a blue outline around the targeted element.
  2. Click an element to make it the focus. The highlighted color changes to green while other elements remain highlighted in blue. Click another item to make it the focused item, highlighted in blue.

When an item is focused, it presents a Live UI toolbar showing a set of activities available for the item.

Live UI toolbar

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-tip 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:
  • Hover over an element to follow its hierarchical path (highlighted in blue) in the work area and in the Live UI tree.
  • Click an item in the panel to highlight the element in the work area and sidebar.
  • Click the Open icon to open the rule in Dev Studio.
  • Move off the panel or click the header again to dismiss the breadcrumb trail panel.
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:
  • 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.
Open rule Opens the selected rule. Standard Pega 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.
View / Add / Delete View the properties of the selected element. Elements (a dynamic layout, section, paragraph, etc.) may also be added within, before, or after the selected element. For more information, see Editing with Live UI and Editing dynamic layouts with Live UI.

Undo last edit

With the Live UI tool enabled, you have the option to undo the last edit made to a property.

Undo button – Pega 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.

Enabling run-time branching and editing

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:

  1. Open the Application rule form.
  2. Verify that a ruleset branch is set up for the application. You must designate the run-time branch as the first branch in the application.
  3. Click App > Branches.
  4. Right-click the branch, click Use for edit at run time, and click Submit. Alternately, use this menu to disable run-time editing from the selected branch.

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.

Publishing and discarding records with run-time branching

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."

How to batch publish or discard

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.

Publishing all

  1. Click Publish all and enter a comment (required) in the Publish Comment field.
  2. Click Publish. The rules are saved in the default run-time branch and a copy of each original or base rule is placed in your personal ruleset. Each record is now displayed in the list of published rules and removed from the pending list. All other users are able to now check out (or edit) these rules.

Discarding all

  1. Click Discard all. A comment is not required for batch discard.
  2. Click Discard. Any pending rules that were already in the run-time branch are discarded; any rules that were just for checkout are removed from the run-time branch. All records are removed from the pending list.

How to publish or discard individual records

You can publish records individually from the Pending tab.

Publishing individual records

  1. Click the Pending tab or click the blue "records available to publish" link at the top of the Live UI sidebar to display a list of unpublished records you have edited and saved.
  2. Click the Tick icon to publish the selected record from the list of pending rules and enter a comment (required) in the Publish Comment field.
  3. Click Publish to check in changes for the record you selected. The selected rule is saved in the default run-time branch and a copy of the original or base rule is placed in your personal ruleset. The record is automatically removed from the pending list and displayed in the list of published rules.

Discarding individual records

  1. Click the Pending tab or click the blue "records available to publish" link at the top of the Live UI sidebar to display a list of unpublished records you have edited and saved.
  2. Click the X icon and click the Discard to remove the item from the list of pending records. The selected pending rule is discarded and the record is removed from the pending list.