Harness, section and flow action forms

You can add a section as follows:

Layout cell— Embed one section and render it in a layout cell. The section must be in an inherited class of the section containing the layout. If embedded in a repeating layout, the section must be in an inherited class of the layout. The section is not displayed in a wireframe. You cannot directly edit a section in a layout cell; open the rule to edit it. See Harness, Section, and Flow Action forms – Adding a layout.
Section — Include one or more sections within another section. A wireframe appears around the included section, which is labeled Section Include. From the section's header, you can open the rule, and if enabled, use check in/check out features.
Flow action — Reference one section to create the basic flow action layout. A wireframe appears around this section, which is labeled Section Reference. From the section's header, you can open the referenced rule and use check in/check out features. You can include other sections in the referenced section. See About flow actions.
Harness container — Include one or more sections to create the basic container layout. The section's header and format are configured in the container's property panel. A wireframe appears around the included section. From the section header, you can open the rule, and if enabled, use check in/check out features. You can include other sections in the container section, which are formatted in their own properties panels. See Harness form — Adding a container.
Harness panel — Include one section and render it in the panel. The section is not displayed in a wireframe. You cannot directly edit a section in a panel; open the rule to edit it. See Harnesses — Adding a panel set.

To embed a section in a layout cell:

Do one of the following:

— Click the down-arrow () at the right end of the Layout control group () at the right end of the Layout control group () and select the Section control (). Drag and drop the control onto the layout cell.

— Select a section from the Application Explorer. Drag and drop the rule onto a layout cell.

Click the magnifying glass icon () on the cell to open the Cell Properties panel and complete its fields and tabs. Property fields may appear at the top of the panel, or in one or more tabs. If the panel is pinned (), click Apply to apply your changes. Click the red x at the top right of the panel to close it. If the panel is not pinned, click Apply to apply your changes and continue editing, or OK to apply your changes and close the panel.

Top fields

Field	Description
Use Section	Select or confirm the Purpose key part of the section. Click the pencil icon () to open or create the section. Click the magnifying glass icon ( ) to enter parameters for the section or to share the current parameter page with the section. The Applies To key is, by default, the same as the current section.
Refresh When	Optional. Enter a simple expression based on the comparison of a pair of constants, properties, or both, combined by Boolean operators. As a best practice, use the Condition Builder to edit expressions, or to trigger a refresh based on a property change or the addition or deletion of a row or column in a repeating layout. The editor also enables you to specify a pre-activity or data transform. Click the magnifying glass icon ( ) to open the tool. See Using the Condition Builder to configure dynamic form actions.

General tab

Field	Description
Width	Optional. Enter a positive number for the width in pixels of this cell. (At runtime, normal browser processing for rendering tables determines the actual displayed width.) You can also adjust the width of columns directly: Click a vertical wireframe cell border. Wait until the pointer shape changes (), then drag the border.
Height	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.) 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.
Visible	Select `Always` or `Other Condition`. Choose `Other Condition` to make the visibility depend on a when condition rule or an expression.
When	If you selected `Other Condition` for the Visible field, complete this field. 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. If you leave this field blank, the section is always visible. 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?	This checkbox appears only if the Visible When field contains a simple comparison. This cannot be used if the expression is combined with a when condition rule. 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.
Read Only	Optional. Select to cause the section to be presented in read-only styles, even when the form is in read-write mode, always or conditionally.
When	This field appears only when you select the Read Only checkbox. Leave blank to present the content in read-only mode always, regardless of the mode of the enclosing layout. To control the mode, 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. 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 When field. Select to cause dynamic execution of the condition each time the value of a property stated in the condition changes.

Advanced tab

Field	Description
Read-Write Style	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	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 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.

To include a section in another section, harness panel or container, or reference it in a flow action, you can use the Section control, or the Application Explorer. If the SmartFrames gridlines are not visible, click to present the SmartFrames wireframe preview.

Using the Section control

To include a section in other sections, drag and drop the Section control (

) onto a section. As you move the pointer over existing frames or tabs, a yellow line indicates where the section will be dropped.

