Harness, section and flow action forms

To add a new layout, click the down-arrow () at the right end of the Layout control group () and select the layout control (). 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.

To copy an existing layout, click to present the SmartFrames wireframe, right-click the existing layout, and then click Copy. Select the location in which you want to paste the layout, right-click and then select Paste Above or Paste Below. You can also use the toolbar controls to Cut (), Copy () and Paste () existing layouts or select an existing layout and click Insert Row Above () or Insert Row Below () to add a new layout above or below the selected layout.

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

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 one of the following templates or use a custom template as defined in the Skin rule: `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 SmartLayout templates depends on the portal skin rule in use. To ensure consistent results when building harnesses, sections, or flow actions for user 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 SmartLayout templates in the Skin rule. See Skin form — Styles tab — Layouts — Smart Layouts. PRPC 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 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 the following sources: A `Page List` or `Page Group` property A report definition A declarative page ( Row Repeat, Column Repeat, and Tabbed Repeat) Select: `Row` — To present each item from the source in horizontal rows, typically with labels in the top row. See Adding a Row Repeat layout. `Column` — To present each item from the source in vertical columns, typically with labels in the left most column. See Adding a Column Repeat layout. `Tabbed` — To present each item from the source as a tab, typically with labels in the tab button. See Adding a Tabbed Repeat layout. `Grid` — To present items in a spreadsheet format. See Adding a Grid layout. `Tree Grid` — To present a tree navigation control in combination with a grid display of items. See Adding a Tree Grid layout. `Tree` — To present items in a tree format that enables users to expand and collapse branches to find entries off current interest. Adding a Tree layout. When displaying large amounts of data, the Grid, TreeGrid, and Tree layouts introduced in V6.1 provide a display that, in most cases, is easier to implement and work with than repeating row, column, or tabbed layouts. These V6.1+ layouts can display a custom skin; are cross-browser compatible; are sortable by column; and have fields that can be configured to be editable and localizable. See Skin form — Styles tab — Layouts — Repeat Tree/Grids.
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, or List-to-List control. Enter two positive integers to control the initial number of rows and columns in the grid.

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

The SmartLayout capability was introduced in V5.5. If you have a harness, section, or flow action 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 to SmartLayouts.

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

Complete the top fields, General, and Advanced tabs.

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

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`	Standard heading format, as defined in the Skin rule. See Skin form — Styles tab — Layouts — 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`	Hidden header format (no header) as defined in the Skin rule. See Skin form — Styles tab — Layouts — Body. (This option is not available for the top-level of a harness).
SubHeader
`Standard (Sub)`	Sub heading format, as defined in the Skin rule. See Skin form — Styles tab — Layouts — Header.
A B C D	Sub heading format, as defined in the Skin rule. See Skin form — Styles tab — Layouts — Header. These subheaders function identically, but may differ in the presentation. 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. You may choose to format the sub headers as follows: A — No bar in the subheader B — Underlined subheader label C — Outline border D — Black font See Skin form — Styles tab — Layouts — Header.
`Simple`	Preserves V5.5 flow action styles for layouts created from V5.5-style flow actions.
`Outline`	Provides no header area, but a border around the contents of the layout with a single text label, as defined in the Skin rule. See Skin form — Styles tab — Layouts — Outline Header.
`Hidden (Sub)`	For no subheader, but indented body. See Skin form — Styles tab — Layouts — 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 >.

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

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.

Visible When

Optional. Leave blank so that the layout is always visible. To control its visibility, enter or select one of the following:

The When Name key part of a when condition rule. Click the pencil icon () to review or create the rule.
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 magnifying glass icon ( ) to open the tool. See Using the Condition Builder to configure dynamic UI actions.

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 General tab.

Field

Description

Width

SmartPrompt Select whether the width of columns in the table (not the layout) are to be set as a percent or in absolute pixels. Choose:

Pixels (Fit Content) — To have the column widths on the user 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.)
Pixels (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). The display may truncate (partially obscure) a data value if the value is wider than width defined by the pixel value.
Fill (100%) — To have the column widths on the user form or flow action form adjust to fractions of the total width of the user 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 user form or flow action form will be 25 percent of the form width, and will grow or shrink if a user resizes the form.
Stretch-Spacer — For SmartLayouts. To expand the spacer widths so that the layout fits the entire form. The Field and Label column widths do not change. You cannot use this setting if the Smart Layout value is Single. Not recommended for use with free form or repeating layouts.

Smart Layout SmartLayouts only. To change the template selected previously. You cannot use Single with a Width setting of Stretch-Spacer.

Template Styles

You can change the template selected previously for a custom layout.

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.

Header Type

Select one of the following header types. 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 group of layouts with tabbed headers. Only one layout within the group can be displayed at once. The tab group appears in a Tab Group wireframe. Use the group's properties panel to control the appearance of all the tabs in the group. See the topic Tab Group properties panel below.
`Accordion`	Creates a new group of layouts that contain collapsible headers. Only one layout can be displayed at once.

Expand When

Optional. Only applies to Collapsible header styles.

Leave blank so that 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.
The When Name key part of a when condition rule. Click the pencil 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 magnifying glass icon ( ) to open the tool. See Using the Condition Builder to configure dynamic UI actions.

Run on Client?

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

Select to cause dynamic execution of the condition each time the value of a property stated in the condition changes.

Conditions are automatically re-evaluated when the user updates a property value. 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.

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 remove this tab from the layout 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, this 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.

Allow Changes to Columns

Select this checkbox if you want to:

convert this SmartLayout to a quasi-freeform layout, allowing you to add or remove columns.
- Column restrictions remain in force, but you can change the type of any column, including to the None (unrestricted) value. If all restrictions are removed, you can change the height of individual rows, or the width of individual columns.
- Row restrictions remain in force, but you can remove them if all columns have a None type.
use a custom template defined in the Skin rule. In the Template drop-down, select Other, and then type the name of the custom template you want to use. See Skin form — Styles tab - Layouts — Smart Layouts.

This option disappears when you click the checkbox; the change cannot be reversed. A quasi-freeform layout can never become a full SmartLayout.

Complete the Advanced tab.

Field	Description
Column Visible When or Row Visible When or Body Visible When	Optional. For Column Repeat, Row Repeat, and Tab Repeat layouts. To control the visibility at runtime of specific columns, rows, or tabs, enter or select one of the following: The When Name key part of a when condition rule. Click the pencil 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. The when condition rule is evaluated for each element, and so can cause some elements to appear and other elements to be omitted. As a best practice, use the Condition Builder to edit this field. Click the magnifying glass icon ( ) to open the tool. See Using the Condition Builder to configure dynamic UI actions.
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 tool (a pop-up version of the Image Library landing page). Search for an image to include on the left side of the header.

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. There are SmartLayout column settings.

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

Click the magnifying glass icon () 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)	Use the checkbox next to Width field (called the Use at Runtime checkbox) as follows: Clear the 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 that may be wide in some situations and narrow in others. Clear this checkbox if you select `Stretch-Spacer` in the Width field on the General tab. As a best practice, use `Stretch-Spacer` only in SmartLayouts. Select 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.
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 () to open the Style Editor. You can select from predefined lists or type a style definition directly, and preview the results.

Each column in a SmartLayout has one of four types:

Field — Cells in this column have field styles
Label — Cells in this column have label styles.
Spacer — Cells in this column are empty.
None — No restrictions on cell contents.

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.

Cells in a SmartLayout Label column () 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 () have field styles applied, but can hold a label, a field, a section, or other controls. You can override many of the style attributes.

Use 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 () 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	As a best practice, use SmartLayouts to achieve uniform height of cells throughout your application's forms. You can set the width of SmartLayout templates in the Skin rule. See Skin form — Styles tab — Layouts — Smart Layouts. 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: Click a horizontal wireframe cell border. Wait until the pointer shape changes (), then drag the border.
(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 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 () 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.

Select a cell and press Enter or click the magnifying glass icon () to open its properties panel.

Field	Description
General tab
Property	Appears in SmartLayout field columns. Select a `Single Value` property. Typically, this is from within data source's embedded page property. Alternatively, you can drag a property name from the properties visible in the Application Explorer onto the cell. If the source is a Report Definition, the list contains Column Name properties defined in the rule. If there are joins in the report, property names appear as `joinname.PropertyName.` This field does not appear if the value in the Control field contains an Action mode control rule such as pxButton.
Control	Appears in SmartLayout field columns. Select a control rule to format the value in this cell. If left blank, the property uses the control rule (if any) in the Control field on the property form's General tab. Many controls on the Basic and Advanced groups are associated with default control rules based on the property type. When you drag and drop a control into the cell, the rule appears in this field. For example, the Button control populates the field with pxButton, the Text Area control with pxTextArea, and so on.
Value	Enter text that describes the contents of the column.
Label For	Select a single value property that to associate with the Value.
Advanced tab
Default Value	Appears in SmartLayout field columns. Specify a default value for this field. Click the magnifying glass beside it to display the Expression Builder, where you can select or create an expression to generate the default value. Leave the field blank if it does not require a default value.
Read-Write Style	Optional. Type the name of the custom style, for example, `custom_stylename`, that you want to apply to this cell when the user form or flow action form appears in read-write mode. Define custom styles in the Skin rule. See Skin form — Custom.
Read-Only Style	Optional. Type the name of the custom style, for example, `custom_stylename`, that you want to apply to this cell when the user form or flow action form appears in read-only mode. Define custom styles in the Skin rule. See Skin form — Custom.
Inline Style	Enter CSS code for an inline style. 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.

When you select a Header Style of Tabbed, the layout appears in a Tab Group wireframe. Select it to make it active and click the magnifying glass icon () in the header to open the Tab Group properties panel. Your settings apply to all the tabs in the group.

Complete the top field and General tab. There are no settings on the Advanced tab.

Top field

Field

Description

Format

Select the format you want to apply to the tabs in the group. To configure the format's appearance, go to the Style Presets > Layouts > Tab area on the Skin rule form Styles tab.

Standard — Default format applied to all tab groups.
Sub — Format suitable for sub-tabs.
Other — A custom style that you create in the Skin rule. When you select this option, enter the style name in the Style field.

See Skin form — Styles tab — Layouts — Tabs.

General tab

Field	Description
Tab Position	Select the placement of the tabs at runtime: `Top` `Bottom` `Left` `Right` If you select `Left` or `Right`, specify the horizontal or vertical orientation of the tabs in the Tab Orientation field.
Tab Orientation	If you selected a left or right Tab Position, select to display tabs horizontally or vertically. Horizontal is the default. If you select vertical orientation, the tab title is rotated based on the tab position, left or right.
Stretch Tabs	Select to stretch the horizontally or vertically to fit the available space. If the Tab Position is Top or Bottom, tabs stretch horizontally; if the Tab Position is `Left` or Right, the tabs stretch vertically.

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 — Combine the selected cell and the cell below it.
	Unmerge All — Undo the previous merges.

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

To reorder rows or columns within a layout, you can select and drag a single row or column using the dots above or to the left of the table; these act as handles.
To duplicate rows or columns within a layout, select by handle but also hold the Ctrl key. Release the Ctrl key to drop a duplicate row or column.
To move a cell containing a Field, hold down the SHIFT key, select the cell, drag and drop it in another cell, in the same one layout or another layout.
To cut, copy, or paste a Field in a cell, right-click in the cell to access a context-menu. You can copy a cell from one rule and paste it into a cell on a different rule.

Harness, Section, and Flow Action forms Adding a layout

Field

Description

Field

Description

Group/Selection

Description

Default

Header

SubHeader

Field

Description

Header Style

Description

Field

Description

Field

Description

Field

Description

Field

Description

Field

Description

Field

Description

Control

Description

Harness, Section, and Flow Action forms
Adding a layout