Back Forward Harness form — Adding a panel set

 About Harnesses

Beginning with 7.1, panel sets are deprecated.

As a best practice, upgrade panel sets to screen layouts. Screen layouts are available only to user interfaces rendered in HTML 5 Document Type (standards mode). You can choose from one of many different screen layout formats, each of which can be styled in the skin.

Existing panel sets continue to function, but you cannot create a new panel set in applications rendered in HTML 5 Document Type (standards mode). You can create new panel sets in Quirks mode.

Updating panel sets to screen layouts

Prior to updating a panel set, make sure that the screen layout that you select contains regions that correlate to the areas in the existing panel set.

If an existing panel set area does not correlate to a region in the screen layout, it will not be retained on upgrade.

For instance, if you want to update a Header Left Right panel set, select the Header Left Right screen layout, to ensure that all sections in the panel set display in the new screen layout.

  1. Open the harness that contains the panel set that you want to upgrade.
  2. Select Layout > Screen Layout from the toolbar.
  3. A message displays indicating that the current panel set will be replaced by the screen layout that you select; click OK.
  4. Select the desired screen layout from the dialog. Make sure that the screen layout that you select contains regions that correlate to the areas in the existing panel set. If an existing panel set area does not correlate to a region in the screen layout, it will not be retained on upgrade.
  5. Click OK.

About panel sets

Use a panel set to define the structure of a harness that is to be included in a composite portal. A harness can contain only one panel set. Each panel in a panel set can contain a single section. That section may hold a layout, which in turn can hold various controls or included sections.

Planning is important; determine the purpose of each panel and identify the section to be placed in each panel in advance. Select a panel set to define an overall design for the harness.

For the overall procedure, see How to build a composite portal.

1. Add the panel set

Click the down-arrow (Arrow) at the right end of the Layout control group (Layout group) and select the Panel Set control (Panel Set).

In the pop-up list that appears, select one of the 14 design choices for the panel set, for example Top_Center_Bottom (Portal). Click OK.

The harness form changes to match your selected design. Each panel set has one or more panels, each identified by position as Top, Left, Right, Bottom, or Center. Each panel can contain a section.

If the SmartFrames gridlines are not visible, click Gridlines to present the SmartFrames wireframe preview.

You can reconfigure an existing portal using the Panel Set control. Make sure that the new panel set can hold the sections in the existing set. For instance, if you convert from a Full panel set to the Header Left Right set, the section in the Bottom panel will not appear in the new set.

2. Complete the Panel Set property panel

Click the Magnifying glass icon (Magnifying glass ) next to the Panel Set header. Property fields may appear at the top of the panel, or in one or more tabs. If the panel is pinned (Pinned), click Apply to apply your changes. Click the red x at the top right of the panel to close it. If the panel is not pinned, click Apply to apply your changes and continue editing, or OK to apply your changes and close the panel.

Field

Description
Width Controls the overall width of the panel set within the window. Enter a numerical value. The width at runtime is based upon value in the Unit field. For example, a width of 100 and a unit of % produces a panel set that completely fills the window.
Unit Select % or px (pixels) as the unit of measure applied to the Width value.
Align Select the position of the panel set in relation to the window.
Inline Style Optional: Override the stylesheet settings for the panel set with local values.

Enter CSS code for an inline style. For guided assistance in composing a style definition, click the magnifying glass icon (Magnifying glass) to open the Style Editor. You can select from predefined lists or type a style definition directly, and preview the results.

3. Add sections

To add a section to a panel, do one of the following:

Repeat for each panel in the Panel set. For details on how to add a section, see Harness and Section forms — Adding a Section. You cannot edit the section directly in the harness. Open the rule from the properties panel.

4. Edit the harness panel's properties panels

To open a harness panel's properties panel, select it and click the magnifying glass icon (Magnifying glass).

Top fields

Field

Description

Use Section