When you drop the Section control, the Include Section Rule dialog appears . Edit the fields as described here.

Field	Description
Applies To	By default, the Applies To key part of the current section appears in this field. You can select another child or ancestor class.
Purpose	Select the Purpose key part of the section.
On different object	Select this checkbox if you want to identify a clipboard page which contains the properties referenced in this section.
Using page	This field appears when you select the On different object checkbox. Identify the name of the page that is the basis for fields (properties) within this section. If, at runtime, no page with this name is found, all HTML output from this row is suppressed. If you enter a Declare Page and are configuring a section that is defer loaded from an asynchronously loaded Declare Page (ADP), make sure that all UI references to the Declare Page are contained within the deferred UI. References to Declare Page data, such as Visible When, parameters to actions, or property displays (read-only or editable), will initiate synchronous Declare Page load. UI display will be delayed until the Declare Page is loaded. See PDN article: How to configure a non-blocking UI using Asynchronous Declare Pages (ADP). If you enter a page that is not in this section's class inheritance path, enter the class in the Of Class field. The system updates the Pages & Classes tab when you click OK to close his dialog. Page names are case-sensitive, so be sure to match the case of the page name.
Of Class	This field appears when you select the On different object checkbox. By default, the Applies To key of the current section appears.

Using the Application Explorer

To include or reference a section in a new flow action, or a harness panel or container, drag and drop the control onto the tag drag section here , which appears on the flow action and harness layouts.

Select a section from the Application Explorer, and drag and drop it onto a section, flow action, or harness container or panel.
If you drag a section with an Applies To key that is not in this section's class inheritance path, the Pick/Add Page and Class dialog opens. Enter a page name in the Page Name field. If there are multiple classes or pages, use the radio buttons to select the page and class you want to use for this section. The system updates the Pages & Classes tab of the current section when you click OK to exit this dialog.

Editing the section properties panels

If added to a section, harness container, or flow action, the section appears in a wireframe on the layout. Click the pencil icon ( ) to open the included section. If enabled, click to check out the rule. Click to check it back in or click to delete the copy.

Click the magnifying glass icon () in section's wireframe header to open the section properties panel.

To update a section's properties in a harness panel, select the panel and click the magnifying glass icon () on the cell to open the panel properties panel.

Property fields may appear at the top of the panel, or in one or more tabs. If the panel is pinned (), click Apply to apply your changes. Click the red x at the top right of the panel to close it. If the panel is not pinned, click Apply to apply your changes and continue editing, or OK to apply your changes and close the panel.

Top Fields

The following describes the Section Include properties panel. The properties may vary according to the ones you select, or where the section was included or referenced (flow action, or harness panel set or container).

Field

Description

Use Section Select or confirm the Purpose key part of the section. Click the pencil icon () to open or create the section. Click the magnifying glass icon ( ) to enter parameters for the section or to share the current parameter page with the section.

Include Section Appears when section is a top-level section in a container. Same functionality as Use Section field.

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

Appears 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

SmartPrompt 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 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 Visible When field. Select to cause dynamic execution of the condition each time the value of a property stated in the condition changes.

Refresh When

SmartPrompt Optional. Enter a simple expression based on the comparison of a pair of constants, properties, or both, combined by Boolean operators.

As a best practice, use the Condition Builder to edit expressions, or to trigger a refresh based on a property change or the addition or deletion of a row or column in a repeating layout. The editor also enables you to specify a pre-activity or data transform. Click the magnifying glass icon ( ) to open the tool. See Using the Condition Builder to configure dynamic form actions.

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

This field does not appear in container and harness panels.

Image

Specify an image to display before the tab title. 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 magnifying glass icon () to open the Image Catalog (a pop-up version of the Image Library landing page) and select the binary file you wish to use.

To specify a tab background image, use the Skin rule. See Skin form — Styles tab — Layouts — Tabs..

Expand When

Optional. Only applies to the Collapsible header type. 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 or collapse ) when you save the Harness, Section, or Flow Action form is the state upon initial runtime presentation.

