The Live UI tool helps you to identify Pega 7 user interface (UI) elements rendered on the current page. You can also quickly make UI adjustments at runtime and publish or discard changes on the fly. With Live UI, rule management is automated in Designer Studio, enabling less technical developers to modify the UI.

Live UI works in all browsers supported by Pega 7.1.7 and higher, including Internet Explorer 9 or higher. (Internet Explorer 8 users will only have access to the older UI Inspector tool.)

Once you have enabled Live UI and selected an element, you can:

• Open the related rule directly in Designer Studio (similar to the UI Inspector tool from Pega 7.1.6 and earlier).
• 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.
• Navigate the Pega 7 UI hierarchy using the UI tree.
• Publish or discard changes individually or altogether for other team members to see.

Additionally, use the Live UI tool to 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 Associating a skin with the user interface.

Using the Live UI tool

This article discusses general usage of the advanced Live UItool, introduced in Pega 7.1.7.

• How Live UI works
• Launching the Live UI tool
• Configuring the Live UI display
• Selecting an element
• Interacting with an element
• Making edits at runtime
• ​Publishing and discarding edited records
• Viewing history in runtime branch
• Design-view editing for technical developers

How Live UI works

Runtime branch for automated rule management

Live UI allows a lead developer to set up and manage a runtime 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 in their respective Properties panels, then stored in the runtime branch for later review and merging by the lead developer.

Using runtime editing, less technical users can quickly edit most common properties of a control or a layout. To enable runtime 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 runtime branch as the first branch in the application.
3. Click the branch's Actions link and selectUse for edit at runtime from the menu to enable "edit at runtime" mode. Alternately, use this menu to disable runtime editing from the selected branch.

Launching the Live UI tool

Open the Live UI tool by clicking the Live UI button at the bottom of the screen.

• In Designer Studio, this button is available in the footer toolbar.
• At runtime, this is available at the bottom of the screen if you have the correct user privileges.

When active, the text in the Live UIbutton is highlighted in blue.

Configuring the Live UI display

Activating the Live UI tool displays a sidebar column with 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.

Default display	Collapsed display

You can adjust the width of the sidebar by dragging its edge with your cursor. The width remains consistent even if the Live UI sidebar is closed and then reopened.

Selecting an element

To select an element, move your cursor over any of the items on the page or in the sidebar, which highlights the artifact in blue in both locations.

Click either the item on the page or the name in the sidebar list to change the ancestor structure and to change the highlighted element from blue to green.

Only one element can be selected at a time, and the selected item remains highlighted in green until you select a new element, refresh the sidebar, or turn the Live UI tool off.

To refresh the sidebar, click the refresh icon at the top of the sidebar to clear the selected element and redisplay the default expanded hierarchical list.

Interacting with an element

Once an element has been selected, a Live UI toolbar presents several icons next to the element's name, depending on its type. Below is an example of an element with all available options.

These options are also displayed when selecting the item from the sidebar list. These options allow you to do the following:

• Breadcrumb trail - displays a breadcrumb trail panel with a list of immediate ancestors (sections and harnesses only) that you can use to follow an element's hierarchical path with blue highlighting.

  

  Click an item in the panel to highlight the element in the work area and sidebar. Move off of the panel or click the header again to dismiss the breadcrumb trail panel.

• Open rule - opens the selected rule
• Gear icon - opens the Cell Properties panel for the element in edit mode (if authorized). If you do not have editing permissions, or if the selected rule is checked out by another user, then the Cell Properties panel opens in read-only mode and a message is displayed.​​
  
  ​

See Making edits at runtime for more information on editing in design mode and user permissions.

• Sheets of paper icon - adds the property to the scratch pad
  • You can also add a property to the scratch pad from the Info icon popup menu if applicable by clicking the "Add property to scratch pad" link.
    
  • This icon does not appear next to an element's name in the sidebar, but can still be selected from the Info icon pop-up menu in the sidebar if applicable.
    
• Info icon - displays information about the element in a pop-up menu. Click a link to open the selected rule.

Declarative properties

Declarative items are listed with a "D" next to the element's name in both the sidebar and the main window.

• In the sidebar, a pink D turns black when you hover over the element's name.
  
• In the main window, a black D is displayed.
  

Clicking the "is calculated declaratively" link on the Info icon popup menu opens the declarative network display, but ONLY when accessed using Internet Explorer.

​

Making edits at runtime

Less technical users can use Live UI mode to:

• Edit Fields
• Adjust layout properties
• Update styling
• Demo and edit UI quickly and easily

You can make edits at runtime by toggling the Live UI button in the runtime environment. With Live UI mode active, hovering over an item outlines the control as described in Selecting an element.

Clicking the Gear icon next to the header opens the Cell Properties panel. Here is where you can check out the control and also edit it. Clicking OK initiates validation on the backend, and will either:

• Show any validation errors within the UI message area and redisplay the Cell Properties panel, or
• Save the edits to the specified branch and close the Cell Properties panel.

Undo last edit

With Live UI enabled, you have the option to undo the last edit made to a property. A copy of the rule that you are editing is stored as you make changes to it.

Click the arrow icon at the top-left of the Live UI sidebar to undo the last change you made to a record.

Toggle interaction

When the Live UI tool is active, you can still navigate to a different page without turning the tool off. Check the toggle interaction icon or press Ctrl + Shift on your keyboard to regain access to page navigation.

Click the icon again to reactivate Live UI tool functionality.

Publishing and discarding edited records

When you edit elements using the Live UI tool, you have the option to publish or discard records as a batch or at the individual level.

Batch publish/discard

Click the orange Publish all button to apply all edits to the UI in the designated runtime branch. Click the Discard all button to remove the edits from your history.

Individual record publish/discard

Select the Pending tab in the Live UI sidebar to display a list of unpublished records you have edited and saved. Next to each edited record, two icons are displayed.

• Publish – select the check box icon to publish the selected record from the list of pending rules.

Enter a comment (required) and select Publish to check in changes for the record you selected. The record is automatically removed from the pending list and is displayed in the list of published rules.

• Discard (individual) – select the X icon to discard the selected record from the list of pending rules.

Click the Discard button to remove the item from the list of pending records.

Viewing history in runtime branch

View a log of all records published across all users in the runtime branch, sorted by a time-stamp record and the corresponding Operator ID.

Expand a record to view a list of rules published in the publish event.

Design-view editing for technical developers

Technical developers may at times find a special case in which they wish to edit in design view. As a technical developer, any rules you have already checked out in Designer Studio may also be edited using Live UI. In this case, rules are saved in the branch you have used for check out instead of the runtime branch. This enables WYSIWYG-editing of UI elements in addition to Pega 7 development tools.