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

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

Field

Description

Smart layout type Choose Single, Double, Triple or Customto control the number of column pairs in the Smart Layout.
Container format

Select a format for the Smart Layout container. You can create and modify formats in the skin. See Skin form — Components tab — Layouts — Smart layout.

Visibility

Select one of the following to control visibility:

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

As a best practice, use the Condition Builder to edit this field. Click the Open condition builder 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 visibility condition on client check box.
Run visibility condition on client

Appears when you select Conditional Visibility and enter a simple expression in the field that displays.

Select the Run visibility condition on clientcheck box to cause dynamic execution of the condition each time the value of a property stated in the condition changes.

Allow changes to columns

Optional. Selecting this check box 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.

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

Caution: 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.

Display header and title Select if you want to include a header.
Container Settings  
Title Optional. Type text to display in the 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 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

Optional. Leave blank to present the body always. To control visibility of the body, enter or 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.

As a best practice, use the Condition Builder to edit this field. Click the Open condition builder icon to open the tool. See Using the Condition Builder to configure dynamic UI actions.

Run visibility condition on client

Appears when you select Conditional Visibility and enter a simple expression in the field that displays.

Select the Run visibility condition on clientcheck box to cause dynamic execution of the condition each time the value of a property stated in the condition changes.

Conditions are automatically re-evaluated when the user updates a property value. By default, controls that allow typing, such as Text Input, are evaluated when the user leaves the field. To re-evaluate conditions as the user types, use the Apply Conditions action with a Keyboard event. See Control Form — Completing the Control tab.

Header type

Select one of the following header types. This field does not appear if the Format value is No Format, Hidden, Hidden Sub, Custom, or Outline.

Header Style

Description

Bar

Provides a static horizontal bar at the top of the layout.

Collapsible

Provides a horizontal bar at the top of the layout, with the ability to expand or collapse, to show or hide the layout, when clicked.

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.)
Defer load contents

Appears when you select a Collapsible Header type.

Select to delay loading the section content at runtime 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

Appears when you select a Collapsible Header type.

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