Harness and Section forms - About Smart layouts

Every section contains at least one layout. You can select from a number of layout types, among them, the smart layout. See Adding a smart layout.

Note: As a best practice, use dynamic layouts for new development. It is recommended that you upgrade existing smart layouts to take advantage of HTML5 capabilities including cross-browser and cross-platform compatibility, access to the latest HTML markup, and improved performance.

Smart layouts are templates containing fixed-width, fixed-height column pairs. Each column pair is designed to hold one label and one field, typically for a Single Value property value.

Use Smart layouts when creating form-like layouts consisting of label-field pairs that align across multiple rules.

A primary benefit of Smart layouts it to force vertical alignment even when layouts are nested. When a section using Smart layouts is nested within another section, all labels and fields are given consistent widths. Padding and cell widths are adjusted to seek attractive spacing and presentation.

The width and other style characteristics of these Smart layout templates depends on the portal skin rule in use. To ensure consistent results when building harnesses, sections, or flow actions for user forms, set the Skin preference to the skin that application users are expected to use. You can change template widths, heights, cell padding, and other characteristics of the templates using the Skin rule.

By design, you cannot change the height or width of Smart layout template-based cells through rule form updates. However, the template cell height and widths in styles for the <TD> HTML element are recorded. If at run time a cell contains an object that is explicitly larger than these values, browsers expand the table cell to attempt to display the entire object, overriding the fixed size restriction. The resulting display might vary by browser version.

When creating a SmartLayout, choose a template to control the number of columns created: Single, Double or Triple.

You can select one of the following smart layout formats or use a custom format as defined in the Skin rule :

  • Single — A single column pair
  • Double — One column pair, a spacer column and a second column pair
  • Triple — Three column pairs with two spacer columns

See the Pega Community article Using Smart layout features — How to customize, use Merging Cells, and change Field Width