You are here: User interface > User interface rules > Harness forms > Harness forms - Adding a container

Harness form - Adding a container

A container can provide a visual grouping of other elements on a harness form, including sections and subsections. Every harness contains one or more containers. A container can contain a header, and includes the area of the harness form where tabs appear, if you use tabs to present sections.

Adding and deleting containers

  1. Add a Container control by using one of the following methods:

  2. Click the Gear icon .The Container panel is displayed and you can make the required changes to the properties.

To delete a container, select the layout and click the Delete Row button, not the Delete Cell button.

After you complete the Container panel properties, add a section to the container. For more information, see Harness and Section forms — Adding a Section.

Field

Description
Format Choose a format to control what appears above the layout (known as a header), and the appearance of both the header, and aspects of the body. This choice primarily affects styles and appearance.

Group/Selection

Description

No FormatNo header appears. In addition, no styles applied to the body that are specific to this container, including background, fonts, colors, padding, margins, and so on.
Standard HeaderFor a bolder or more prominent header. The Standard format is styled in the Skin rule. In the Skin rule select the Container component and enable the Show legacy style check box. A Standard format will appear. You can customize the font, border and background styling.
Custom HeaderFor a custom header. Select in the HTML field an HTML rule that defines the content and appearance of the custom header.
No HeaderA header is not rendered.
No markupRecommended. Removes the non-semantic table tags from the markup. This is required to correctly display flexbox-based dynamic layouts in Internet Explorer 11.
HTML

Identify the Stream Name key part of an HTML rule that defines the contents and appearance of a custom header. The system uses the Applies To key part of this harness as the first key part of the HTML rule.

This field appears when you select Custom Header for the Format field.
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.

This field is visible when you select Standard Header for the Format field.

Note: If 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.
Visible When Optional. Leave blank so that the section is always visible. To control the visibility of the section, enter or select one of the following:
  • The When Name key part of a when condition rule. Click the Open icon 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 the Gear icon to open the tool. See Using the Condition Builder to configure dynamic UI actions.

Note: Do not confuse Expanded When with Visible When. When collapsed but visible, the clickable header appears. When not visible, nothing appears.
Run on Client?

Appears when you enter a simple expression in the Visible When field.

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.

Complete the Container panel — General tab

Complete the General tab. Fields on this tab change depending on your choices for Format and Header Type. This tab has no fields on this tab if you select No Header or No Format in the Format field.

Field

Description
Using Page

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

If you leave this field blank, the Pega Platform assumes that properties referenced in this 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 row is suppressed — both the top-level header and the included sections.

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

Note: This field does not appear if the Header Type is Tabbed.
Header Type Choose the format to be used to present this header:
  • Bar — A horizontal bar that is always present. The section appears as a single horizontal strip; all labels and values visible on the strip.
  • Collapsible — A horizontal bar marked with an expand icon or collapse icon that marks an area below the bar that users can expand or collapse (hide).
  • Tabbed — A labeled tab. Users can click one tab to make it front-most, hiding other tabs temporarily.
  • Accordion — A labeled accordion-style layout. At runtime, users can click one bar to make its content appear; this also hides the content of other accordion bars in the container.
Edit Options Select an edit mode for this container.  
  • Auto — Uses the edit mode of the harness. For example, a New harness is editable, while a Review harness is read only.
  • Editable — All parts of the horizontal header area and all parts of the sections referenced in this container are editable.
  • Read Only — All parts of the horizontal header area and all parts of the sections referenced in this container always appear in read-only mode (and with read-only styles). Use the Read Only Condition field to control this behavior based on a condition.

You can override this container setting by modifying the Edit Options for a control on the cell Properties panel.
Read Only Condition This field appears only when you select Read Only in the Edit Options field.

To control the container's read-only behavior, enter or select one of the following:

  • The When Name key part of a when condition rule. Click the Open icon 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 the Gear icon to open the tool. See Using the Condition Builder to configure dynamic UI actions.
Image Optional. You can identify a small image to appear at runtime to the left of the title text. Enter the relative path to a binary file image, in the format path/name.ext.

Click the Gear icon to open the Image Catalog (a pop-up version of the Image Library landing page). Select the binary file you wish to use.
Defer Load? If you choose Collapsible, Accordion, and Tabbed as the Header Type, Select this box to transmit the details for this header to the browser on the user workstation only when a user clicks a plus sign or tab to view the expanded details of this header. Fields that do not interest most users are not transmitted unless the browser client sends an explicit request later.

Clear this box to force details for this header to be transmitted to users' workstations upon initial display, even when the body is not open.

For the Collapsible header type, this option is only active if the container is set to collapsed mode on the layout (initially rendered as collapsed during runtime presentation).
New Tab Group? For Header Type of Tabbed only. Select to remove this tab from the tab group, and add it as a new tab group directly below the original group. Deselecting this property causes the separated tabs to merge back into the original tab group. Deselecting this option causes the separated tabs to merge back into the original tab group.

If this is the only tab in a group, his option is selected by default and cannot be changed.
New Layout? For Header Type of Accordion only. Select to remove this layout from the layout group, and add it as a new group directly below the original group. Deselecting this property causes the separated group to merge back into the original group. Deselecting this option causes the separated group to merge back into the original group.

If this is the only accordion in a group, this option is selected by default and cannot be changed.

Complete the Container panel — Advanced tab

Complete the Advanced tab. Some fields on this tab change depending on choices you make in the top fields and General tab.

Field

Description
With Style Optional. Identify the name of a CSS style for the container. Click the Open icon to review the text file rule that contains the style.
Retrieve Activity

Optional. If Defer Load? is selected, you can specify an activity to be run when the container is made visible when the user opens the body within the header (for instance, clicks the expand icon on a collapsible header). This activity can compute property values and other aspects of the opened container.
Expanded When Optional. Only applies to Collapsible and Tabbed header styles. Identify a when condition rule or a Java expression to control whether the container is initially presented as expanded or collapsed.

Leave blank so that the state of the layout (expand icon or collapse icon) when you save the Harness, Section, or Flow Action form becomes the state upon initial runtime presentation.

Select one of the following:

  • The When Name key part of a when condition rule. Click the Open icon 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. For example:

.Width >= "20" && .Length >= "40"

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.

Note: Do not confuse Expanded When with Visible When. When collapsed but visible, the clickable header appears. When not visible, nothing appears.

About Harnesses

Open topic with navigation