Skip to main content

Table of Contents

Harness form — Adding a screen layout


Only available versions of this content are shown in the dropdown

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.

Did you find this content helpful?

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

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

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us