Back Forward Section forms
Completing the Layout tab — Adding an Accordion control

About Harness rules

  Show all 

Using the accordion control, you can stack layouts vertically, each with a visible header. At runtime, when the user clicks one header, the layout body becomes visible and the other open body closes. For an example, see Pega Developer Network article PRKB-25414 How to display collapsed form sections using the Accordion control.Proj-1012 5.4SP2

NoteWhen accordion controls are within a section that is within a panel of a panel set, runtime behavior automatically adjusts to consume the entire available height, and to supply scroll bars when necessary. GRP-1142

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

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

 2. Complete the Layout Panel — Top fields

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

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 your 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 Header - Standard for a bolder header or Standard (Sub) for a less bold header. An accordion must have a header: do not select Hidden or No Format.

Title

Optional. Enter text to be presented above the table in the header or subheader. This text may include directives or JSP tags, such as <p:r > or <pega:lookup >.

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

Template

Choose Single, Double or Triple to control the number of column pairs in the Smart Layout.

Visible When

Optional. To control visibility of this header, enter or select one of the following:

  • Leave blank to always present the header.
  • SmartPromptA when condition rule. Click the pencil icon (Pencil) to review or create the when condition rule.
  • Expression evaluated once — Enter an expression that returns true or false. This expression can involve multiple properties, function calls, and other syntax as supported by the <pega:when > JSP tag.

Advanced featureIf this section is to become part of navigation in a composite portal, you can make the control visible only when a specific space is the current space. Select the Run on Client? checkbox and enter an expression here similar to the following:

pyCurrentSpace=="ASpaceName"

 3. Complete the Layout Panel — General tab

Field

Description

Header Type

To maintain an accordion layout, leave Accordion selected.

Style Prefix

Advanced featureOptional. Provides the ability to reference a family of custom styles for accordion bars. For example, type A in this field to use styles named .A_headeraccordion* rather than the normal .headeraccordion* styles. Define the prefixed styles in your workform_zzzzz.css text file (created by the Branding wizard) or in another text file referenced on the Scripts and Styles tab of the Harness form.

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

Optional. Choose this option to delay loading at runtime of the section content until the user clicks the header.

NewLayout?

Optional. Choose this option to convert the selected accordion bar, and those below it, to a new layout.

 4. Complete the Layout Panel — Advanced tab

Field

Description

Body Visible When

Optional. To control visibility of the body, enter or select one of the following:

  • Leave blank to present the body always.
  • SmartPromptA when condition rule. SR-7276 B-25698 BUG-1665 gone? Click the pencil icon (Pencil) to review or create the when condition rule.
  • Expression evaluated once — Enter an expression that returns true or false. This expression can involve multiple properties, function calls, and other syntax as supported by the <pega:when > JSP tag.
  • Simple Java expression evaluated upon JavaScript events — To dynamically control the visibility of the body with a JavaScript event, enter a simple comparison involving a target property and select the Run on Client? box. The result at runtime determines whether the content of this cell appears in read-only styles or in the styles of the enclosing layout.
    For example, enter .Color =="Red" in this field to make the body visible when the property Color has the value Red, and read-write styles otherwise. Depending on the state of the Run on Client? checkbox, the comparison can be executed only once as the form is initially displayed, or dynamically. See Implementing dynamic form actions and the Client Event Editor. C-1990
Run on Client?

This checkbox appears only if the Body Visible When field contains a simple Java comparison.

Select to cause dynamic execution of the condition each time the value of the property mentioned in the condition changes. (Mark the field containing that property as a Client Event.) Leave cleared to cause the condition to execute only once, upon initial presentation of the form.

Width

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

  • px — To have the column widths on the work object form or flow action form match, in pixels, the column widths on the current rule form. (Internet Explorer may adjust column widths to avoid truncating values in the column.)
  • px-fixed — To specify a column width exactly. The browser uses this width even when data values may be longer (after applying styles, margins, padding, and so on). CautionThe display may truncate a data value if the value is wider than width defined by the pixel value. GROVS 8/24/06
  • % — To have the column widths on the work object form or flow action form adjust to fractions of the total width of the work object 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 work object form or flow action form will be 25 percent of the form width, and will grow or shrink if a user resizes the form.

CautionIf 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. GROVS 8/24/06

ID

Optional. Type a value for the ID= attribute of the table element. The ID is useful when a JavaScript function needs to reference the entire table.

Header Image

Optional. Click the magnifying glass icon() to open the Image Gallery landing page. Search for an image to include on the left side of the header.

Up About Section rules