Layout Group Properties — General tab

Click the Gear icon in the layout group header to display the Layout group properties panel, and then select the General tab.

Layout format

Select a layout format for the layout group:

  • Default
  • Tab
  • Accordion
  • Stacked
  • Menu
  • Other

Select Other to be able to choose from additional layout groups that are defined in the skin. You create and modify layout group formats in the skin.

Container format

Select a format for the container. Select Other to be able to choose from custom container formats that are defined in the skin. In the field that is displayed, specify the custom format.

Visibility

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

  • Always — The region is always visible.
  • Condition (expression) — The region is visible under the specified condition. In the field that is displayed, 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 is displayed, select a when rule. Click the Open icon to create a new when condition or to 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 similar to the following:

pyCurrentSpace=="ASpaceName"

Then select the Run visibility condition on client check box.

Active when

To activate each tab in the layout group, specify a when rule or an expression.

Refresh when active

Select this option to refresh the active layout automatically whenever the content changes.

Defer load contents

Select this option to load content only when the user requires it.

Display header and title

Select this option to display a header for the dynamic layout. Container settings are also displayed when you select this check box. 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.

Container settings

Title

Enter text to display in the accordion header or subheader. This text may include directives or JSP tags, such as <p:r > or <pega:lookup >. If you plan to localize the application, choose the text carefully and limit the length to no more than 64 characters. 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 this option to include an icon in the title bar.

Icon

Click the Open icon to open the Image Library landing page, and then select an image to include on the left side of the header.

Icon title

To display a tooltip when the user hovers over the icon, enter a text string within quotation marks, for example, "Select to view list".

Body visibility

Select one of the following to determine visibility:

  • Always — The body is always visible
  • Condition (expression) — The body is visible under the specified condition expression. In the field that is displayed, 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 body is visible under the specified when condition. In the field that is displayed, select a when rule. Click the Open icon to create a when condition or to 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.

Header type

Select the format to be used to present this header:

  • Bar — A horizontal bar that is always present. The section is displayed as a single horizontal strip; all labels and values are visible on the strip.
  • Collapsible — A horizontal bar with icons that mark an area below the bar, which users can expand or collapse.
  • Fieldset — Provides no header area, but a border is displayed around the contents of the layout with a single text label. (This produces HTML FieldSet and Legend elements.)
Expand when

If the header type is Collapsible, use this option to specify the when condition that must be met to expand the content.

Expanded on load

If the header type is Collapsible, use this option to display the container in expanded form, rather than collapsed, on load.

Defer load contents

Select this option to delay run-time loading of the section content until the user clicks the header. Deferring load contents enables users to start using other parts of the page, rather than waiting for this section to load first. 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 the PDN article How to configure non-blocking UI using Asynchronous Declare Pages (ADP).

Specify a pre-loading activity

Optional. If the header type is Collapsible, you can specify an activity to be run, prior to loading, 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.