You are here: User interface > User interface rules > Harness and section forms > Harness and section forms - Adding a Column Repeat layout

Harness and Section forms
Adding a Column Repeat layout

  

A Column Repeat layout presents each item from the source in vertical table columns, typically with labels in the leftmost column. Each column corresponds to items from one of the following sources:

The column can present embedded properties for each element, either as fields or formatted by a section. For an example, see PDN article 25449 How to present a repeating group as tabs or columns on a harness or flow action form.

Configure styles for Column Repeat layouts using the Skin rule. See Skin form — Components tab — Layouts — Repeat row/columns.

The following repeating layouts are available: Column Repeat, Tabbed Repeat, Grid, TreeGrid, and Tree. They provide similar options but differing presentations; choose the one appropriate to your application and user interface needs. Configure styles for repeating layouts using the Skin rule.

Adding and deleting a Column Repeat layout

From the Layout control group, select the Layout control. Click and drag the control. When the pointer changes shape to indicate that you can drop the layout, release the mouse button. A pop-up window opens to select the layout type:

  1. Click the Repeating radio button.
  2. Select Column as the repeat type.
  3. Click OK.

To delete a Column Repeat layout, select the layout and click the Delete Row button. Do not use the Delete Cell button for this action.

Complete the Column Repeat panel — Top fields

Click the Gear icon to open the Column Repeat panel. Complete all tabs of the panel.

Your updates to this panel update the rule form upon clicking Apply. If the panel is pinned, the wireframe on the rule form changes immediately to reflect your inputs. If the panel is not pinned, click Apply to apply your inputs.

Field

Description
Format

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 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 each header or subheader format.

Group/Selection

Description

Default

  
No Format No header or subheader appears. In addition, no styles applied to the body that are specific to 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).

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

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

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 PRPC Version 5.5 flow action styles.
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.

In the workform CSS style sheets, the various styles named groupTitleBarzzzz define the appearance of the SubHeader element; for example groupTitleBarBackground. For A, the corresponding styles are named a_groupTitleBarBackground and so on. Similarly, the names of styles for B, C and D start with b_groupTitleBar, c_groupTitleBar, and d_groupTitleBar respectively.
HTML

Available if you selected Custom for the Header field. Identify here the second key part of an HTML rule that defines the contents of the header.
Title

Optional. Enter text for the header or subheader, above the table. You can include directives or JSP tags in this text.

Note: When 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 text length to 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.
Visible When

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

  • The When Name key part of a when condition rule. Click the Open 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 Gear icon to open the tool. See Using the Condition Builder to configure dynamic UI actions.

Note: Use this to control visibility of the entire Column Repeat layout. Use the Column Visible When condition on the Advanced tab to apply a condition to each column at runtime.
Source

Specify the source of the data for the Column Repeat layout:

  • Property — To use a property of mode Page List or Page Group or a data page
  • Report Definition
Using a data page as the source

To specify a data page as the source, select Property for the Source and then enter the data page rule and property name in the List/Group field (for example, D_Products.pxResults). Alternatively, you can enter the name of the data page rule in the Pages & Classes tab, and then use the SmartPrompt in the List/Group field to select the named page. At runtime, if the data page does not already exist on the clipboard, the system creates it on the first reference.
List/Group

Available when Property is selected for the Source. Specify one of the following:

  • The property (of mode Page List or Page Group) that at runtime contains the pages to appear in this layout. Identify a property within the top-level page that corresponds to the Applies To class of the current rule. (If you are only prototyping the appearance of the Harness, Section, or Flow Action form, you can accept the placeholder property @baseclass.pyTemplatePagelist and complete or ignore other fields on the Column Repeat panel as desired.)

    Type a period followed by the property name. For embedded pages, type the qualified name. For example, if myArray is a Page List property, the following are accepted:

    .myArray

    .page1.myArray

    .page1.page2.myArray

    Click Open icon to review the property.

    You can't use the syntax Apagename.Apropertyname in this field (with no leading period) to identify a Page List or Page Group property that is within a different top-level page. To present such properties in a repeating layout, create a section with an Applies To class corresponding to the Apagename page, and include the section in this rule.

  • A data page. Specify the name of the data page, a dot, and then the property name; for example D_Products.pxResults.
Applies To

Available when Report Definition is selected for the Source. Specify the Applies To class of the report definition.
Report Definition

