Back Forward Harness and Section forms
Adding a tab

 About Harness rules

 zzz Show all 

If a container has a Standard Header (on the Container tab of the Container panel) and the Layout (on the Header tab) is set to Tabbed, you can add additional tabs to the container. Plan the titles and sequence of each tab before adding any, as you can't reorder them after they are added.

For an example, see Pega Developer Network article PRKB-25411 How to create layouts that contain tabbed headers.

TipRemember to make the desired tab front-most when you save the Harness, Section, or Flow Action form, as your choice determines which tab is front-most in the initial runtime presentation.

 zzz 1. Adding and deleting the tab

Click the down-arrow (Arrow) at the right end of the Layout control group (Layout group) and select the Tab control (Layout). Drag the control. When the pointer changes shape to indicate that you can drop the control, release the mouse button. Click the magnifying glass (Magnifying glass) icon to display the Containers panel.

 zzz 2. Complete the Layout Tab panel — Top fields

Complete the Layout Tab panel that appears.

Your updates to this panel can update the rule form immediately or upon clicking Apply, depending on the Property Panel settings in your Edit preferences. See Setting preferences. If the panel is pinned(pin), the wireframe on the rule form changes immediately to reflect your inputs. If the panel is not pinned(pin), click Apply to apply your inputs.

Field

Description
Header

SmartPrompt Choose a format to control what appears above the layout (known as a header or subheader), and the appearance of both the header or subheader if any, and aspects of the body.

A tab must have a header. Do not choose No Format, Hidden or Hidden (Sub).

This choice primarily affects styles and appearance. Information in or below a subheader (including Hidden Sub) present information that is right-indented from information in a header.

Group/Selection

Description

Default

  
No Format Do not use.

Header

 
Standard

For a bolder or more prominent header.
Custom

For a custom header. Select in the HTML field an HTML rule that defines the content and appearance of the custom header.
Hidden Do not use.

SubHeader

 
Standard (sub)

For a bolder or more prominent sub header.
    A

  B

  C

  D

These names are provided so that you can apply separate styles to the up to 5 types of subheaders (counting the basic SubHeader).

For example, if your forms include three hierarchical levels of subheaders, you can select A for the highest level, B for the middle level, and C for the lowest level.

In the standard style sheets, these subheaders function identically; they differ only in minor ways in the presentation of the subheader:

  • A — No bar in the subheader
  • B — Underlined subheader label
  • C — Outline border
  • D — Black font
Outline

Provides no header area, but a border around the contents of the layout with a single text label. (This produces HTML FieldSet and Legend elements).
Hidden (Sub)

Do not use.
Title

Enter text to appear in the header or subheader. This text may include directives or JSP tags, such as <p:r > or <pega:lookup >.

NoteIf you plan to localize the application using this rule so the application can support users in various languages or locales, choose the text carefully and limit the length to no more than 64 characters. When practical, choose a caption already included in a language pack, to simplify later localization. A field value rule with this text as the final key part is needed for each locale. See About the Localization wizard.

This field is not visible if the Header field contains No Format, Hidden, or Hidden (Sub).
HTML

If the Header field contains Custom, identify the Stream Name (second key part) of an HTML rule that defines the content of the header.

Template

Select to create a Smart Layout grid containing fixed-width, fixed-height column pairs. Each column pair is designed to hold one label and one field, typically for a Single Value property value.

Select a template:

  • Single — A single column pair.
  • Double — One column pair, a spacer column and a second column pair.
  • Triple— Three column pairs with two spacer columns.

NoteThe width and other style characteristics of these Smart Layout templates depend on the portal skin rule in use. For ensure consistent results when building harness, section, or flow action rules for work object forms, set the Skin preference (in the Run Process area of the General Preferences group) to the skin that application users are expected to use. You can change template widths, heights, cell padding, and other characteristics of the templates using the Application Skin wizard. See About the Application Skin wizard.

AdvancedBy design, you cannot change the height or width of Smart Layout template-based cells through rule form updates. However, Process Commander records the template cell height and widths in styles for the <TD> HTML element. If at runtime a cell contains an object that is explicitly larger than these values, browsers do expand the table cell to attempt to display the entire object, overriding the fixed size restriction. The resulting display may vary somewhat by browser version.

Visible When

Optional. To control visibility of this tab header, enter or select one of the following:

  • Leave blank to always present the tab header.
  • SmartPromptA when condition rule. Click the pencil icon (Pencil) to review or create the when condition rule.
  • Expression evaluated once — Enter an expression that returns true or false. This expression can involve multiple properties, function calls, and other syntax as supported by the <pega:when > JSP tag.
Run on Client?

This check box appears only if the Visible When field contains a simple Java comparison of a property and a value, or a combination of such comparisons using parentheses and the && and || operators, such as:

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

Select to cause dynamic execution of the condition each time the value of a property mentioned in the condition changes. (Mark the fields containing such properties as a Client Event.) Leave cleared to cause the condition to execute only once, upon initial presentation of the form.

 zzz 3. Complete the Layout Tab panel — General tab

Complete the General tab.

Field

Description
Header Type

SmartPromptSelect Tabbed.
Style Prefix

AdvancedOptional. If the Header Type is Tabbed, this field provides the ability to reference a family of custom styles for headers. Enter a single letter or a few letters that designate a collection of styles for this header.

For example, type A in this field to use styles named .A_standardheader* rather than the normal .standardheader* styles. Define the prefixed styles in your workform_zzzzz.css text file (created by the Application Skin wizard) or in another text file that you identify on the Scripts and Styles tab of the Harness form.

Retrieve Activity Optional. If Defer Load is selected, you can specify an activity to be run when the container is expanded by a click. This activity can compute property values and other aspects of the expanded container.
Defer Load?

Select to postpone, at runtime, the loading of the contents of this tab from the server until the user clicks to make the body visible.
New Tab Group

Select if you want to start a new row of tabs.

 zzz 4. Complete the Layout Tab panel — Advanced tab

Complete the Advanced tab.

This tab is identical to the Advanced tab of the Layout control. See Adding a Layout control — Complete the Layout panel — Advanced tab.

 zzz 4. Optionally, add a control to the single Tab cell

AdvancedA single cell appears at the right end of each tab. When updating a harness, section, or flow rule, you can optionally add any control from the Basic group Basics to this cell. The runtime presentation of cell contents is read-only.

For example, the cell can contain a label (Label ), a property value presented as a text box (Input Box ) or even a select control (Select ).

To include a control in the cell, complete the Container panel first as described above. Save the form. Then select, drag, and drop a basic control from the Basic group, as is normally done within a layout. Open the Cell Properties panel and configure the control.

zzz About Harness rules