To specify a condition, 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.

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.

Don't confuse Expanded When with Visible When. When collapsed but visible, the clickable header appears. When not visible, nothing appears.

Tip Before you save the form, review and adjust the layout. For example, if a section is expanded when you save the form, it appears initially expanded at runtime; if a section is collapsed when you save the form, it appears initially collapsed at runtime.

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.

New Layout

For Header Type of Accordion only. Select to remove accordion and those beneath it and add them as new accordion group directly below the original group. Deselecting this property causes the separated group to merge into the layout above it.

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

Defer Load

Optional. Select to delay rendering this section on the user's screen until other layouts or sections have been rendered. Processing initiates during a page load, not as the result of a user action, such as clicking a header. Deferring enables users to start using other parts of the page rather than waiting for this section to load. Users cannot interact with the server, for example, submit the form, until all defer loaded sections are loaded.

However, you can enable users to take actions, such as submit, on a work item while other content is still being loaded. To do this, configure sections to use defer loaded asynchronous declare pages. See PDN How to configure non-blocking UI using Asynchronous Declare Pages (ADP).

You can place a defer loaded section in your harness, section, or flow action as you would any other section. For example, you can place the section in a panel of a panel set, in a column cell in repeating layouts, or included in another section.

At runtime, the system displays a Loading... message while waiting for the layout to render. You can customize the text, insert an image, or add other content by making a copy of the standard section pyLoadingMessage.

Refresh When Active

Optional. Select to refresh the content of the tab when the tab is activated.

You can use both the Defer Load and Refresh When Active options on a single tab. Defer Load refers to the initial loading of the tab content at runtime. If you want to refresh the tab contents whenever the tab becomes active, select this option.

New Tab Group

For Header Type of Tabbed only. Select to remove this tab and the ones to the right of it from the layout group, and add them as a new tab group directly below the original group. Deselecting this property causes the separated tabs to merge into the layout above it.

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

Retrieve Activity

Optional. Appears when you select Defer Load. Specify the activity to be run when the container is expanded by a click. As a best practice, create a defer loaded wrapper section with the retrieval activity (instead of having multiple defer loaded sections with wrapper activities.)

Advanced tab

Field	Description
Active When	Optional. Appears only when Header Type is `tabbed` or `accordion`. Leave blank so that the section is always active. To control the conditions under which the section controls are active, enter the following: To specify a condition, 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. 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. This condition runs on the server. The Run On Client option does not appear when you enter an expression.
Body Visible When	Optional. Leave blank so that the section body is always visible. To control visibility of the body of the section, 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. 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. This field is not visible if the Format field contains `No Format`, `Hidden`, or `Hidden (Sub)`.
Run on Client?	Appears when you enter a simple expression in the Body Visible When field. Select to cause dynamic execution of the condition each time the value of a property stated in the condition changes.
Using Page	Identify the name of the page that is the basis for fields (properties) within this section. Leave this field blank if the page is the one matching the Applies To key part of the rule. This field appears on the General tab on a container section's properties panel.
View Privilege	Optional. To restrict the presentation of this section (in read-only mode) to those users who hold a specific privilege, select the Privilege Name key part of a privilege rule. Click the pencil icon () to review or create the privilege rule.
Update Privilege	Optional. To restrict the presentation of this section (in read-write mode) to those users who hold a specific privilege, select the Privilege Name key part of a privilege rule. Click the pencil icon () to review or create the privilege rule. If a user holds the privilege in the View Privilege field but does not hold the privilege identified in this field, the section appears in read-only format. In this case, default values for fields are not shown.

Tab Group properties panel

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.

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.

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

Harness, Section, and Flow Action forms Adding a section

Top fields

Field

Description

General tab

Field

Description

Advanced tab

Field

Description

Field

Description

Editing the section properties panels

Top Fields

Field

Description

Group/Selection

Description

Default

Header

SubHeader

General tab

Field

Description

Header Style

Description

Advanced tab

Field

Description

Tab Group properties panel

Field

Description

Field

Description

Harness, Section, and Flow Action forms
Adding a section