Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Screen layout properties

Updated on April 5, 2022

Some layout properties might not be available if the harness is used as an app view, main area, inner harness, or page view.

Unit

Specify the unit of measurement for the width of the layout: percentage ( % ) or pixels ( px ).

AlignmentSpecify the overall alignment of the screen layout on the screen.
WidthSpecify the width of the screen layout in pixels.
Screen layout format Select one of the following screen layout formats:
  • Content Only
  • Header
  • Footer, Header Left
  • Header Right
  • Header Left Right
  • Header Footer, Header Footer Left
  • Header Footer Right
  • Header Footer Left Right
  • Left
Layout modeOptimized code – Recommended option. Select optimized code to use flexbox-based layout in your form. A flexbox layout alters the width, height, and order of its contents to best fill the available space. The child layouts contained within this type of layout can be laid out in vertically or horizontally. You can expand them to fill the available space or shrink to avoid overflowing the parent layout. You can also manipulate horizontal and vertical alignment of the child layouts. If you need to build layouts in two dimensions, use nesting layouts (horizontal inside vertical or vertical inside horizontal).

Legacy code – Select legacy code to use float-based layout in your form. This type of layout uses the inline block when setting several layouts side-by-side inline. The inline block is compatible with pre-flexbox generation of dynamic layouts. Converting this layout to the optimized layout mode might require additional changes if you use custom CSS for styling the dynamic layout.

Display advanced presentation options
  • Inline style (not for production use) – You can use this field to define an inline style by entering cascading style sheet (CSS) code. However, entering an inline style results in a guardrail warning. For maintainability and reuse, the recommended approach is to use a custom CSS class.
  • Custom CSS class – Instead of creating a new custom format in the skin, you can adjust elements in a layout by applying CSS helper classes. For example, you can use a CSS helper class to double the standard right margin for an element. Click the Open class editor icon to see a list of available helpers. You can enter several helper classes, separated by a space. For more information, see CSShelper classes. Alternatively, you can enter the name of a custom style.

  • Harness form Adding a screen layout

    Screen layouts determine the overall structure of your screen. They define the structure of a harness that is included in a composite portal. When you create a new harness it contains a screen layout by default. A harness can contain only one screen layout.

  • Configuring a screen layout

    Determine the purpose of each area of the screen layout and identify the section to be placed in each area.

  • properties panel

    Click the View properties icon in the header of the region of the screen layout to display the Properties panel for that region.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us