Available when Report Definition is selected for the Source. Specify the Report Name key part of the report definition.

Complete the Column Repeat panel — General tab

Complete the General tab.

Field

Description
Style

Select the style to apply to the column repeat.

To specify a custom format in a skin, select Other as the Style and then select the format that you want to apply.
Width

Optional. Select whether the column widths in the table are to be set at runtime as a percentage of the total width of the user form or flow action form or in absolute pixels. Choose:

  • Pixels (Fit Content) — To have the column widths on the user form or flow action form exactly match, in pixels, the column widths on the current rule form.
  • Fill (100%)— To have the column widths on the user form or flow action form adjust to percentages of the total width of the user form or flow action form. If you adjust the column on the rule form to be 25% of the total width, the column on the user form or flow action form will be 25% of the form width, and will grow or shrink if users resize the form.
  • Pixels (Fixed)— To specify a column width exactly. Browsers use this width even when data values may be longer (after applying styles, padding, margins, and so on).
  • Stretch-Spacer — To adjust the width of the layout columns to match on the current width of the design-time Harness, Section, or Flow action form. Field and Label column widths do not change; Spacer columns are shrunk to be narrower or expanded to be wider.

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

Header Type

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

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

For repeating layouts added to the harness, section, or flow action. select this check box to allow users at run time to add a new column immediately to the right of an existing column using the Enter key. For such repeating layouts, this check box does not affect the appearance or function of the Add Column and Delete Column operations. See Allowing users to append or delete Page List or Page Group elements (columns).

Note: Allow update is not available if the source if a report definition.
Allow Reordering

Select this check box to allow column reordering during runtime. A number for each column that also serves as a drop and drag handle for reordering appears in front of individual columns. If there is only one column and the Allow Reordering check box is selected, a no sign (no sign) appears, preventing reordering.

Note: Allow reordering is not available if the source if a report definition.
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 Open 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. For example, enter .Color =="Red"
As a best practice, use the Condition Builder to edit expressions or specify a pair of when condition rules. Click the Gear icon to open the tool. See Using the Condition Builder to configure dynamic UI actions.
Defer Load

This field appears when the Header Type is Collapsible, Tabbed or Accordion. 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.

Complete the Column Repeat panel — Advanced tab

Field

Description
Column Visible When Optional. To control the visibility of one or more columns at runtime, enter or select one of the following:
  • The When Name key part of a when condition rule. Click the Open icon to review or create the rule. If the source is a report definition, SmartPrompt lists rules in the report definition's Applies To class.
  • 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 is evaluated for each element, and so can cause some columns to appear and other columns to be omitted.

As a best practice, use the Condition Builder to edit this field. Click the Open condition builder icon to open the tool. See Using the Condition Builder to configure dynamic UI actions.
ID

Optional. Enter a name that becomes the ID=" " attribute value for the <TABLE > element. This option is useful when a JavaScript function refers to the table.
Summary

Optional. Enter text to supply a value for the summary attribute for the generated <TABLE> HTML element (used for screen readers). If blank, the generated HTML uses the pyLabel value of the Page List or Page Group property for the attribute value.

Header Image

Optional. Identify the second and third key part of a binary file rule corresponding to a small image. Click the Show Image Viewer icon to open the Image Catalog (a pop-up version of the Image Library landing page). Select the binary file you wish to use. (Not available when the Header value is None or Custom.)
Append Activity

This field is visible only when Allow Update is selected on the General tab. Leave blank in most cases.

To override the default behavior when a user adds a column to the array, identify the second key part of an activity to be called. Design your activity to accept the same parameters as the default activity Work-.AppendToPageGroup or Work-.AppendToPageList (which are final rules).

For example, your activity can prevent users from adding columns after reaching a limit, or can compute additional properties for the page.

This field is meaningful only for repeating layouts created in Version 5.2 or later that include an add icon.

Delete Activity

This field is visible only when Allow Update is selected on the General tab. Leave blank in most cases.

To override the default behavior when a user deletes a column from the array, identify the second key part of an activity to be called. Design your activity to accept the same parameters as the default activity Work-.RemoveFromPageGroup or Work-.RemoveFromPageList (which are final rules). For example, your activity can require that at least one row remains, or that users can't delete the first row.

