You are here: User interface > User interface rules > Harness and section forms > Dynamic Layout Properties - General tab

Dynamic Layout Properties — General tab

 

Click in the dynamic layout header to display the Dynamic Layout Properties panel, and then select the General tab.

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

Select Other to select from custom container formats defined in the skin. In the field that appears, specify the custom format.

Refresh Condition Optional. Enter a simple expression based on the comparison of a pair of constants, properties, or both, combined by Boolean operators.

As a best practice, use the Condition Builder to edit expressions, or to trigger a refresh based on a property change or the addition or deletion of a row or column in a repeating layout. The editor also enables you to specify a pre-activity or data transform. Click to open the tool. See Using the Condition Builder to configure dynamic form actions.

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 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 to create a new when condition or review an existing when condition.

Note: 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.
Pagination Appears in repeating dynamic layouts only.
Pagination format

Optional. If the data results comprise more than a single page (approximately 20 rows of data), you may want to specify a paging format:

Progressive paging: Limits the number of rows initially loaded to render the page more quickly. Remaining items are loaded as-needed, as the user scrolls through the list. When a user drags the scrollbar and releases, all rows above that point in the grid are loaded.

Unlike traditional paging, in which users can access specific pages of data using paging controls, progressive paging enables users to access the entire data set by scrolling. Users can act on the full data set, dragging and dropping to re-order the list and sorting and filtering the entire list. For a description of a working example, see PDN article When and how to use progressive paging to load data into grids.

Progressive paging is available for all data sources, including report definition, and can be used with grids. Progressive paging is not available for tree or tree grids.

Traditional paging: Retrieves a segment, known as a page, from the total data set on the clipboard. You can specify the number of rows per page and select a page navigation control format. The paginate gadget (pyGridPaginator section) is automatically added to the right-most cell in Action Top. You can drag and drop the gadget onto any cell in an action area (do not drop into the repeating area).

Users can access data via the paging controls and can drag and drop rows within a page.
Note: If the results produce less than one page, the paginate gadget does not appear at runtime.

The options are:

None

No paging (default).

Progressive

Progressive paging. Presents one page of data, containing the number of items specified in Page size (number of rows), while incrementally loading the remaining data. When a user drags the scrollbar and releases, all rows above that point in the grid are loaded.

Additional data displays as the user scrolls through the list, providing the user with access to the full list and associated actions, such as re-ordering data by dragging and dropping, sorting, and filtering.

If fewer results are returned than the number specified in Page size (number of rows), the height of the grid automatically adjusts to eliminate unnecessary white space when Size grid height to content is selected.

Note: Performance with large data sets is influenced by a variety of factors including the row contents and the end-user’s system. Sorting and filtering can provide alternate ways for a user to access a specific set of rows.

Page size (number of rows)

Appears if you select a Pagination format other than None. Select the items rows per page (20 is the default). To specify a custom value, select Other and enter a positive integer in the empty field.

If the source is a report definition and the report definition is Dynamic or Virtual, the option As defined in report definition is available. If you select this option, the grid uses the "Page size" value established in the report definition's Report Viewer tab, in the options form for the "Enable paging" check box.

Header type Choose 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 an expand icon (expand) or collapse icon () that marks an area below the bar that users can expand or collapse (hide).
  • Fieldset — Provides no header area, but a border around the contents of the layout with a single text label. (This produces HTML FieldSet and Legend elements.)
Expand when Appears when the Header type is Collapsible. Specify the When condition that must be met to expand the content.
Expanded on load

Appears when the Header type is Collapsible.

Select to display the container expanded, rather than collapsed, on load.

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

Optional. Provide an ID for use in a guided tour. Use a combination of numbers, letters, and underscores. PRPC uses the Tour ID when it finds an anchor button during a tour stop anchor point.

Test ID

Optional. If authorized, you can provide a unique Test ID for use in your test suite in order to support better automated testing against any Pega application.

When creating a control that supports Test ID, the Test ID field is initially blank. Use a combination of numbers, letters, and underscores, or click the Generate ID button to create a time stamp as a unique ID. The attribute data-test-id is then generated for the selected element.

When you save an existing section, any supported controls that do not have a Test ID will have one automatically generated. You can override these with a custom ID at a later time.

Once generated, you can view your Test ID in HTML or display it in the Live UI panel.

You also have the option to have all controls that support Test IDs in a ruleset updated in bulk.

Test IDs are supported in the following elements:

  • Button
  • Link
  • Icon
  • Label
  • Formatted text
  • Text input
  • Text area
  • Autocomplete

A standard, out-of-the-box developer role, PegaRULES:SysAdm4, includes the privilege for Test ID. To disable Test ID for this role, modify the pxTestID privilege.

Role Type

Specify a WAI-ARIA role type for the dynamic layout. The WAI-ARIA role enables accessibility by communicating the role type and value to an assistive technology.

  • Landmark
  • Document Structure
  • Component/Widget
Value The Value appears when a WAI-ARIA role type is selected. The specific value options are dependent on the Role Type selected.
Descriptors Text entered in the Descriptor field appears in the auto-generated HTML as the ARIA label and can be read by an assistive technology.
Definitions dynamic layout
Related topics

Harness and Section forms - Adding a dynamic layout
Dynamic layout - Presentation tab
Actions tab

Skin form — Components tab — Layouts — Dynamic Layouts