Harness, Section, and Flow Action forms
Adding a layout

Field

Description

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.

The width and other style characteristics of these Smart Layout templates depends on the portal skin rule in use. To 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.

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

Select to create a layout that can present values from a Page List or Page Group property . Select:

• Row — to present each element of a Page List or Page Group property in horizontal rows, typically with labels in the top row. See Adding a Row Repeat layout.
• Column — to present each element of the property in vertical columns, typically with labels in the leftmost column. See Adding a Column Repeat layout.
• Tabbed — to present each element of the property as a tab, typically with labels in the tab button. Adding a Tabbed Repeat layout.

Select to create a freeform layout providing you with full control over the width and height of each cell. Use this option in special situations where a the restrictions of a Smart Layout are not appropriate.

For example, use freeform when a cell of the layout must contain a large control such as a embedded section, list view, List-to-List control, or Work Area control.

Enter two positive integers to control the initial number of rows and columns in the grid.

Field

Description

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

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.

Using the Application Skin wizard, you can review or revise the styles (colors, fonts, padding and margins) associated with each header or subheader format.

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

If 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 Format field contains No Format, Hidden, or Hidden (Sub).

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

If this is a Smart Layout, you can change the template selected previously.

If you change the Template to Custom:

• The change cannot be reversed; a Custom template can never become a full Smart Layout.
• Column restrictions remain in force, but you can change the type of any column, including to the None (unrestricted) value.
• Row restrictions remain in force, but you can remove them if all columns have a None type.

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

• Leave blank to always present the header.
• A when condition rule. Click the pencil icon () 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.

To make a dynamic condition, enter 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)

This causes 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.)

Field

Description

Select one of the following header styles. This field does not appear if the Format value is No Format, Hidden, Hidden Sub,Custom, or Outline.

Optional. Only applies to Collapsible header styles. Select a when condition rule to control whether this layout appears expanded or collapsed upon initial runtime presentation.

If blank, the state of the layout (expanded or collapsed) when you save the Harness, Section, or Flow Action form becomes the state upon initial runtime presentation.

Optional. If the Header Type is Tabbed or Accordion, 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.

This field appears for Collapsible, Tabbed and Accordion values of the Header Type. Select to postpone, at runtime, the loading of the contents of this layout from the server until the user clicks to make the body visible.

For Header Type of Tabbed only. Select to present this tab as the first in a distinct group of tabs, identified by indenting and optionally styles.

For Header Type of Accordion only. Select to start this accordion element as the first in a group.

Field

Description

Optional. To control visibility of the body of the layout, enter or select one of the following:

• Leave blank to present the body always.
• A when condition rule. Click the pencil icon () 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.
• Simple Java expression evaluated upon JavaScript events — To dynamically control the visibility of the body with a JavaScript event, enter a simple comparison involving a target property. The result at runtime determines whether the content of this cell appears in read-only styles or in the styles of the enclosing layout.
  For example, enter .Color =="Red" in this field to make the body visible when the property Color has the value Red, and read-write styles otherwise. Depending on the state of the Run on Client? check box, the comparison can be executed only once as the form is initially displayed, or dynamically. See Implementing dynamic form actions and the Client Event Editor.

Optional. Select whether the width of columns in the table are to be set as a percent or in absolute pixels. Choose:

• % — To have the column widths on the work object form or flow action form adjust to fractions of the total width of the work object form or flow action form. For example, if you adjust the column on the rule form to be 25 percent of the total width, the column on the work object form or flow action form will be 25 percent of the form width, and will grow or shrink if a user resizes the form.
• px — To have the column widths on the work object form or flow action form match, in pixels, the column widths on the current rule form. (Internet Explorer may adjust column widths to avoid truncating values in the column.)
• px-fixed — To specify a column width exactly. Internet Explorer uses this width even when data values may be longer (after applying styles, margins, padding, and so on). The display may truncate (partially obscure) a data value if the value is wider than width defined by the pixel value.
• stretch-spacer — To adjust the width of the Spacer columns. Field and Label column widths do not change; Spacer columns are shrunk to be narrower or expanded to be wider. (As a best practice and to prevent a warning condition, do not choose stretch-spacer when the Template is Single.)

If you choose px-fixed and a property value at runtime is wider than width defined by the pixel value, the value is truncated, and users are unable to see the full value.

Optional. Click the magnifying glass icon() to open the Image catalog. Search for an image to include on the left side of the header.

Select to convert this Smart Layout to a quasi-freeform layout, allowing you to add or remove columns.

• The change cannot be reversed; a quasi-freeform layout can never become a full Smart Layout.
• Column restrictions remain in force, but you can change the type of any column, including to the None (unrestricted) value.
• Row restrictions remain in force, but you can remove them if all columns have a None type.

If all restrictions are removed, you can change the height of individual rows, or the width of individual columns.

Field

Description

Select a Column Type. For Smart Layouts, drag and drop operations work best when adjacent cells have the Label and Field types.

Set the column width in pixels. This field does not appear for columns that are part of a Smart Layout.

Clear the Use at Runtime check box to allow the browser at runtime to determine the width of this column based on the size of the column contents and the size of other columns. The width may vary from use to use depending on the contents of this cell and other cells. (When cleared, the generated HTML for this column includes a <TD> element with no WIDTH= attribute.) The Width value is used as you view the rule form, but not at runtime.

For example, clear this check box if the cell is to contain a section rule that may be wide in some situations and narrow in others.

Select the Use at Runtime check box to force the Width value to be used by the browser at runtime, even when data values in this column or in other columns would otherwise cause the browser to present a wider or narrower column. If checked, data values may sometimes wrap or appear truncated.

This field does not appear for columns that are part of a true Smart Layout.

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

Select to change the cell HTML element from <TD> to <TH>, with a resulting style change.

Field

Description

As a best practice, use Smart Layouts to achieve uniform height of cells throughout your application's forms. You can set the row height of Smart Layout templates using the Application Skin wizard.

Optional. Enter a positive number for the height in pixels of this cell. (At runtime, normal browser processing for rendering tables determines the actual displayed height.)

This field appears only when no columns in the Layout not controlled by Smart Layout column restrictions (that is, all columns have the None template). In that case, you can also adjust the height of a row directly:

1. Click a horizontal wireframe cell border.
2. Wait until the pointer shape changes (), then drag the border.

Clear the Use at Runtime check box to allow the browser at runtime to determine the height of this row based on the size of the row contents and the size of other rows. The height may vary from use to use depending on the contents of this cell and other cells. (When cleared, the generated HTML for this column includes a <TD> element with no HEIGHT= attribute.) The Height value is used as you update the rule, but not at runtime.

For example, clear this check box if the cell is to contain a section rule that may be tall in some situations and short in others.

Select the Use at Runtime check box to force the Height value to be used by the browser at runtime, even when data values in this column or in other cells would otherwise cause the browser to present a taller or shorter column.

This field does not appear for rows that are part of a true Smart Layout.

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

Select this option to have the heading styles apply to each cell in the column.

Control

Description