This field is meaningful only for repeating layouts created in Version 5.2 or later that include a delete icon.

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 View properties 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, access the Components tab in the Skin and then select Tab in the Layouts area.

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

Adjusting row and column properties

To view or change row properties, click the circle at the left end of the row. Then click the View properties icon at the right end of the row.

For details, see SmartLayouts — Adjust Row Properties in Adding a layout.

Use the Column Properties panel change the type of a column, or to apply an inline style to all cells in the column. Note: As a best practice, define custom styles in the skin.

To view or change column properties, click a column header and then click the View properties icon.

For details, see SmartLayouts — Adjust Column Properties in Adding a layout.

Working with the layout design

Use Windows drag operations to stretch or adjust the width of the table and of columns in the table.

The table initially contains four columns and two rows. Usually, the left-most column holds labels, the next column holds fields (property values), and the final columns contain the Delete Column and Add Column controls. When the section appears at runtime, the second column is repeated for each existing source element.

Use the following cell controls to design the row and column layout.

Control

Description
delete row Delete the selected row, container, layout, or repeating group.
Insert a new column before (to the left of) the selected column.
Insert a new column after (to the right of) the selected column.
Delete the selected column.
Merge the selected cells in a single row or column into one cell.
Unmerge — Undo the immediately previous merge.
Delete the contents of a single cell (not a row or column).

To reorder rows or columns within a repeating 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 repeating layout:

Allowing users to append or delete Page List or Page Group elements (columns)

Optionally, when using a Page List or Page Group property as a source, users can add columns, delete columns, or both add and delete columns, depending on which icons you include on the form.

When you first create a Column Repeat layout, a two-by-four table appears in the layout (the third and fourth columns hold the icons for deleting and adding columns). Typically, cells in the first column present labels, but these cells can also hold other property values (not from the embedded Page List or Page Group pages). Cells in the rightmost two columns are typically used to present the Delete Column icon and Add Column icon, but can also hold other property values (not from the embedded Page List or Page Group pages).

At runtime, the middle column appears once for each page. By default, users can add, append, and delete columns at runtime. You can change this default behavior:

You can't delete the left-most and right-most columns. If they are not needed, you can apply a style that makes them not visible at runtime.

Optionally, you can use button controls or URL controls on the repeating layout rather than the standard icons for Add Column and Delete Column icons. The icon, button, or URL control can appear anywhere in the row.

Identifying subscript values for added Page Group pages

When a Column Repeat layout is based on a Page Group property and users click the Add Column icon to append a new column, or press the Enter key to insert a new column, the system requires a subscript value for the new page.

In a Page Group property, the embedded text property pxSubscript acts as a unique identifier for the pages. This value may also be present in another property found on each page. As a best practice for usability, present the pxSubscript property (as a read-only value) in the left column of each row.

In some cases, the set of allowable values for subscripts are limited to a predefined static list, such as the codes for the 50 states of the United States (AL for Alabama through WY for Wyoming). In other cases, the set of allowable values for subscripts is unpredictable and effectively unrestricted, though each value must be a valid Java identifier. For example, a home insurance policy may contain a Page Group property with a page for each insured property, with the property identified by a government-issued code.

The Pega Platform includes standard rules that support both situations. Your application can override the standard rules to allow users to enter or select a subscript value.

  1. Optionally, copy and override the standard section @baseclass.SubScriptPromptInput with another section of that name that applies to the page class of the Page Group. Include only one input field on the section display. For example, if there are only a few allowed pxSubscript values, you can present the unused values as a set of radio buttons.
  2. Override the standard property @baseclass.pxSubscript with another property of that name that applies to the page class of the Page Group.
  3. Optionally, select a Table Type of Local List or Remote List on the General tab of the new property. Then, complete the table fields, to enumerate the allowable values as a Local List, or define a Remote List that assembles the values dynamically.
  4. Optionally, present the pxSubscript property as a read-only value in the top row of each column (or in another location meaningful to users).
  5. At runtime, when users click the Add Column icon, the system searches for a section named SubScriptPromptInput to allow the users to select a value. This display excludes the subscript values already in use. Make sure that this section prompts for only a single input.

Note: At runtime, the system controls the order of columns presented for a Page Group property. After you append or insert a new column, it may be re-sorted to a different position after the Submit is complete.

About Flow Actions

About Harnesses

About Sections

Open topic with navigation