Back Forward Harness, Section, and Flow Action forms
Adding a layout

About Harness rules
xxxxxxxxxxx REVISE FOR GRP-7426 use a report definition rule as a data source

  Show all 

Every section and every flow action contains at least one layout (or other form of repeating layout). A layout defines a rectangular area on the form corresponding to the HTML <TABLE > element. Proj-649 5.4

You can add layouts above or below the current layouts.

 1. Adding and deleting layouts

Click the down-arrow (Arrow) at the right end of the Layout control group (Layout group) and select the layout control (Layout). Alternatively, click the Layout control group itself to pop-out the Layout control group window. Drag the control on to the work area. When the pointer changes shape to indicate that you can drop the layout, release the mouse button.

Alternatively, you can select an existing layout and click the Insert Row Above () or Insert Row Below () button to add a new one above or below the selected one.

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

 2. Complete the Layout Options form

Select a radio button and complete this form to control the appearance of the grid. Then click OK.

Field

Description

Template

Select to create a SmartLayout 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 SmartLayout 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 Branding wizard. See About the Branding wizard.

Advanced featureBy design, you cannot change the height or width of SmartLayout 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.

Repeating

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

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 SmartLayout are not appropriate.

For example, use freeform when a cell of the layout must contain a large control such as an 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.

NoteYou can convert a SmartLayout to a freeform layout at any time. However, use care, because the reverse is not possible. You can't directly convert a freeform layout to a SmartLayout.

OldThe SmartLayout capability is introduced in V5.5. If you have a harness, section, or flow action rule created in a release before V5.5, you can update the rule to use SmartLayouts, which provide more consistent spacing and use of styles. See How to convert a section or flow action rule to SmartLayouts.

 3. Complete the Layout panel — Top fields

Click the magnifying glass icon (Magnifying glass) to open the Layout panel.

Complete the top fields, General, and Advanced tabs. GRP-229

Field

Description

Format

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 Branding wizard, you can review or revise the styles (colors, fonts, padding and margins) associated with each header or subheader format.

Group/Selection

Description

Default

 
No Format

No header or subheader appears. In addition, no styles are applied to the body of this layout, including background, fonts, colors, padding, margins, and so on. The appearance of the body depends on styles of the enclosing control (which may be another layout).

Accept this default value in most cases to help ensure vertical alignment of columns even when multiple SmartLayouts appear on one form.

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 For no header. (This option is not available for the top-level of a harness rule).

SubHeader

 

Standard (sub)

For a bolder or more prominent sub header.

    A

  B

  C

  D


     E

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

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
  • E — Preserves V5.5 flow action styles for layouts created from V5.5-style flow actions. BUG-26946 V6.1SP1.
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)

For no subheader, but indented body.

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

HTML

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

Template

If this is a SmartLayout, 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 SmartLayout.
  • 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.
Visible When

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

  • Leave blank to always present the 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.

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

 4. Complete the Layout panel — General tab

Complete the General tab.

Field

Description

Header Type

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.

Header Style

Description

Bar

Provides a static horizontal bar at the top of the layout.

Collapsible

Provides a horizontal bar at the top of the layout, with the ability to expand or collapse, to show or hide the layout, when clicked

Tabbed

Creates a new Tab Group to which additional layouts can be added.

Accordion

Creates a new group of layouts that contain collapsible headers. Only one layout can be displayed at once.

Expand When

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

Style Prefix

Advanced featureOptional. 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 Branding wizard) or in another text file that you identify on the Scripts and Styles tab of the Harness form.

Defer Load?

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.

New Tab Group

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.

New Layout

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

 5. Complete the Layout panel — Advanced tab

Complete the Advanced tab.

Field

Description

Body Visible When

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

  • Leave blank to present the body always.
  • SmartPromptA when condition rule. SR-7276 B-25698 BUG-1665 gone? 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.
  • 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? checkbox, 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. C-1990
Width

SmartPrompt 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. (The browser may adjust column widths to avoid truncating values in the column.)
  • px-fixed — To specify a column width exactly. The user browser uses this width even when data values may be longer (after applying styles, margins, padding, and so on). CautionThe display may truncate (partially obscure) a data value if the value is wider than width defined by the pixel value. GROVS 8/24/06
  • 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.) BUG-3634

CautionIf 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. GROVS 8/24/06

ID Optional. Enter an alphanumeric ID for this layout, for use in JavaScript functions.
Header Image

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

Allow changes
to Template

Select to convert this SmartLayout 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 SmartLayout.
  • 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.

 6. Adjust Column Properties

Use the Column Properties panel to change the type of a column, to change the width of a freeform column, or to apply an inline style to all cells in the column.

Column PropertiesTo view or change column properties, click a column header and then click the magnifying glass icon (Magnifying glass ).

Click the magnifying glass icon (Magnifying glass ) at the top of a SmartLayouts column to open the Column Properties panel. The contents of this panel differs depending on whether the column is part of a Smart Layout.

Field

Description

Column Type

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

Advanced tab  
Width

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

(no label)

Clear the Use at Runtime checkbox 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 checkbox 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 checkbox 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 SmartLayout.

Inline Style

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 (Magnifying glass) to open the Style Editor. You can select from predefined lists or type a style definition directly, and preview the results.

Use Heading Styles

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

Each column in a SmartLayout has one of four types:

When you use a SmartLayout template, field styles and labels initially appear in adjacent paired cells, making it easy to drag and drop properties with the associated label.

NoteCells in a SmartLayout Label column (Label ) have label styles applied by default, but you are not limited to placing labels in the cell. Such cells can hold a field (a property value), a section, or various other controls. Similarly, cells in a SmartLayout Field column (Field ) have field styles applied, but can hold a label, a field, a section, or other controls. You can override many of the style attributes.

 7. Adjust Row Properties

Row PropertiesUse the Row Properties panel change the type of a row, or to apply an inline style to all cells in the row.

To view or change row properties, click the circle at the left end of the row. Then click the magnifying glass icon (Magnifying glass ) at the right end of the row. The contents of this panel differs depending on whether the row is part of a SmartLayout.

Field

Description

Advanced  
Height

TipAs a best practice, use SmartLayouts to achieve uniform height of cells throughout your application's forms. You can set the row height of SmartLayout templates using the Branding 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 SmartLayout 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 (drag), then drag the border. PROJ-281
(no label)

Clear the Use at Runtime checkbox 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 checkbox 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 checkbox 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 SmartLayout.

Inline Styles

Optionally, enter CSS code for an inline style for a cell in the column. 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.

Make Header?

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

 Creating and deleting rows and columns

Use the cell controls to add rows and columns, delete rows or columns, or merge cells.

In most cases, select an object in the layout before clicking an icon. Certain operations may be unavailable depending on your selection and the layout characteristics.

Control

Description

Delete the contents of a single cell (not a row or column)
Insert a new row before (above) the selected row
Insert a new row after (below) the selected row
Delete the selected row or layout
Merge right — Combine the selected cell and the cell to the right.
Merge down Merge down — Combine the selected cell and the cell below it. Proj-649 5.4
Unmerge All — Undo the previous merges. GAGNP 5/07

The Insert column before ( ), Insert column after(), and Delete column ( ) operations are not available for Smart Layout columns. They are available in Freeform layouts.

 Drag and drop operations

Up About Flow Action rules

Up About Harness rules

Up About Section rules