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.

Have a question? Get answers now.

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