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.

Harness form — Adding a screen layout

Updated on April 5, 2022

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.

Available only to user interfaces rendered in HTML 5 document type (standards mode).

Different layout options are available when you use the harness as an app view, a main area, inner harness, or a page view. The header and footer can be fixed on the page, or set up to scroll with the page.

A screen layout comprises of the following elements:

  • Main area
  • Adjacent regions, each identified by position: Header, Left, Right, and Footer

You can choose from one of many different screen layout formats, each of which can be styled in the Skin form — Components tab — Layouts — Screen layouts For example, you can choose the Header Footer Left format, which provides a header, a left sidebar, a main area, and a footer.

Each region in a screen layout can contain a single section. That section can hold a layout, which in turn can hold various controls or included sections. Typically, the section that goes into the main area contains a dynamic container.

Screen layouts can exhibit responsive behavior, as configured in the Skin form — Components tab — Layouts — Screen layouts. You can set responsive breakpoints for screen layouts, enabling the layout to adjust according to screen size, providing an optimal user experience on a desktop, tablet, and phone.

  • Open the harness that you want to modify..
  • On the Design tab, from the Structural list, drag Screen layout onto the work area.

  • Configuring a screen layout

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

  • Screen layout properties

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

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

  • Upgrading panel sets to screen layouts

    As a best practice, upgrade deprecated panel sets to screen layouts. Existing panel sets continue to function, but you cannot create a new panel set in applications rendered in HTML 5 document type (standards mode). Screen layouts are available only to user interfaces rendered in HTML 5 document type (standards mode).

  • harnesses

    Organize the content and structure of a portal by defining harnesses. By populating harnesses with sections, you can build a modular interface that promotes reuse and maintainability.

  • Sections

    Sections are the building blocks of your user interface. You can populate a section with components, such as fields and controls, to create a functional chunk of user interface that can be reused in different contexts for improved consistency and efficient development.

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