Back Forward Harness rules
Completing the Layout tab — Adding an Accordion control

About Harness rules

 zzz Show all 

Use these steps to add an accordion control to a harness rule or section rule. An accordion control presents one layout from several, with other layouts represented only by the header. Expanding one layout causes the currently expanded layout to collapse.

 zzz1. Adding and deleting an Accordion control

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

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

To delete an accordion control, select the control and click the Delete Row button (Delete Row). Do not use the Delete Cell button for this action.

 zzz2. Complete the Container panel — Top fields

Click the magnifying glass icon (Magnifying glass) to open the Layout panel. Complete the top fields, General tab, and Advanced tab.

Your updates to this panel can update the rule form immediately or upon clicking Apply, depending on the Property Panel settings in your Edit preferences. See Setting preferences. If the panel is pinned(pin), the wireframe on the rule form changes immediately to reflect your inputs. If the panel is not pinned(pin), click Apply to apply your inputs.

Field

Description

Header

Select Standard Header. If you select Custom Header or No Header you will not be able to complete the Accordion layout.

Title

Optional. Enter literal text, a reference directive, reference JSP tag, Lookup directive, or JSP tag to derive the text to appear in the left title area of a header. For example, enter

{.pyLabel}

or equivalently

<pega:reference name=".pyLabel" />

to use the value of a property named pyLabel as a title.

NoteIf your application is to support users in multiple locales, choose a noun or noun phrase for the caption. When practical, choose a caption already included in a language pack, to simplify later localization. Select the Localize? box on the HTML tab. Limit title text to no more than 64 characters, even after JSP or directive tags are expanded. See About the Localization wizard.

Visible When

Optional. Identify the When Name key part of a when condition rule to control visibility of the container. At runtime, the system uses the Applies To key part of the harness rule to locate the when rule. The when rule is executed only once, when the harness rule is first presented.

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

 zzz3. Complete the Container panel — General tab

Complete the General tab.

Field

Description

Using Page

Optional. Identify the name of a clipboard page on which the properties referenced in this expansion area are to be found. By convention, the page containing the work object is named pyWorkPage.

If you leave this field blank, Process Commander assumes that properties referenced in this expansion area are found on the primary page of the activity that displays the harness form. If, at runtime, no page with this name is found, all HTML output from this row is suppressed — both the top-level header and the included sections.

Layout

SmartPromptChoose the format to be used to present this header:

  • Bar — A horizontal bar that is always present. The section appears as a single horizontal strip; all labels and values visible on the strip.
  • Collapsible — A horizontal bar marked with a + or - sign that marks an area below the bar that users can expand or collapse (hide).
  • Tabbed — A labeled tab (Tab). Users can click one tab to make it front-most, hiding other tabs temporarily.
  • Accordion — A labeled accordion-style layout. At runtime, users can click one bar to make its content visible; this hides the content of other accordion bars in the container.
Image

Optional. If you choose Bar or Collapsible as the Layout, 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.

For example, enter image/3dball.gif in this field for the 3dball image. This bar contains the 3dball.gif image:Bar Image

Defer Load?

If you choose Collapsible, Tabbed, or Accordion as the Layout, clear this box to force details for this header to be transmitted to users' workstations upon initial display, even when the header is initially collapsed.

Select this box to instruct Process Commander to transmit the details for this header to the Internet Explorer (IE) browser on the user workstation only when a user clicks a plus sign or tab to view the expanded details of this header.

By default, the setting is selected. Deferred loading technique can speed up the initial harness form display, by reducing the amount of HTML text sent to and processed by Internet Explorer. Fields that do not interest most users are not transmitted unless the Internet Explorer clients send an explicit request later. (This check box is only meaningful when the Layout is Collapsible and container is initially presented as collapsed.)

New Layout

Select if you chose Tabbed or Accordion as the Layout and you want to start a new row of tabs or accordion bars with the sections in the group.

Read Only?

Select to cause all parts of the horizontal header area and all parts of the section rules referenced in this container to appear in read-only mode (and with read-only styles) always, or based on a when condition rule, even when the form is in read-write mode. Complete the next field to modify the effect of this check box.

Read Only Condition

This field appears only when you select the Read Only? check box.

SmartPromptOptional. Identify the When Name key part of a when condition rule that at runtime determines whether the content of this contain appears in read-only mode (with read-only styles) or in the mode of the enclosing layout. Leave blank to present the content in read-only mode always, regardless of the mode of the form.

You can override this result with Read Only settings and conditions for specific elements inside the container.

NoteThe system evaluates this condition once, when it renders the work object form. You can implement dynamic, client-side condition tests for cells within the layout inside the container, but not for the entire container.

 zzz4. Complete the Container panel — Advanced tab

Field

Description

With Style

SmartPrompt Optional. Identify the name of a CSS style for the container. Click the pencil icon (Pencil) to review the text file rule that contains the style.

The SmartPrompt list shows styles in the CSS style sheet that begin with the word container. You are not limited to these styles.

Expanded When

Optional. If you choose Collapsible for the Layout field, identify the When Name key part of a when condition rule to control whether the container is initially presented as expanded or collapsed. At runtime, the system uses the Applies To key part of the harness rule to locate the when rule. The when rule is executed only once, when the harness rule is first rendered.

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

Retrieval Activity

Optional. If Defer Load? is selected, you can specify an activity to be run when the container expanded by a click the plus label (Collapsed). This activity can compute property values and other aspects of the expanded container.

 zzzCreating rows

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

The table initially contains three columns and three rows. Usually, the top row holds labels, the second row holds fields (property values), and the final row contains the Add Row control (Add row). When the section appears at runtime, the second row is repeated for each existing Page List or Page Group page.

Use these seven cell controls to add or delete columns:

Control

Description

zzz Delete the selected row, container, layout, or repeating group.
zzz Insert a new column before (to the left of) the selected column.
zzz Insert a new column after (to the right of) the selected column.
zzz Delete the selected column.
zzz Merge the selected cells in a single row or column into one cell.
zzz Unmerge — Undo the immediately previous merge.
zzz 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:

  1. Hold down the Ctrl key.
  2. Select the row or column to be duplicated.
  3. Move the pointer to the destination.
  4. Release the Ctrl key to drop a duplicate row or column.

zzz About Flow Action rules

zzz About Harness rules

zzz About Section rules