SmartPromptSelect or confirm the Purpose key part of the section. Click(magnifying glass) to open or create the section. Click ( Magnifying glass) to enter parameters for the section or to share the current parameter page with the section. The Applies To key is, by default, the same as the current section.
Visible When

SmartPrompt Optional. To control visibility of the section, enter or select one of the following:

  • The When Name key part of a when condition rule. Click(magnifying glass) to review or create the rule.
  • Simple expression based on the comparison of a pair of constants, properties, or both, combined by Boolean operators, such as .Color="Red". You can combine the expression with a when condition rule or another expression using the && and || operators

As a best practice, use the Condition Builder to edit this field. Click ( ) to open the tool. See Using the Condition Builder to configure dynamic UI actions.

Run on Client

This checkbox appears only if the Visible When field contains a simple comparison. Cannot be used if the expression is combined with a When condition rule.

Select to cause evaluation and execution of the condition each time the value of a property stated in the condition changes. If unselected, the expression is evaluated and the condition executed when the form is initially presented and whenever the form is refreshed. By default, controls that allow typing, such as Text Input, are evaluated when the user leaves the field. To re-evaluate conditions as the user types, use the Apply Conditions action with a Keyboard event. See Control Form — Completing the Control tab.

Title

Optional. Enter literal text, a reference directive, reference JSP tag, Lookup directive, or JSP tag to derive the text to appear in the left title area of a header. For example, enter

{.pyLabel}

or equivalently

<pega:reference name=".pyLabel" />

to use the value of a property named pyLabel as a title.

NoteIf your application is to support users in multiple locales, choose a noun or noun phrase for the caption. When practical, choose a caption already included in a language pack, to simplify later localization. Select the Localize? box on the HTML tab. Limit title text to no more than 64 characters, even after JSP or directive tags are expanded. See About the Localization wizard.

General tab

Options depend upon the position of the panel. The Center panel has no fields on this tab.

Field

Description
Height Top and Bottom panels only. Enter an initial height in pixels for this panel.
Width Left and Right panels only. Enter an initial width in pixels for this panel. The Center panel width is determined by the width of the left and right panels, and overall width of the panel set. For example, if the Left and Right panels are 50 pixels wide, and the overall width is 200, the Center panel is 100 pixels wide.
Expand/Collapse Select to allow the user to collapse this panel at runtime by clicking an expand/collapse icon.
User Resizable Select to allow the user to stretch or shrink the height of this panel at runtime, by dragging a handle.

Advanced tab

Field

Description
Refresh When SmartPrompt Optional. Enter a simple expression based on the comparison of a pair of constants, properties, or both, combined by Boolean operators.

As a best practice, use the Condition Builder to edit expressions. This tool also lets you trigger a refresh based on a On-Change or Add/Delete user interface actions, or specify a pre-activity and/or data transform. See Using the Condition Builder to configure dynamic form actions.
Using Page

Optional. Identify the name of a clipboard page on which the properties referenced in this section are to be found. By convention, the page containing the work item is named pyWorkPage.

If you leave this field blank, PRPC assumes that properties referenced in this expansion area are found on the primary page of the activity that displays the harness form. If, at runtime, no page with this name is found, all HTML output from this section is suppressed.

If you name a page in an Applies To class that is not the harness's class inheritance path, define the name and class on the Pages & Classes tab before you save the rule.
View Privilege

SmartPromptOptional. Identify the second key part — Privilege Name — of a privilege required to view the contents of this panel. If a user does not hold this privilege, the section does not appear. If blank, all users can view this panel.
Update Privilege

SmartPrompt Optional. Identify the second key part — Privilege Name — of a privilege required to update data in this panel. If a user does not hold this privilege, the section appears as read-only. If blank, all users can update data in this panel.

5. Test

  1. Save the harness.
  2. Reference the harness in on the Spaces tab of a composite portal rule.
  3. Select Access Group from the Profile menu.
  4. On the Settings tab of the Access Group form, add the portal rule into the Secondary Portal Layouts area. Save.
  5. Select Run > Open Portal>portal to open the composite portal.

Up About Harnesses