You are here: User interface > User interface rules > Harness and section forms > Adding an accordion SmartLayout

Section forms — Adding an accordion layout

Using the Accordion control, you can stack layouts 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.

As of V7.1, accordions are configured in dynamic layouts by default. Using dynamic layouts allows you to take advantage of HTML5 capabilities including cross-browser and cross-platform compatibility, access to the latest HTML markup, and improved performance.

You can configure styles and create custom formats for accordion layouts in the skin. See Skin form — Components tab — Layouts — Accordions.

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.

Add an accordion smart layout

To create an accordion layout, do the following:

  1. From the Layout control group, select the Accordion control. Alternatively, click the Layout control group itself to pop-out the Layout control group window.
  2. 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.

To create an accordion group, do the following:

  1. Select the Accordion control and drag it onto a top or bottom accordion border.
  2. 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.

Specify the dynamic layout properties

  1. Select the layout wireframe to make it active and then click the View properties icon at the top-level header. Each accordion within a group represents a new layout and has its own properties panel.
  2. Select the accordion that you want to modify. Each accordion is numbered and its value appears in the header; the number changes to match the tab you selected.

Field

Description

Layout format

Select a layout format for the dynamic layout:

  • Default
  • Stacked
  • Inline
  • Inline grid double
  • Inline grid triple

Select Other to select from additional dynamic layout formats defined in the skin.

You can create and modify dynamic layout formats in the skin. Skin form — Components tab — Layouts — Dynamic Layouts.
Container format

Select a format for the accordion container. You can create and modify accordion formats in the skin. See Skin form — Components tab — Layouts — Accordions.
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 the Gear icon 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 the Open icon to create a new when condition or review an existing when condition.

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.
Container Settings
Title Optional. Type text to display in the accordion 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.
Include icon with title Select if you want to include an icon in the title bar.
Icon

Optional. Click the Show Image Viewer icon to open the Image Library landing page and select an image to include on the left side of the header.
Icon title

If you want to display a tooltip when the user hovers the mouse pointer over the icon, type a text string within quotations, for example, "Select to view list".
Body visibility

Select one of the following to determine visibility:

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

As a best practice, use the Condition Builder to edit this field. See Using the Condition Builder to configure dynamic UI actions.
Defer load contents

Optional. Choose this option to delay loading at runtime of the section content until the user clicks the header. Deferring enables users to start using other parts of the page rather than waiting for this section to load.

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

Specify a pre-loading 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.)

See Dynamic Layouts - Presentation tab for descriptions of the fields in the Presentation tab.

Related information

About Sections

Open topic with navigation