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

  Section and Flow Action forms
Adding a Tabbed Repeat layout

Tabbed Repeat presents each item of the source as a labeled tab. This layout creates a tab for one of the following sources:

Configure styles for tabbed repeat layouts using the Skin rule. See Skin form — Components tab — Layouts — Tabs.

The Tabbed Repeat layout defines the contents and appearance of the tab itself — not the body of content associated with the tab. For the body, define a section (with an Applies To key part corresponding to the Page Class of the source for the Tabbed Repeat control) and place the section in the single cell. For an example, see PDN article How to present a repeating group as tabs or columns on a harness or flow action form.

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 Tabbed Repeat layout

Click the down-arrow (Arrow) at the right end of the Layout control group (Layout group) and select the Layout control (Layout). 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 Tabbed Repeat as the repeat type.
  3. Click OK.

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

Complete the Tabbed Repeat panel

Click (Magnifying glass) to open the Tabbed Repeat panel. Complete the General tab.

Field

Description
Source

Specify the source of the data for the Row 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 and property name in the List/Group field (for example, D_Products.pxResults).

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 Row 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(magnifying glass) 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 rule, a dot, and then the property name; for example D_Products.pxResults.
Visibility

To control the visibility of the container, select one of the following:

  • Always: always visible
  • Condition (expression): the region is visible under the specified condition. In the field that displays, select a condition or click to open the Condition Builder. You can define a 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.
  • Condition (when): the region is visible under the specified condition. In the field that displays, select a when rule. Click to create a new when condition or review an existing when condition.

Note: If this section is to become part of navigation in a composite portal, you can make the header visible only when a specific space is the current space. Enter an expression here similar to the following:

pyCurrentSpace=="ASpaceName"

Then select the Run visibility condition on client check box.
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 a summary.

Append Activity

To override the default behavior when a user adds a row 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 tabs after reaching a limit, or can compute additional properties for the page.
Delete Activity

To override the default behavior when a user deletes a row 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-.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.

Complete the Tabbed Repeat panel — Presentation tab

Complete the Presentation tab.

Container format

Select a format for the container.

Select Other to select from custom container formats defined in the skin. In the field that is displayed, specify the custom format.
Style

Select a style for the layout.

Select Other to select from custom styles defined in the skin. In the field that is displayed, specify the custom style.
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. The user browser uses 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.

Allow update

Select this check box to allow users at runtime to add a new element immediately after an existing element, using the Enter key. For such repeating layouts, this check box does not affect the appearance or function of the Add and Delete operations. See Allowing users to add or delete Page List or Page Group elements (rows).

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

Select this check box to allow for row reordering during runtime. A number for each row that doubles as a drop and drag handle for reordering will appear in front of individual rows. Numbering begins at 1 and continues for however many rows present. If there is only one row and the Allow Reordering check box is selected, a no sign (no sign) appears, preventing reordering.

Note: Allow reorder is not available if the source if a report definition.
Display header and title

Select if you want to display a header for the layout. Container settings appear when you select this check box.

Note: If you plan to localize the application using this rule, 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.

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 (Magnifying glass) in the header to open the Tab Group properties panel. Your settings apply to all the tab headings 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.

Define the Tab body in a section

The body of the tab control contains a single non-expandable cell. To define the body:

Create a section with an Applies To class that matches the Page Class of the Page Group or Page Class property.

  1. Add and define Label controls, InputBox controls, and so on to the section.
  2. Save the Section form.
  3. Return to the original rule form. Drag the section control () and drop it in the single body cell of the Tabbed Repeat control.
  4. Save the form.

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

Optionally, users at runtime can add and delete tabs, depending on which icons you include on the form.

When you create a Tabbed Repeat layout, two icons appear. Users can add or remove tabs by default. You can change this default behavior by deleting the Add Tab icon (Add) or Delete Tab icon (Delete) as needed.

Identifying subscript values for added Page Group pages

When a Tabbed Repeat layout is based on a Page Group property and users click the Add Tab icon (Add) to append a new tab, or press the Enter key to insert a new tab, 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 7 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 Tab 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 tabs presented for a Page Group property. After you append or insert a new tab, 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