Section forms
Completing the Layout tab — Adding an accordion SmartLayout

Using the Accordion control, you can stack SmartLayouts vertically, each with a visible header, within an accordion group. At runtime, when the user clicks one header, the layout body becomes visible and the other open body closes. For an example, see PDN article 25414 How to display collapsed form sections using the Accordion control.

Configure styles for the Accordion control in the Skin rule. See Skin form — Styles tab — Layouts — Accordion.

For information about using the Accordion control in harnesses, see Harness forms — Adding an accordion container.

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

1. Adding and deleting an accordion SmartLayout

To create an accordion layout, do the following:

Click the down-arrow () at the right end of the Layout control group () and select the Accordion control (). Alternatively, click the Layout control group itself to pop-out the Layout control group window.
Drag and drop the control onto the form. As you move the pointer over existing frames, a yellow line indicates where the accordion will be dropped.

The accordion layout appears in a wireframe on the form.

Alternatively, you can select an existing accordion layout and click the Insert Row Above () or Insert Row Below () icon to create a new one above or below the selected one.

To create an accordion group, do the following:

Select the Accordion control and drag it onto a top or bottom accordion border.
Release the pointer. A new accordion layout appears on the below (or above) the existing accordion.

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

2. Complete the Layout Panel — Top fields

To access an accordion SmartLayout properties panel, select the layout wireframe to make it active, and click the magnifying glass icon () at the top-level header. Each accordion within a group represents a new layout and has its own properties panel. Select the accordion you want to modify. Each accordion is numbered and its value appears in the header; the number changes to match the tab you selected.

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(), the wireframe on the rule form changes immediately to reflect your inputs. If the panel is not pinned(), click Apply to apply your inputs.

Complete the top fields, General tab, and Advanced tab.

Field	Description
Format	Select `Header - Standard` for a bolder header or `Sub Header – 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 >. 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 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.
Visible When	Optional. Leave blank to always present the header. To control visibility of this header, 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. 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 on Client? checkbox.

3. Complete the Layout Panel — General tab

Field	Description
Width	Select whether the width of columns in the table are to be set as a percent or in absolute pixels. Choose: `Pixels (Fit Content)` — To have the column widths on the user 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.) `Pixels (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). The display may truncate a data value if the value is wider than width defined by the pixel value. `Fill (100%` ) — To have the column widths on the user flow action form adjust to fractions of the total width of the user 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 user form or flow action form will be 25 percent of the form width, and will grow or shrink if a user resizes the form. `Stretch-Spacer` — To expand or contract the spacer widths so that the layout fits the entire form. The Field and Label column widths do not change. You cannot use this setting if the Smart Layout value is `Single`. 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.
Smart Layout	Choose `Single`, `Double` or `Triple` to control the number of column pairs in the Smart Layout.
Header Type	To maintain an accordion layout, leave `Accordion` selected.
Style Prefix	Optional. 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 the Skin rule 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. As a best practice, create a defer loaded wrapper section with the retrieval activity (instead of having multiple defer loaded sections with wrapper activities.)
Defer Load	Optional. Choose this option to delay loading at runtime of the section content until the user clicks the header. To enable users to take actions, such as submit, on a work item while other content is still being loaded, configure sections to use defer loaded asynchronous declare pages. See PDN How to configure non-blocking UI using Asynchronous Declare Pages (ADP).
New Layout	Optional. Choose this option to convert the selected accordion and those below it into a new accordion group below the original group. Deselect it to merge the selected accordion and those below it into the layout above it. If this is the only accordion in a group, this option is selected by default and cannot be changed.
Allow Changes to Columns	Optional. Selecting this checkbox converts this SmartLayout to a quasi-freeform layout. This gives you greater flexibility, enabling you to add and remove columns. Column restrictions remain in force, but you can change the type of any column, including to the `None` (unrestricted) value, making it like a Freeform column. Row restrictions remain in force, but you can remove them if all columns have a `None` type. If all restrictions are removed, you can change the height of individual rows, or the width of individual columns. With this flexibility, you can support a wider variety of scenarios. However, columns will not automatically adjust when switching between Single, Double, and Triple layouts. If you Allow Changes to Columns, you cannot undo this change. See PDN article 25970 Using SmartLayout features — How to customize, use Merging Cells, and change Field Width.

4. Complete the Layout Panel — Advanced tab

Field	Description
Body Visible When	Optional. Leave blank to present the body always. To control visibility of the body, 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.

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 Library landing page. Search for an image to include on the left side of the header.

About Sections

Section forms Completing the Layout tab — Adding an accordion SmartLayout

Field

Description

Field

Description

Field

Description

Section forms
Completing the Layout tab — Adding an accordion SmartLayout